how can I detect collision in a 2D tile game map

Question

I made this basic game where I drew a map and a player, the player can move anywhere but how can I make so that it wont move when its on the tile[1] in the map? also when I try to check if the player.x is greater than 50 it could go left it works but than if I click 2 keys at once it goes through const context = document.querySelector("canvas").getContext("2d");

var rgb = 'rgb(' + Math.random()*256 + ',' + Math.random()*256 + ',' + Math.random()*256 + ','+Math.random() + ')';

document.onload = Loop();

var width = 1500;
var height = 800;

function Loop(){

  var width = 1500;
  var height = 800;

  context.canvas.height = height;
  context.canvas.width = width;

  this.interval = setInterval(Update, 1000/100);

}



const Player = function(x, y, w, h, color) {
  this.x = x; this.y = y; this.w = w; this.h = h;

  this.speedY = 0; this.speedX = 0;
  this.Draw = function(){
    context.fillStyle = this.color;
    context.fillRect(this.x, this.y, this.w, this.h);
  };
  this.Move = function(){
    this.x += this.speedX;
    this.y += this.speedY;
  };
};

var player = new Player(100,100,50, 50, rgb);


var Key = {};
function Update(){
  context.clearRect(0, 0, width, height);
  Map();
  player.Draw();
  player.Move();

onkeydown = onkeyup = function(e){
  player.speedX = 0;
  player.speedY = 0;
  e = e || event;
  Key[e.keyCode] = e.type == 'keydown';
    if(Key[37] || Key[65]) {player.speedX -= 2}
    if(Key[38] || Key[87]) {player.speedY -= 2}
    if(Key[39] || Key[68]) {player.speedX += 2}
    if(Key[40] || Key[83]) {player.speedY += 2}
    if(Key[32]) {player.color = 'rgb(' + Math.random()*256 + ',' + Math.random()*256 + ',' + Math.random()*256 + ','+Math.random()*1 + ')';}
  };
}

var map = [
1, 1, 1, 1, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 0, 0, 0, 1,
1, 1, 1, 1, 1
    ];

var row = 5;
var column = 5;


function Map(){
  for(let y = -1; y < column; y++){

    for(let x = -1; x < row; x++){
      switch(map[((y*row) + x)]) {
        case 0: context.fillStyle = player.color;
          break;
        case 1: context.fillStyle = "#ffffff";
          break;
        default: context.fillStyle = "#000000";
      }
    context.fillRect(x*50, y*50, 50, 50);

    }
  }
}

Ramenous · Accepted Answer

Firstly, looking at your code, there are some things that are missing which is required to implement basic collision detection and those are:

The player's current direction that he/she is moving in. This is important because it allows the function determining the collision detection to distinguish which side it is checking for the collision (Up, down, left, or right) since a player can only collide with one side at a time.
The tile's position and size. This is also very important because like the first point, there is only one side of the tile that the player can collide with and knowing the size and position can determine if it is a collision or not based on the players size and position.

Also, since you mentioned it is a basic game, the implementation below is a basic collision detection. If you were to make a more complex and bigger game, you should try looking into quad trees for more efficient collision detection: https://gamedevelopment.tutsplus.com/tutorials/quick-tip-use-quadtrees-to-detect-likely-collisions-in-2d-space--gamedev-374

Now this is the function for detecting collision, for the sake of readability and shortness, p will represent the player object and t would represent the tile object. This function returns whether or not the player is colliding with a tile based on their direction of movement.

function isColliding(p, t){
  if (p.direction == 'up') {
   return p.y +(p.height/2)-p.speedY< t.y + t.height && p.y > t.y
      && p.x + p.width > t.x && p.x < t.x + t.width;
  }
  if (p.direction == 'down') {
    return p.y + (p.height/2)+p.speedY > t.y && p.y < t.y
      && p.x + p.width > t.x && p.x < t.x + t.width;
  }
  if (p.direction == 'right') {
    return p.x + p.width+p.speedX > t.x && p.x < t.x
      && p.y +(p.height/2)> t.y && p.y + p.height < t.y +t.height+ (p.height / 2);
  }
  if (p.direction == 'left') {
    return p.x -p.speedX< t.x + t.width && p.x > t.x
      && p.y +(p.height/2)> t.y && p.y + p.height < t.y +t.height+ (p.height / 2);
  }
  return false;
}

You would probably want to put this in the player move function to constantly detect for tiles as it is moving. To do that, you'd want to modify your keydown detection so that with each different keydown, it would update the player's direction, here's a simple example:

document.onkeydown = function(event){
    if (event.keyCode == 87)
        player.up = true;
    else if (event.keyCode == 65)
        player.left = true;
    else if (event.keyCode == 83)
        player.down = true;
    else if (event.keyCode == 68)
        player.right = true;
}

and another simple example for every time the player moves (user presses a keydown):

const Player= function(/*Param stuff*/){
  /*Property stuff*/
  //tileArray is the array (or object, your choice) of all the current tiles in the map
  this.move=function(tileArray){
    //Go through all tiles to see if player is colliding with any of them
    for(var t in tileArray){
      if(this.up){
        if(isColliding(this, tileArray[t]){
          //functionality for when player collides
        }else{
          //functionality for when player doesn't collide
        }
      }
      //check if player is going down, left, etc
    }
  }
}

These are just examples of how to implement the detection. You should use it as a reference to implement it relatively to how your code function because I didn't write it based on what you posted.

PS.

Make sure to also convert the directions to false after the user stops pressing the key.

how can I detect collision in a 2D tile game map

Answers (2)

Related Questions