Javascript-圆圆碰撞问题

Question

我正在用HTML5 Canvas制作游戏，这是我的代码，用于解决两个运动的圆之间的碰撞：

function resCCCol(a, b) {
    var dx = a.x - b.x;
    var dy = a.y - b.y;

    var dist = dx * dx + dy * dy;

    var vx = b.vx - a.vx;
    var vy = b.vy - a.vy;

    var dot = dx * vx + dy * vy;

    if (dot > 0) {
        var scale = dot / dist;

        var cx = dx * scale;
        var cy = dy * scale;

        var mass = a.r + b.r;

        var cw1 = 2 * b.r / mass;
        var cw2 = 2 * a.r / mass;

        a.vx += cw1 * cx
        a.vy += cw1 * cy
        b.vx -= cw2 * cx
        b.vy -= cw2 * cy
    }
}

如果我设置坐标以使圆重叠，但它们的速度都仍为0，则圆不会互相推出，这就是问题所在。 我该如何解决？

编辑：小提琴： http : //jsfiddle.net/yP7xf/2/ ，单击“小故障！” 看到小故障，就像您看到的那样，它们不会分开。

Answer 1

我不确定dot的用途是什么（也许我在这里缺少一些数学知识），但是如果dist < sum(radii)则会发生两个圆的碰撞。 如果发生这种情况，您应该使圆偏斜，但是要确保圆至少有一些小的速度以确保圆分开。

Answer 2

当两个圆没有速度重叠时，您的resCCCol()方法将无效，因为dot为0 。 即使将if语句更改为在dot >= 0上执行，您仍然保持0速度。

if (dot > 0) { //dot === 0
    var scale = dot / dist; //scale === 0

    var cx = dx * scale; //cx === 0
    var cy = dy * scale; //cy === 0

    var mass = a.r + b.r;

    var cw1 = 2 * b.r / mass;
    var cw2 = 2 * a.r / mass;

    a.vx += cw1 * cx // 0
    a.vy += cw1 * cy // 0
    b.vx -= cw2 * cx // 0
    b.vy -= cw2 * cy // 0
}

您应该处理dot === 0 。 最简单的方法是在速度为0时简单地给它们设置速度：

if (dot > 0) { 
    ... 
} else {
    a.vx = 1;
    a.vy = 1;
    b.vx = -1;
    b.vy = -1;
}

当然，这只会将它们彼此推向屏幕的相对角，但是您可以轻松实现更好地遵守物理定律的东西（忽略两个物体不能占据同一空间的事实） 。

Answer 3

目前尚不清楚解决此问题的最佳方法是什么，我认为最好首先确保您不会遇到这种情况（通过确保它们永远不会以零速度重叠） ），但一种快速而肮脏的解决方法是检查dot === 0 ，如果是，请给它们一些速度。 例如：

if (dot === 0) {
    // numbers pulled completely out of thin air...
    a.vx = 0.5;
    a.vy = 0.5;
    b.vx = -0.5;
    b.vy = -0.5;
}

http://jsfiddle.net/yP7xf/5/

现在，您应该给它们多大的速度？ 那是您需要解决的问题。 可能是您希望它们分开，以便您可以根据从一个中心到另一个中心的一条线计算一些矢量，然后以您认为的任何速度沿一个矢量向一个方向发送，向另一个发送另一个方向适当。 但是，如果它们正好位于彼此的顶部（中心在同一点），那么您也需要考虑这种情况。