javascript - JS中的碰撞检测

标签 javascript html collision-detection html5-canvas

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

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

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

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

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

最佳答案

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

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

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

关于javascript - JS中的碰撞检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6714388/

相关文章:

javascript - 在不与现有点碰撞的情况下找到最近的可用空间

javascript - 使用 JavaScript 的 Iframe 单击不起作用

android - WebView 不适用于本地 HTML 文件

html - 谷歌风格的 Bootstrap 主题会抛出大量 CSS 验证错误。使用样式表安全吗?

opengl - 有没有一种简单的方法来检测 2 个 GL 对象之间的碰撞?例如 glutSolidCylinder 和 glutSolidTorus

python - 如何检查我的角色正在与哪个物体发生碰撞?

javascript - 关于丢帧和 requestAnimationFrame 的困惑

javascript - 我很难从 Promise 中派生出 child

javascript - 如何从可拓结构中获取能量?

html - 替换 SQL Server 报告中的默认 css 值