JavaScript HTML5 画布碰撞检测

发布于 2024-09-16 18:35:02 字数 381 浏览 5 评论 0原文

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

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

请看一下并帮我弄清楚。源文件有一些注释。

I'm working on creating an air hockey-like game using HTML5 canvas and JavaScript. I've gotten pretty far, but detecting the collision of the mallet and the ball has me stumped. I've tried using the distance between the two circles and distance squared (to conserve CPU by bypassing square root). I can't figure out why the collision is not being detected.

Here's what I have: http://austin.99k.org/z_Archive/Air_Hockey/

Please take a look and help me figure it out. The source files are somewhat commented.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

满栀 2024-09-23 18:35:02

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

例如,

return distance_squared < radii_squared

您实际上(有效)正在做:

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

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

Your hit function is wrong. You should simply compute the distance between the two points (which you do correctly), and compare that to the minimum distance between the mallet and ball.

For example,

return distance_squared < radii_squared

You're actually (effectively) doing:

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

Which requires any hit to be within 2 units of the edge, but the numbers I saw running through hit() implied you're at a scale factor that makes a single unit less than one pixel.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文