Javascript Canvas 碰撞检测问题

Question

我已经被这个问题困扰了一段时间，我希望得到一些帮助。基本上情况就是这样。我有多个正方形(100 x 100)在 Canvas 上向上移动，一段时间后再次重置到底部。我还有一个可左右移动的可控立方体(20 x 20)。游戏的目标是躲避立方体，直到达到一定的时间限制。但我一生都无法获得“宇宙飞船”和方 block 工作的碰撞检测。有人有什么想法吗？这是我的一些代码，在这方面已经取得了一定的成功(只有“宇宙飞船”的左侧击中了其他立方体寄存器)。

for(var n = 0; n < block.length; n++){
if(y > block[n].y && y < (block[n].y + 100 )){
    console.log(y + 100 + " " +  "y check1");
    if(x > block[n].x && x < block[n].x + 100){
        x += 20;
        console.log(x + 100 + " " +  "x check1");
     }
  }
}

注意:x 和 y = 船舶的位置， block.y 和 block.x = 连续循环检查的 block 的位置。

如果需要，我可以提供其余的代码。 谢谢!

Answer 1

这是一个基本的碰撞检测。有趣的是，它并不是真正寻找碰撞，而是寻找对象之间的间隙。没有间隙，就被击中了。

if (rect1.x < rect2.x + rect2.width &&
   rect1.x + rect1.width > rect2.x &&
   rect1.y < rect2.y + rect2.height &&
   rect1.height + rect1.y > rect2.y) {
// collision detected!
}