-2
\$\begingroup\$

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 enter image description here (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

\$\endgroup\$
6
  • \$\begingroup\$ Your first snippet appears to be the game / level setup, whilst the second snippet should be part of your game's main loop. You should not be checking collisions during setup, or (ideally) performing setup in your main loop... \$\endgroup\$
    – allnodcoms
    Commented Jan 14, 2017 at 11:55
  • \$\begingroup\$ I do that, its in my render loop. \$\endgroup\$
    – Artsicle
    Commented Jan 14, 2017 at 16:06
  • \$\begingroup\$ If that WILL get more downvotes though, this community has to be fixed. It should be about helping, not downvoting. \$\endgroup\$
    – Artsicle
    Commented Jan 16, 2017 at 21:19
  • \$\begingroup\$ This community is about helping, but like all communities, we have rules and etiquette and we expect our members to adhere to them. Your question here has been poorly received, primarily (I would guess) due to the fact that it is little more than a code dump without a clear problem statement, and you don't seem interested in improving your question so much as trying to bump it (which is not appropriate) and try to lord a bounty over other users (a bounty you don't fully control, anyhow), which is rude. \$\endgroup\$
    – user1430
    Commented Jan 17, 2017 at 1:58
  • \$\begingroup\$ If @realUser404's answer, below, does not actually solve your problem, then you should clarify your question. I would suggest including some information about the context in which the code you have presented is called and information about what the state of the program is when you step through it in the debugger. Which of these conditions for detecting the collision do you expect it to hit? What are the values of the relevant variables when it doesn't hit and passes through? If you can extract that info, you may even be able to arrive at the solution yourself. \$\endgroup\$
    – user1430
    Commented Jan 17, 2017 at 2:01

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\begingroup\$ So how would I go about "storing" the bricks \$\endgroup\$
    – Artsicle
    Commented Jan 16, 2017 at 20:30
  • \$\begingroup\$ You could use an array of objects. Did you try the simple way player.y + player.height >= floor.y ? \$\endgroup\$ Commented Jan 17, 2017 at 9:10
  • \$\begingroup\$ But I want it compatible with new tile sets, but the array would probably work! \$\endgroup\$
    – Artsicle
    Commented Jan 17, 2017 at 11:14

Not the answer you're looking for? Browse other questions tagged .