Question

我有一个带有相互反弹的盒子的HTML5画布，但它们彼此卡在一起，我不确定为什么。我加了一点反弹，但这让事情变得更糟

P.s Beginner

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）

希望有意义并有所帮助：）