javascript - HTML5キャンバスで2つの長方形がヒットしたかどうかを確認する

Question

HTML5 で初めてのゲームを作成しています。2 つの四角形が互いに衝突しているかどうかを判断する方法を理解する必要があります。これまでのところ、私は本当に方法がわかりません。これが私が試したコードですが、敵がこれのドローポイントに当たったときにのみ機能します。ここまでです：

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();
           } 

このコードは、ゲームをほぼランダムに終了させるようです。どうすれば直せますか、また、大変お待たせして申し訳ありません。

Answer 1

四角形が交差する場合、一方の四角形の角はもう一方の四角形の内側にある必要があります (回転していないと仮定します)。四角形と点を取り、点が四角形の内側にある場合に true を返す関数を作成します。次に、その関数を 8 回 (コーナーごとに 1 回) 呼び出し、結果を で結合します||。

Answer 2

このような関数を書く必要があります

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);
};