javascript - 圆圈应该互相碰撞，但不起作用

Question

我有一个大圆圈和大约 30 个小气泡，这些小气泡位于大圆圈内。小气泡无法走出大圆圈，当其中一个小气泡遇到另一个小气泡时，它们会向相反的方向偏转。

这是两个小圆偏转的代码:

var xVelocityBubble1 = Math.random();
var yVelocityBubble1 = Math.random();

var xVelocityBubble2 = Math.random();
var yVelocityBubble2 = Math.random();

moveBubbles = function() {
xbubble1 += xVelocityBubble1;
ybubble1 += yVelocityBubble1;

xbubble2 -= xVelocityBubble2;
xbubble2 -= yVelocityBubble2;

if (Math.sqrt(Math.pow(xbubble1 - xbubble2, 2) + Math.pow(ybubble1 - ybubble2, 2)) < radius * 2) {
xVelocityBubble1 *= -1;
yVelocityBubble1 *= -1;
xVelocityBubble2 *= -1;
yVelocityBubble2 *= -1;
}
}

现在，问题来了。正如你在这张照片上看到的，有时我的气泡会碰撞，我不知道为什么。一切都运转良好，直到一个圆圈崩溃，然后突然越来越多的泡沫陷入 war 。看看圆 375、240,330 和 410。首先我认为这可能与不同的速度有关，但这不是问题所在。有人有什么想法吗？

Answer 1

您的代码假设圆发生碰撞，因为它们直接朝彼此移动，因此碰撞的 react 将是两个圆朝完全相反的方向移动。

对于几乎朝同一方向移动的圈子来说，这种 react 会很奇怪。您应该计算圆圈相交的 Angular ，并据此计算它们交换的动量以及这对每个圆圈的影响。

这可能是因为不稳定的 react 加上圆圈在一轮计算中进行多次碰撞，导致它们相互移动。当圆发生任何碰撞时都会转 180 度，这意味着如果它碰撞两次(或任何偶数)，它就会继续前进，就好像什么都没发生一样。