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 w a s d 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

anything will help, please comment if you have any suggestions — Dalomo
– Dalomo, Commented Apr 1, 2015 at 2:39
I do not know if you have seen these already: HTML5 Canvas Game: 2D Collision Detection. Also: 2D collision detection. Or: How To Do Collision Detection In An HTML5 Game — Ryan Vincent
– Ryan Vincent, Commented Apr 1, 2015 at 3:16
@RyanVincent yah I have actually tried 2 of these, the problem is my object the player is created inside an array and so is the wall object, so it became very confusing on how the 2 objects can detect each other, how would you suggest the objects would detect each other, also if you have any idea on how they can then would you please show me a hint on how the code can be written — Dalomo
– Dalomo, Commented Apr 1, 2015 at 3:22

Kaiido · Accepted Answer · 2015-04-01 07:44:37Z

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 x-y row-columns stuff.

Forked plunk

Collectives™ on Stack Overflow

detect collision JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related