JavaScript HTML5 画布碰撞检测
我正在努力使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你的命中函数是错误的。您应该简单地计算两点之间的距离(您做得正确),并将其与木槌和球之间的最小距离进行比较。
例如,
您实际上(有效)正在做:
这要求任何命中都在边缘的 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,
You're actually (effectively) doing:
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.