碰撞檢測關鍵步驟

碰撞檢測需要處理經歷下面兩個關鍵的步驟：

• 計算判斷兩個物體是否發生碰撞
• 發生碰撞後，兩個物體的狀態和動畫效果的處理

計算碰撞

只要兩個物體相互接觸，它們就會發生碰撞。

矩形物體碰撞檢測

假設檢測發生碰撞的物體是 矩形1 和 矩形2 時，我們只需檢測 矩形1 的上下左右四側的和 矩形2 是否存在著距離。我們可以看看下面的圖：

我們可以看到 矩形2 和 矩形1 之間沒有發生碰撞共有四種可能的情況：

• 矩形2的右側 離 矩形1的左側有一段距離
• 矩形2的左側 離 矩形1的右側有一段距離
• 矩形2的底部 離 矩形1的頂部有一段距離
• 矩形2的頂部 離 矩形1的底部有一段距離

當符合上面其中一種情況，則兩個矩形沒有發生碰撞。

因此通過逆向推導我們可以得出：當上面四種情況都不滿足的時候，則代表兩個矩形碰撞了。在代碼中，我們可以這樣寫：

// 判斷四邊是否都沒有空隙
if (!(rect2.x + rect2.width < rect1.x) &&
    !(rect1.x + rect1.width < rect2.x) &&
    !(rect2.y + rect2.height < rect1.y) &&
    !(rect1.y + rect1.height < rect2.y)) {
    // 物體碰撞了
}
 

圓形物體碰撞檢測

假設發生碰撞的物體是 圓形 時，檢測碰撞則變得比較復雜了，前面矩形所使用的碰撞檢測，並不能判斷圓形物體的情況。如下圖的情況：

那麽如何檢測兩圓是否碰撞了呢？這個時候又到了考驗我們數理化的知識了。

檢測兩圓是否相交：當兩個圓心之間的距離是否小於兩個圓的半徑之和。這是已經被證實的數學運算。如下圖所示：

其中 dx 和 dy 分別表示兩個圓之間的橫坐標和縱坐標的差值。 即 dx = x2 - x1; dy = y2 - y1;

然後我們需要通過 勾股定理 計算兩個圓心之間的距離。如下圖：

因此我們碰撞檢測的代碼可以這樣寫：

var dx = circle2.x - circle1.x;
var dy = circle2.y - circle1.y;
var distance = Math.sqrt((dx * dx) * (dy * dy));
if (distance < circle1.radius + circle2.radius) {
  // 兩個圓形碰撞了
}
 

前面講解了怎麽檢測矩形和圓形是否碰撞，基本已經可以適用大部分場景。對於特殊的場景，則需要大家自己去思考如何檢測了。

碰撞後的處理

當檢測到碰撞後，則可以對碰撞的物體進行狀態設置了，可以是相互毀滅，或者是反彈等。這裏大家可以根據場景來決定。

canvas遊戲和動畫中的碰撞檢測