detect collision JavaScript

Question

I have 2 boxes, 1 is the player and the other one is the wall. I would like the player to stop moving if there is a wall in the direction that the player is moving on.
a plunker link is provided at the bottom of this question to show what the 2 boxes do.

useing wasd to move the box, I need to know how the player can detect the wall and stop moving when it comes in contact with the wall? this mean the player and the wall can not be in the same position, and the player would have to go around the wall instead of through the wall.
I need this today and i will be up all night so please don't hesitate to comment or answer the 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);

    for (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() {
  for (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 to add the function checkIfPlayerMovingIntoWall() to the player and the wall objects, see bellow, but 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 to answer or comment

Answer 1

Based on what you have so far, I'll make it like so :

• Set a global array containing your walls (right now you are comparing with your function called Wall ).
• Set a global variable to define a grid size for your rows and your columns.
• Make a call to checkIfPlayerMovingIntoWall() in the keydown handler. Add to this function an attribute to tell him where we want to go. If it's in a wall, return false and 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)); for (var b = 0; b < walls.length; b++) { ctxWall.fillStyle = walls[b].color; // color the box that is on count which is being created by adding a new box to the count ctxWall.fillRect(walls[b].row * gridSize, walls[b].col * gridSize, walls[b].width, walls[b].height); // the box is a rectangle with a length of 50 and a width of 50 and when a new line is added time the row by 50 and col by 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]; } for (i = 0; i < 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 are 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() { for (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, I did some cleanup in your up-right xy row-columns stuff.

Forked plunk