查看 HTML5 画布中是否有两个矩形

Question

我正在用 HTML5 制作我的第一个游戏，我需要弄清楚如何判断两个矩形是否相互碰撞。到目前为止，我真的不确定如何。这是我尝试过的代码，但它仅在敌人击中 this 的绘制点时才有效。到此为止：

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 次（每个角一次）并将结果与​​|| 结合起来。

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