javascript - JavaScript 2D 碰撞检测

Question

我有一个 HTML5 画布，其中的盒子相互弹跳，但它们相互卡住，我不知道为什么。我增加了一点反弹，但这使情况变得更糟

http://passion4web.co.uk/ben/collision1.html

ps初学者

Answer 1

据我所知，您最大的问题是这两行：

//bounce
this.speed.y += 0.5;
this.speed.x += 0.5;

您可以在其中修改框的速度，而不考虑当前的移动方向。

这最终会导致碰撞检测算法的经典问题，其中新点（在修改对象速度后计算）仍在碰撞范围内，导致两个对象只是粘在一起。

解决这个问题的一种方法是基于预计的未来位置而不是当前位置来执行碰撞检测（即将速度矢量与位置矢量相加，然后进行碰撞检测）。

严格来说，这将导致碰撞发生在盒子外面而不是盒子里面，但如果你的采样率足够高，视觉效果应该没问题。

Answer 2

我认为这与您将速度乘以-1有关。因为如果两个碰撞的框在脚本的下一个循环中仍然重叠，它们就会改变方向回到彼此。

我可以想到两个解决方案：

1）如果你想要一个软弹跳，只需使用速度变量的加减法，例如/ speed.x += 0.5;

2) 或者，如果您想要一种刚性的弹跳，请将速度变量设置为某个数量，例如/speed.x = 5；如果您希望它与当前速度匹配，请使用 abs： speed.x = Math.abs(speed.x);

但是，要使这些解决方案中的任何一个起作用，您需要根据对象碰撞的位置（顶部、底部、右侧、左侧）运行稍微不同的脚本，因此如果它在右侧发生碰撞，您可以使用 speed.x = -Math.abs(speed 。X）

希望这有意义并有所帮助:)