如何检测一个形状是否在 html5 画布中碰到另一个形状？答案

【问题标题】：How to detect if a shape hits another in html5 canvas?如何检测一个形状是否在 html5 画布中碰到另一个形状？
【发布时间】：2012-06-10 17:08:59
【问题描述】：

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

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

这是一个插图。我希望轮子下降，直到它碰到弯曲的地面，如果我移动轮子，它需要跟随形状的边缘。

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

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

【问题讨论】：

标签： javascript html canvas collision-detection

【解决方案1】：

与另一个答案类似，您可以简单地使用 if 语句来说明

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

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

【讨论】：

【解决方案2】：

为了检测车轮何时撞击地面，您应该知道地面边界的坐标（例如：折线）以及车轮的射线和中心位置。

您可以通过检查您的车轮 y 坐标（中心 + 射线）是否低于折线在某些 x(s) 处的 y 坐标来检测碰撞。您应该仔细选择端点，以合理的方式分割多段线。

可能还有其他方法可以完成此任务，但这是我出来的第一个。

【讨论】：

【解决方案3】：

这是您正在寻找碰撞检测（弹性）的solution..
.------------------------------------------------ -------------------------------------------------------。
这是一个简单而好的tutorial 用于学习物理，尤其是对于游戏开发者

【讨论】：