Javascript, how to make player collide with tile map

Question

I'm trying to do a bomberman based game, but I'm struggling to make the player colide with the wall, here's my code below: Inside of the array, 0 is the walls and 1 is the path

// xPos is the position of my tiles (horizontal ( width). This array have the starting tile 28.5, and the sum of this value to find another tiles
// yPos is the position of my tiles (vertical(height). The same happens with height.

var xPos = [28.5, 57, 85.5, 114, 142.5, 171, 199.5, 228, 256.5, 285, 313.5, 342, 370.5, 399, 427.5, 456, 484.5, 513, 541.5, 570, 598.5];
var yPos = [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560, 600];

// I started this for loop to identify if my player is on a position 0 or 1 if the position x and y result in 1 it means that he's in the path otherwise, wall. I don't know what I need to do with this for loop to identify the wall or the path.

  for(var i = 0; i < xPos.length; i++){
    for(var j = 0; j < yPos.length; j++){
    if(player.x <= xPos[i] && player.y <= yPos[j]){

    }
   }
}

//This is my stage map, 0's are the walls and 1's are the path. I used two for loops to draw the stage.
function drawStage(){
var mapArray =[
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
];

var posX = 0;
var posY = 0;

for(var i = 0; i < mapArray.length; i++){
    for(var j = 0; j < mapArray[i].length; j++){

        if(mapArray[i][j]==0){
            ctx.drawImage(steel, posX, posY, 250,338);
        }
        if(mapArray[i][j]==1){
            ctx.drawImage(grass, posX, posY, 250,338);
        }
        posX+=28.5;
    }
    posX=0;
    posY+=40;
 }
}

//That's my object

var player = {
x: 25,
y: 40,
spdX: 4,
spdY: 4,
width: 42,
height: 38,
};


// That's is my function to collide with another enemies, I don't know if it's possible to use the same collision code of my player x enemy, to player x walls.
function collision(player, enemy){
if (player.x < enemy.x+enemy.width &&
    player.x+player.width > enemy.x &&
    player.y < enemy.y+enemy.height && 
    player.y+player.height > enemy.y){
        console.log("collide");


}
}

// I can't use external libraries, this is a game project for my course of web programming.
// if you need more detais, please ask me.

Domagoj · Accepted Answer · 2016-07-26 09:15:15Z

You're on the right track, but just a little off the mark. Like most problems, this can be solved in many different ways. Here's one I think should be simple and effective in your case.

The cool thing about tile-based games is that they allow for a good separation of data and visuals. As you can see from your own code, the map is nothing more than a two-dimensional array of ones and zeroes. Assuming the index of a tile in the map array coincides with the origin of the tile graphic on the player's screen (e.g. its top left corner position), mapping the data to the visuals is easy!

Same goes for any entities or objects placed on the map, such as the player and bombs. From the perspective of the data, their position on the map is nothing more than an index in the map array. This means that checking what other entities and objects surround them is as simple as probing the map array data at surrounding indexes.

Let's assume a simple two-dimensional map where walls are 0, and paths are 1:

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

Let's place a player on the map, for example at position (1, 1):

var player = {
  mapX : 1, // Map array row index
  mapY : 1  // Map array column index
};

The player wants to move in a direction, but he can only do so if he's moving along path tiles. To see if we can allow the player to move in the desired direction, we probe the map array index in his direction of movement for path tiles:

/*
    Checks if path tile exists at map[x][y].
    @param map Map data array
    @param x   Map data array row
    @param y   Map data array column
*/
function isPathTile(map, x, y) {
    return (map[x][y] === 1); // Because 1 is the path tile
}

/*
    Let's assume player wants to move to the right,
    increasing his horizontal position on the map by one.
*/
if (isPathTile(map, player.x + 1, player.y)) {
    move(player, 1, 0);
}

There's really not much else to it. Keeping a reference to the player's position in the map array saves you from iterating over the array to learn about the player's environment. Instead, you only check the elements of the array that matter. This saves you a lot of time and makes your checks faster and more efficient. You'll begin to notice this with larger map sizes.

Stack Exchange Network

Javascript, how to make player collide with tile map

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Javascript, how to make player collide with tile map

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions