Check collision between 2 divs in JavaScript

Question

I have a problem when detecting a collision with the upper part of the div that forms the obstacle.

I can detect collisions with the sides and with the lower edge, but not with the upper one.

for (i = 0; i < game.obstacles.length; i++){
  // Colisiones con los bordes laterales
  if (marioX < obstacleX[i] + obstacleWidth[i] &&
    marioX + marioWidth > obstacleX[i] &&
    marioY < obstacleY[i] + obstacleHeight[i] &&
    marioY + marioHeight > obstacleY[i]) {
    game.player.collisionLateral();
  }
  // Colisiones con el borde inferior
  if (marioY < obstacleY[i] + obstacleHeight[i] &&
    marioY + marioHeight > obstacleY[i] &&
    marioX < obstacleX[i] + obstacleWidth[i] &&
    marioX + marioWidth > obstacleX[i]) {
    game.player.collisionDown();
  }
  // Colisiones con el borde superior
  if (marioY > obstacleY[i] + obstacleHeight[i] &&
    marioY + marioHeight < obstacleY[i] &&
    marioX < obstacleX[i] + obstacleWidth[i] &&
    marioX + marioWidth > obstacleX[i]) {
    //entonces
    game.player.collisionUp();
  }
}

I have these two collisions but I can not get the upper edge for the character to stay on that div

I leave here the link to github https://github.com/JesusSilva/super-mario

Answer 1

Your conditions for vertical collision detection are mutually exclusive.

marioY > obstacleY[i] + obstacleHeight[i] &&
marioY + marioHeight < obstacleY[i]

marioHeight and obstacleHeight[i] are positive, right? Lets just replace them with 0 to remove the constants here. Then we get marioY > obstacleY[i] && marioY < obstacleY[i] which are never true at the same time.

All of your collision test code is really checking if the divs overlap, which you only need to do once.

To determine which edge the collision is occurring on, you may want to check the x and y distances from mario's center to the obstacle and use the shortest one to determine where the collision happened, or you may want anything within a range at the top or bottom of mario to register a vertical collision even if it close to a right or left edge. You may have the vector at which mario and the obstacle are moving at the time of the collision and you can take their difference to determine the vector of the collision.

Answer 2

Ok first your code for the detection is not working, if you put some alert to the different case, you'll see that the last "if" is never called, it's always the second one. With this code, i got the right behavior:

for (i = 0; i < game.obstacles.length; i++){

  if (marioX < obstacleX[i] + obstacleWidth[i] &&
    marioX + marioWidth > obstacleX[i] &&
    marioY < obstacleY[i] + obstacleHeight[i] &&
    marioY + marioHeight > obstacleY[i]) {
    game.player.collisionLateral();
  }
  //Test when mario is below the obstacle
  else if (marioY < obstacleY[i] + obstacleHeight[i] &&
    marioY + marioHeight >= obstacleY[i] &&
    marioX < obstacleX[i] + obstacleWidth[i] &&
    marioX + marioWidth > obstacleX[i]) {
    game.player.collisionDown();
  }
  //Test when mario is above the obstacle
  else if (marioY + marioHeight > obstacleY[i] + obstacleHeight[i] &&
    marioY <= obstacleY[i] + obstacleHeight[i] &&
    marioX < obstacleX[i] + obstacleWidth[i] &&
    marioX + marioWidth > obstacleX[i]) {
    game.player.collisionUp();
  }
 }
}

But it doesn't solve your problem. When Mario hit the obstacle from above, he need to stay on this one, so you call your function "collisionUp" which put the speedY to zero. But you have this function in your main.js :

  setInterval(function() {
    game.player.render();
    game.player.winner();
    checkCollisions();
  }, 1000 / fps);

And this function do this for the Y position of Mario :

  var newY = this.posY + this.speedY - 5;
  if (newY >= 0 && newY <= this.size.height - 70) {
    this.posY = newY;
  }
  this.element.css({ bottom: this.posY, left: this.posX });

Which always move Mario down to simulate gravity. So you have to find a solution that when the speedY is zero because Mario hit an obstacle by above, this part of the render function is deactivated.

;)