canvas - detect collision JavaScript -
i have 2 boxes, 1 player , other 1 wall. player stop moving if there wall in direction player moving on.
plunker link provided @ bottom of question show 2 boxes do.
useing w s d move box, need know how player can detect wall , stop moving when comes in contact wall? mean player , wall can not in same position, , player have go around wall instead of through wall.
need today , night please don't hesitate comment or answer question, thank you.
function player(row, col) { this.isupkey = false; this.isrightkey = false; this.isdownkey = false; this.isleftkey = false; this.row = row; this.col = col; this.color = "#f00"; } function drawwalls() { var walls = new array(); function wall (row,col) { this.row = row; this.col = col; this.color = "#000"; } walls[walls.length] = new wall(5,5); (var b = 0; b < walls.length; b++) { ctxwall.fillstyle = walls[b].color; ctxwall.fillrect(walls[b].row*25, walls[b].col*25, 25, 25); } } var players = []; var ctxplayer; var ctxwall; var currentplayer; window.onload = function() { ctxplayer = document.getelementbyid('c').getcontext('2d'); ctxwall = document.getelementbyid('walls').getcontext('2d'); currentplayer = players[players.length] = new player(2, 2); setinterval(render, 25); drawwalls(); } window.onkeypress = dokeydown; function render() { clearplayer(); drawplayer(); } function drawplayer() { (var p = 0; p < players.length; p++) { ctxplayer.fillstyle = players[p].color; ctxplayer.fillrect(players[p].row * 25, players[p].col * 25, 25, 25); } } function dokeydown(e) { console.log(e); if (e.keycode == 97) { currentplayer.isupkey = true; --currentplayer.row; } if (e.keycode == 100) { currentplayer.isdownkey = true; ++currentplayer.row; } if (e.keycode == 119) { currentplayer.isleftkey = true; --currentplayer.col; } if (e.keycode == 115) { currentplayer.isrightkey = true; ++currentplayer.col; } } function clearplayer() { ctxplayer.clearrect(0, 0, 600, 400); } http://plnkr.co/edit/27urhp?p=preview
i have tried add function checkifplayermovingintowall() player , wall objects, see bellow, again nothing happened.
function wall (row,col) { this.row = row; this.col = col; this.color = "#000"; this.width= 25 this.height= 25 this.leftx = this.row; this.rightx = this.row + this.width; this.topy = this.col; this.bottomy = this.col + this.height; } function player(row, col) { this.isupkey = false; this.isrightkey = false; this.isdownkey = false; this.isleftkey = false; this.row = row; this.col = col; this.color = "#f00"; this.width= 25 this.height= 25 this.leftx = this.row; this.rightx = this.row + this.width; this.topy = this.col; this.bottomy = this.col + this.height; } function checkifplayermovingintowall() { if (currentplayer.topy < wall.bottomy && currentplayer.bottomy > wall.topy && currentplayer.leftx < wall.rightx && currentplayer.rightx > wall.leftx) { alert("collision detected"); } } please don't hesitate answer or comment
based on have far, i'll make :
• set global array containing walls (right comparing function called wall).
• set global variable define grid size rows , columns.
• make call checkifplayermovingintowall() in keydown handler. add function attribute tell him want go. if it's in wall, return false , don't move.
// code goes here function player(col, row) { this.isupkey = false; this.isrightkey = false; this.isdownkey = false; this.isleftkey = false; this.row = row; this.col = col; this.color = "#f00"; this.width = 25 this.height = 25 this.leftx = this.row; this.rightx = this.row + this.width; this.topy = this.col; this.bottomy = this.col + this.height; } function wall(row, col) { this.row = row; this.col = col; this.color = "#000"; this.width = 25 this.height = 25 this.leftx = this.row; this.rightx = this.row + this.width; this.topy = this.col; this.bottomy = this.col + this.height; } function drawwalls(x,y) { walls.push( new wall(x, y)); (var b = 0; b < walls.length; b++) { ctxwall.fillstyle = walls[b].color; // color box on count being created adding new box count ctxwall.fillrect(walls[b].row * gridsize, walls[b].col * gridsize, walls[b].width, walls[b].height); // box rectangle length of 50 , width of 50 , when new line added time row 50 , col 50 } } function checkifplayermovingintowall(direction) { var playerpos = []; switch (direction) { case 'up': playerpos = [currentplayer.col, currentplayer.row - 1]; break; case 'down': playerpos = [currentplayer.col, currentplayer.row + 1]; break; case 'left': playerpos = [currentplayer.col - 1, currentplayer.row]; break; case 'right': playerpos = [currentplayer.col + 1, currentplayer.row]; break; default: playerpos = [currentplayer.col, currentplayer.row]; } (i = 0; < walls.length; i++) { var wall = walls[i]; if (playerpos[0] * gridsize < wall.row * gridsize + wall.width && playerpos[0] * gridsize + currentplayer.width > wall.row * gridsize && playerpos[1] * gridsize < wall.col * gridsize + wall.height && playerpos[1] * gridsize + currentplayer.height > wall.col * gridsize) { console.log("they touching") return true; } } return false; } var walls = []; var players = []; var ctxplayer; var ctxwall; var currentplayer; var gridsize = 25; window.onload = function() { ctxplayer = document.getelementbyid('c').getcontext('2d'); ctxwall = document.getelementbyid('walls').getcontext('2d'); currentplayer = players[players.length] = new player(2, 2); setinterval(render, 25); drawwalls(1,2); drawwalls(2,1); drawwalls(4,1); } window.onkeydown = dokeydown; function render() { clearplayer(); drawplayer(); } function drawplayer() { (var p = 0; p < players.length; p++) { ctxplayer.fillstyle = players[p].color; ctxplayer.fillrect(players[p].col * gridsize, players[p].row * gridsize, players[p].width, players[p].height); } } function dokeydown(e) { e.preventdefault(); if (e.which == 87 || e.which == 38) { currentplayer.isupkey = true; if (checkifplayermovingintowall('up')) { return; } --currentplayer.row; } if (e.which == 83 || e.which == 40) { if (checkifplayermovingintowall('down')) { return; } currentplayer.isdownkey = true; ++currentplayer.row; } if (e.which == 65 || e.which == 37) { if (checkifplayermovingintowall('left')) { return; } currentplayer.isleftkey = true; --currentplayer.col; } if (e.which == 68 || e.which == 39) { if (checkifplayermovingintowall('right')) { return; } currentplayer.isrightkey = true; ++currentplayer.col; } } function clearplayer() { ctxplayer.clearrect(0, 0, 600, 400); }canvas { margin: 20px auto 0; display: block; } #canvashud, #canvasplayer, #walls { margin: -400px auto 0; }<canvas width="600" height="400" id="c"></canvas> <canvas width="600" height="400" id="walls"></canvas>also, did cleanup in up-right x-y row-columns stuff.
Comments
Post a Comment