看看兩個矩形是否已經在HTML5畫布中擊中

我正在製作我的第一款HTML5遊戲，並且我需要弄清楚如何判斷兩個矩形是否互相碰撞。到目前爲止，我真的不知道如何。這是我嘗試過的代碼，但只有當敵人擊中這個畫點時纔有效。這是迄今爲止：看看兩個矩形是否已經在HTML5畫布中擊中

if(this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].height) {

我很困惑如何做到這一點。任何人都可以幫我嗎？

編輯：我想這個代碼：

if (!(this.drawX + this.width < enemies[i].drawX || 
     enemies[i].drawX + enemies[i].width < this.drawX || 
     this.drawY + this.height < enemies[i].drawY || 
     enemies[i].drawY + enemies[i].height < this.drawY)) { 
        gameOver(); 
      }

的代碼似乎使該遊戲結束幾乎隨機。我該如何解決這個問題呢，對於等待這麼久抱歉。

來源

2012-07-08 Jack Davis

類似的問題：http://stackoverflow.com/questions/5098002/javascript-canvas-collision-side-detection – Kerstomaat 2012-07-08 16:19:54

如果矩形相交，則一個矩形的拐角必須位於另一個矩形內（假設它們未旋轉）。編寫一個採用矩形和點的函數，如果該點位於矩形內，則返回true。然後調用該函數8次（每個角落一次）並將結果與||結合。

來源

2012-07-08 16:22:02

你需要寫這樣的功能

function (rectA, rectB) { 
    return !(rectA.x + rectA.width < rectB.x || 
      rectB.x + rectB.width < rectA.x || 
      rectA.y + rectA.height < rectB.y || 
      rectB.y + rectB.height < rectA.y); 
};

來源

2012-07-08 16:56:54 ArsalanDotMe

這是否是正確的公式？ – 2012-07-08 18:16:51

是的，這應該工作。它基本上檢查矩形不相交的所有可能性。如果所有不相交的屬性都是false，則函數返回true。使用它並查看它的功能。您可能還想在紙上繪製圖表並手動測試這些條件 – ArsalanDotMe 2012-07-08 18:21:18

查看編輯。 – 2012-07-28 07:08:53

看看兩個矩形是否已經在HTML5畫布中擊中

回答

相關問題