使用2D Canvas进行碰撞检测

Question

我有一些效果很好的代码，但有人可以解释一下这是如何防止视频游戏中的冲突的吗？这段代码究竟意味着什么？

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

这是一种常见的碰撞检测方法。首先，每个对象（player和bug）都有自己的位置以及width和height：

现在，如果我们查看表单的其中一个条件：player.x + A >= bugs.x + B我们有一行：

将四条线放在一起，你会得到一个碰撞盒：

以下是碰撞的样子：

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
}

这是player和bug之间的重叠：