JS中的碰撞检测

Question

我在HTML5 canvas + JS中重新创建一个类似于Tron的旧游戏。主要区别在于蛇不会成直角，它们可以在曲线上移动（名称为Achtung Die Kurve）。

我需要检测碰撞，我不知道怎么回事。规则非常简单，我提出或阅读的所有内容看起来都很复杂。碰撞发生在：

1. 一条蛇跑进另一条蛇的身体（或它自己的身体）头先（我强调这是因为，在一个非常早期的实验中，我的蛇头向后压成了他们自己的“脖子“他们一移动：P）。

2. 一条蛇跑到墙上（没有内墙）。

我应该怎么做？我愿意为我的对象添加所需的任何数据。

Answer 1

你可以在内存中使用画布像素大小（宽度*高度）的2d布尔数组。 我的数组总是填充墙的布尔值（如果你关心，也可以是内墙）和蛇的身体。

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

理论上你可以通过检查画布本身的像素值来做到这一点，但是如果你想使用背景图案或其他不可克隆的元素，它将不适合你。

Answer 2

我建议每次移动时都会得到蛇头前部的坐标（每一帧都可能）。

然后使用snakeHead.style.display = 'none';

暂时隐藏蛇头（你会在渲染之前重新显示它）

然后document.elementFromPoint(x, y)检查哪个元素正好位于蛇头前方。也许为所有导致碰撞和测试的元素添加一个名为collidable的类或其他东西

var class = ' '+document.elementFromPoint(x, y).className+' ';
if(class.indexOf(' collidable ') > -1){
    alert('Collision!');
}

然后当然重新说明蛇头：

snakeHead.style.display = 'whatever is was before probably inline';

只是一个想法。

elementFromPoint也具有良好的浏览器兼容性：http://www.quirksmode.org/dom/w3c_cssom.html#documentview

让我知道它是如何发挥出来的：）

Answer 3

你想要像素完美的碰撞检查吗？最好的办法是将游戏区域视为一个网格（无论你需要什么分辨率，像素完美或其他），并保留每条蛇的列表，指出每条蛇占据哪个网格位置。然后存储蛇头部的位置和表示其方向的矢量，并针对蛇占据的所有网格位置测试位置+矢量。如果您希望优化那么多，可以使用哈希集使这个过程高效。

Answer 4

首先，感谢大家的回复！我阅读了你发布的内容，阅读了一些内容，做了一些重点，并决定做以下事情：

我将保留一个代表游戏区域的字节图，每次占用一个位置时，将值加1。然后，我要检查蛇头的4个角的3个“外”角（“内”角与身体其他部分相撞），以获得!= 1值。

我想我会使用隐形画布和 alpha 值来保持我的代码简单。

抱歉，我写了自己的答案接受：我认为保留我将要实施的实际解决方案的记录很重要，并且没有一个答案完全详述我的决定。

Answer 5

我认为最好的选择是将蛇分成段，存储在内存中并检查与这些段的冲突。