JavaScript HTML5 Canvas 碰撞检测

标签 javascript html canvas collision-detection

我正在创建一个 air hockey使用 HTML5 Canvas 和 JavaScript 的类游戏。我已经走了很远了,但检测到木槌和球的碰撞让我难住了。我尝试使用两个圆之间的距离和距离平方(通过绕过平方根来节省 CPU)。我不明白为什么没有检测到碰撞。

这是我所拥有的:http://austin.99k.org/z_Archive/Air_Hockey/

请看一下并帮我解决一下。源文件有一些注释。

最佳答案

你的点击函数是错误的。您应该简单地计算两点之间的距离(您做得正确),并将其与木槌和球之间的最小距离进行比较。

例如,

return distance_squared < radii_squared

你实际上(有效地)在做:

return -COLLIDEDISTANCE < radii_squared - distance_squared && radii_squared - distance_squared < COLLIDEDISTANCE

这要求任何命中都在边缘的 2 个单位内,但我通过 hit() 看到的数字表明您所处的比例因子使单个单位小于一个像素。

关于JavaScript HTML5 Canvas 碰撞检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3604842/

相关文章:

javascript - 具有流畅运动的CSS动画关键帧

javascript - JavaScript 表达式是如何计算的?

javascript - 如何通过ajax从SPA获取完整的html?

html - 使元素在媒体屏幕上对齐已更改

animation - 停止并重新启动 CreateJs 动画

canvas - 有没有办法在 tkinter 中从 TreeView 拖放到 Canvas 上?

javascript - “*[attribute^="string""如何/为什么是有效的查询选择器?(JS 错误?)

javascript - 为什么 select 标签没有填充我的 ng-options?

javascript - vanillaJS 中的简单 channing 图像不起作用

javascript - 单击网页屏幕截图时鼠标消失