使用2D Canvas进行碰撞检测

Question

I have some code that works pretty well, but could someone explain how this works to prevent collision in a video game? What does this code actually mean?

var checkCollision = function (bugs) {
   if(player.y + 131 >= bugs.y + 90
      && player.x + 25 <= bugs.x + 88
      && player.y + 73 <= bugs.y + 135
      && player.x + 76 >= bugs.x + 11) {
          console.log('YOU LOSE!');
      }
}

Answer 1

This is a common collision detection approach. Firstly each object, that being the player and the bug , have their position along with a width and height to them:

Now if we look at one of the conditions of the form: player.x + A >= bugs.x + B we have a line:

Place four lines together and you get a collision box:

Here is how collisions tend to look like:

if (player.x < bug.x + bug.width       // Player X is to the left of the bug's right
&& player.x + player.width > bug.x     // Player X is the to right of the bug's left
&& player.y < bug.y + bug.height       // Player Y is above the bottom of the bug
&& player.height + player.y > bug.y) { // Player Y is below the top of the bug
    // found a collision
}

This is an overlap between the player and the bug :