Collision using Tilemaps [closed]

Question

How do I get the player in a platformer to collide with tiles My code for my for loop is

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

            if(game.map[i][j] === 2) {
                drawImage(game.backgroundContext, game.images[0], game.x, game.y, 50, 50);
            }
            if(game.map[i][j] === 1) {
                drawImage(game.backgroundContext, game.images[1], game.x,game.y,50,50);
            }
            if(game.map[i][j] === 0) {
                game.backgroundContext.fillStyle = "#14FFDA";
                game.backgroundContext.fillRect(game.x, game.y, 50, 50);
            }
            game.x += 50;
        }
        game.x = 0;
        game.y += 50;
    }

I was thinking to put

        if(game.player.y >= game.y && game.player.y <= game.y+height) {
            game.player.falling = false;
        } else {
            game.player.falling = true;
        }

inside one of the if its equal to one (0 = background 1=floor)

Anyone have the annswer

Edit Image (The player goes through the bricks)

Edit Due to downvotes nobody gets the bounty If it gets back to 0 downvotes I will give the bounty away

Answer 1

There is something pretty strange in your code.

Your game has x and y attributes and you increment them in order to draw your scene. You then use the same game.x and game.y in your collision detection code, that does not make sense.

First of all you could just change your loop like this

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

        if(game.map[i][j] === 2) {
            drawImage(game.backgroundContext, game.images[0], j * 50, i * 50, 50, 50);
        }
        if(game.map[i][j] === 1) {
            drawImage(game.backgroundContext, game.images[1], j * 50, i * 50,50,50);
        }
        if(game.map[i][j] === 0) {
            game.backgroundContext.fillStyle = "#14FFDA";
            game.backgroundContext.fillRect(i * 50, j * 50, 50, 50);
        }
    }
}

Which allows you to get rid of these game.x and game.y.

Then concerning collision detection, you should parse all the brick tiles and check if player.y + player.height >= brick.y (in canvas y = 0 is on top of the screen). That means somewhere you should stock the brick elements.

This might look like this

detectCollision()
{
     falling = true;
     for (brick in bricks)
     {
         if (player.y + player.height >= brick.y)
         {
             falling = false;
             break;
         }
     }
}

If the floor is supposed to be linear all way long, you can make it even more simple. Just store the y position of the floor and check if player.y + player.height >= floor.y only once.