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/

現在，您應該給它們多大的速度？ 那是您需要解決的問題。 可能是您希望它們分開，以便您可以根據從一個中心到另一個中心的一條線計算一些矢量，然后以您認為的任何速度沿一個矢量向一個方向發送，向另一個發送另一個方向適當。 但是，如果它們正好位於彼此的頂部（中心在同一點），那么您也需要考慮這種情況。