畫布碰撞？

Question

測試我的比賽，並在用戶和怪物碰撞我希望告警彈出，但沒有運氣：

function die() { 

    for (var i = 0; i < monster.length; i++) { 
    if (user.destinationX === monster[i].destinationX && user.destinationY === monster[i].destinationY { 
     alert("die"); 
    } 
    } 
} 

Answer 1

不要使用嚴格的比較。由於幀率可能不同。你現在正在檢測像素的碰撞。您應該考慮每個對象的形狀

Answer 2

嘗試這種碰撞檢測方法。它基於兩個對象的重疊來檢測兩個對象之間的碰撞。

function hasCollision(object1, object2) { 
    if (object1.x + object1.width < object2.x) return false; 
    if (object1.x > object2.x + object2.width) return false; 
    if (object1.y + object1.height < object2.y) return false; 
    if (object1.y > object2.y + object2.height) return false; 
    return true; 
} 

function die() { 
    for (var i = 0; i < monster.length; i++) { 
    if (hasCollision(user, monster)) { 
     alert("die"); 
    } 
    } 
} 

該碰撞檢測考慮了兩個對象是否重疊的對象（方形/矩形），並檢查的形狀。它還需要對象的寬度和高度來確定對象邊緣的位置（或者您可以根據當前的內容對其進行修改）。

Answer 3

我將提供一個合併答案和解釋。如果您喜歡解釋，請撥打karaxuna或user2317489。

正如Kolink所說，你的問題在於pacman小故障，或者說，你的怪物不僅僅是像素 - 它們有自己的大小。您目前正在檢查一個對象的來源，並查看它是否與另一個對象完全相同 - 如果有的話，這種情況很少會發生。相反，你需要檢查的是怪物是否至少有一個共同點（換句話說，碰撞檢查）。

這可以通過檢查一個的原點是否在另一個的邊界框內，或者換句話說，如果monster2.x <= monster1.x <= (monster2.x+monster2.width)和monster2.y <= monster1.y <= (monster2.y+monster2.height)來進行。 Arnelle Balane沒有提供解釋的代碼就是這樣做的。

這並不總是一個很好的近似值，因爲它一味地假設你的怪物是一個正方形。要使它成爲一個圓圈，你需要檢查一個怪物的中心是否在另一箇中心的一定距離內（其中距離是公制的，並且使用sqrt(pow(x,2)+pow(y,2))計算，所有這些都是更精細的細節，但是