如何在html5画布中检测一个形状是否击中另一个?

时间:2012-06-10 17:08:59

标签: javascript html5 canvas collision-detection

我正在尝试使用javascript在html5画布中构建一个摩托车游戏。 现在我有一个轮子和一个简单的重力,它增加了从画布顶部的位置,直到轮子撞到画布的底部。当我开始游戏时,轮子就会掉到画布的底部。

我想为车轮制造一个弯曲的地面。问题是我不知道如何计算车轮是否撞到了这个地面。

这是一个例子。我希望车轮下降直到撞到弯曲的地面,如果我正在移动车轮,它需要遵循形状的边缘。

image http://i.minus.com/iFvy1dbnouvy6.png

我不想使用任何库或引擎,只有javascript和html5。你有什么想法或解决方案吗?

3 个答案:

答案 0 :(得分:1)

与其他答案类似,您可以简单地使用if语句

if tire.y < line(tire.x) then tire.y = line(tire.x) - 1

线函数可以只是一个数组或某个公式,当给定任何x值时,它将包含该行的y值。

答案 1 :(得分:0)

为了检测车轮何时撞到地面,您应该具有地面边界的坐标(例如:折线)和车轮的光线和中心位置。

通过检查您的滚轮y坐标(cener + ray)是否低于某些 x(s)的折线的y坐标来检测碰撞。您应该通过仔细选择端点以合理的方式对折线进行分段。

可能还有其他方法可以完成这项任务,但这是我第一次出来。

答案 2 :(得分:0)

以下是您正在寻找碰撞检测(弹性)的solution .------------------------------------------------- -------------------------------------------。
这是一个简单的&amp;好tutorial用于学习物理,特别是对于游戏开发者