javascript - JS中的碰撞检测

Question

我正在用 HTML5 canvas+JS 重新创建一个类似于 Tron 的旧游戏。主要区别在于蛇不会直 Angular 转弯，它们可以曲线移动(名称为 Achtung Die Kurve)。

我需要检测碰撞，但我不知道该怎么做。规则真的很简单，我想出或读到的一切看起来都不必要地复杂。碰撞发生在:

1. 一条蛇先撞到另一条蛇的 body (或它自己的 body )头先(我强调这一点是因为，在一个非常早期的实验中，我的蛇的头向后压入自己的“脖子”，他们一移动 :P)。

2. 蛇撞墙(没有内墙)。

我该怎么办？我愿意向我的对象添加任何需要的数据。

Answer 1

您可以在内存中拥有一个二维 bool 数组，其大小为 Canvas 像素(宽度*高度)。我的数组总是填充墙壁的 bool 值(如果您愿意，也可以是内墙)和蛇的 body 。

在每次迭代中，检查蛇头在数组中的位置，如果数值为真，则发生碰撞。

理论上你可以通过检查 Canvas 本身的像素值来做到这一点，但如果你想使用背景图案或其他不可碰撞的元素，它对你不起作用。