JavaScript中的碰撞檢測

Question

我正在實現HTML / javascript中的自定義空間入侵者。 到目前為止，一切正常，但是沖突檢測似乎是一個問題。 在網上尋找了幾種解決方案之后，這就是我到目前為止所擁有的。

我的敵人在這樣的數組中表示：

function Logo(I){
    I = I || {};
    I.sprite = new Image();
    I.active = true;

    I.width = 25;
    I.height = 25;

    I.explode = function(){
        this.active = false;
    }

    I.draw = function(){
        context.drawImage(I.sprite,this.x,this.y);
    }

    I.setRes = function(name){
        this.sprite.src = name;
    }

    return I;
}

填充如下：

var logoArray = [];
    for(i=0;i<logoData.length;i++){
        logoArray.push(Logo({
            x: logoData[i].x,
            y: logoData[i].y
        }));
        logoArray[i].setRes("./graphics/logo_slices/logo_" + logoData[i].name + ".png");
        console.log(logoArray[i].sprite.src);
    }

沖突是這樣處理的（enemy.explode做this.active = false）：

function handleCollision(){
    playerBullets.forEach(function(bullet) {
       logoArray.forEach(function(enemy) {
          if (isCollide(bullet, enemy)) {
            enemy.explode();
            bullet.active = false;
          }
        });
    });
}

function isCollide(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

問題在於，它使影響點左側的所有內容均處於非活動狀態。 我知道很難描述我的問題，很高興澄清。

繪制函數過濾器僅繪制數組的活動元素：

logoArray.forEach(function(logo_slice){
    logo_slice.draw();
});

謝謝你提供的所有幫助！

Answer 1

關於您的碰撞邏輯，我將采取相反的方法：

以定義不碰撞的4種情況為例，並將它們取反。 在上，在下，在左/右。 這四個都不是必然導致沖突。

就像我猜這就是原因。 您的“引擎”的其余部分看起來很合理，應該可以工作。

collide = 

!(a.x + a.width < b.x ||
  a.x > b.x + b.width ||

  a.y + a.height < b.y||
  a.y > b.y + b.height )

此外，您可以為每個參與碰撞的實體定義半徑，並通過該半徑使用相交。 當然，這時您需要實體的中心。

編輯：有關JS中不同碰撞檢測方法的更多詳細信息和詳細示例，請參閱https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection 。