圆形碰撞检测HTML5画布

max*_*hud 4 html javascript jquery html5 canvas

我想检查圆圈是否相互碰撞.

我知道我可以通过在圆圈的两个中心之间获得距离并从该距离减去每个圆的半径并查看"距离"是否> 1来做到这一点.

我怎么能有效地做到这一点,比如1000圈?也许我可以以某种方式得到最近的20个圆圈或类似的东西并检查这些?我不知道如何开始有效地开展这项工作.

有任何想法吗?

这是一个例子:

http://experiments.lionel.me/blocs/

Mar*_*c B 6

在开始计算距离的精确差异之前,您至少可以比较中心的x/y位置与半径.该信息在圆圈中隐含可用,只需要一些简单的比较和加法/减法.

这样你就可以比较所有圆圈对之间x/y的简单距离,并抛弃任何明显不是碰撞候选者的距离,例如

abs(x2 - x1) > (r2 + r1)
abs(y2 - y1) > (r2 + r1)
Run Code Online (Sandbox Code Playgroud)

...如果圆心之间的X或Y距离大于半径之和,则它们不会发生碰撞.

一旦你削减了可能的碰撞器,那么你就做了正式的精确笛卡尔距离,这就是"重"乘法/除法物的来源.