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

衝突this.activeを行う（enemy.explodeこのように処理されています= 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; 
} 

問題は、インパクトpoiの左側にあるすべてのインアクティブnt。 私は問題を説明することが非常に難しいので、明確にすることができます。あなたが与えることができる任意の助け

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

ありがとう：配列の唯一の能動素子を描画する

描画機能フィルター！

Answer 1

あなたの衝突ロジックについては、私は逆のアプローチを取る：

はそれらを衝突して否定していない定義4例を取ります。左下には があり、下には、あります。これら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を参照してください。