javascript - JS中的碰撞检测

Question

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

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

我该怎么办？我愿意将所需的任何数据添加到我的对象中。

score 2 · Accepted Answer

您可以在内存中拥有一个具有画布像素大小（宽度*高度）的二维布尔数组。我的数组总是填充墙壁的布尔值（如果你关心，也可以是内墙）和蛇的身体。

在每次迭代中，检查蛇头在数组中的位置，如果那里的值是真的，那么你就发生了碰撞。

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

score 1 · Accepted Answer

我建议每次移动时获取蛇头前部的坐标（可能是每一帧）。

然后使用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';

只是一个想法。

让我知道它是怎么玩的:)

score 0 · Accepted Answer

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

score 0 · Accepted Answer

首先感谢大家的回复！我阅读了您发布的内容，阅读了更多内容，进行了一些思考并决定执行以下操作：

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

我想我会使用一个不可见的画布和alpha值来保持我的代码简单。

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

score 0 · Accepted Answer

I thought that the best option is split the snakes in segments, stored in memory and check the collisions against those segments.

5 回答 5