檢測陣列中兩個精靈的碰撞？ Javascript

Question

我一直在閱讀/搜索一個答案來檢測兩個數組中的精靈的碰撞。我不知道如何將兩個數組傳遞到檢測函數，並讓它檢查每個數組的所有內容。任何投入將不勝感激。

<script type="text/javascript"> 

     var FIRE = 0; 
     var NORTH = 38; 
     var SOUTH = 40; 
     var EAST = 39; 
     var WEST = 37; 
     var destX = 350; 
     var destY = 500; 
     var canvas = null; 
     var context = null; 
     var sprites = null; 
     var player = null; 
     var island = null; 
     var enemies = []; 
     var fires = []; 
     var gameLoopInterval = null; 
     var offScreenFire = null; 
     var isShooting = false; 
     var intersect = null; 

    var Fire = function() { 
      this.spriteX = 278; 
      this.spriteY = 110; 
      this.spriteWidth = 13; 
      this.spriteHeight = 16; 
      this.destX = player.destX + 25; 
      this.destY = player.destY; 
      this.speed = 5; 
     } 

    var Player = function(name) { 
      this.name = name; 
      this.spriteX = 5; 
      this.spriteY = 400; 
      this.spriteWidth = 64; 
      this.spriteHeight = 64; 
      this.destX = 350; 
      this.destY = 500; 
      this.speed = 5; 
      this.level = 1; 
     } 

    var Enemy = function() { 

      this.spriteX = 4; 
      this.spriteY = 4; 
      this.spriteWidth = 32; 
      this.spriteHeight = 32; 
      this.destX = Math.ceil(Math.random() * (800 - this.spriteWidth)); 
      this.destY = this.spriteWidth; 
      this.speed = Math.ceil(Math.random() * 5); 
     } 

    var Island = function() { 

      this.spriteX = 168; 
      this.spriteY = 500; 
      this.spriteWidth = 64; 
      this.spriteHeight = 64; 
      this.destX = Math.ceil(Math.random() * (800 - this.spriteWidth)); 
      this.destY = this.spriteWidth - 64; 
      this.speed = 2; 
     } 

    Fire.prototype.takeTurn = function() { 

     var intersect; 
     var projdestX = this.destX; 
     var projdestY = this.destY; 
     var projspriteWidth = this.spriteWidth; 
     var projspriteHeight = this.spriteHeight; 


     for (enemy in enemies) { 
      intersect = intersect || intersects(enemy.destX, enemy.destY, enemy.spriteWidth, enemy.spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight); 
     } 
      if(intersect == true) { alert("colliding"); } 
     else{drawImage(this);} 
      // if (intersect != true){ 
       // drawImage(this); 
      // } 
      // else { 
       // alert("boom"); 
      // } 

      if(this.destY <= 0){ 
      offScreenFire = fires.indexOf(this); 
      fires.splice(offScreenFire, 1); 
      } 
      else 
      this.destY -= this.speed; 

     } 

    Player.prototype.takeTurn = function() { 
      drawImage(this); 
     } 

    Enemy.prototype.takeTurn = function() { 

      drawImage(this); 


     if (this.destY < canvas.height) 
       this.destY += this.speed; 
     else 
      this.destY = -32; 
     } 

    Island.prototype.takeTurn = function() { 
      drawImage(this); 
      this.destY += this.speed; 
     } 

function fireAction() { 

      var fire = new Fire(); 

       drawImage(fire); 
       fires.push(fire); 

    } 

function drawImage(sprite) { 
      context.drawImage(sprites, sprite.spriteX, sprite.spriteY, sprite.spriteWidth, sprite.spriteHeight, sprite.destX, sprite.destY, sprite.spriteWidth, sprite.spriteHeight); 
    } 

function gameLoop() { 

      context.clearRect(0, 0, canvas.width, canvas.height); 

      island.takeTurn(); 
      player.takeTurn(); 

      //console.log(fires); //debug 

      for (fire in fires) { 
       fires[fire].takeTurn(); 

       } 
      for (enemy in enemies) { 
       enemies[enemy].takeTurn(); 

        } 

     } 


function intersects(x1, y1, w1, h1, x2, y2, w2, h2) { 
     if (w2 !== Infinity && w1 !== Infinity) { 
       w2 += x2; 
       w1 += x1; 
      if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2) 
       return false; 
      } 

     if (y2 !== Infinity && h1 !== Infinity) { 
       h2 += y2; 
       h1 += y1; 
       if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2) 
       return false; 
      } 

     return true; 
} 

window.onload = function() { 
     //alert('here'); 
      canvas = document.getElementById('gameWorld'); 
      context = canvas.getContext("2d"); 
      sprites = new Image(); 

      player = new Player('Brad'); 
      island = new Island(); 


      sprites.onload = function() { 
       drawImage(player); 
       for (i = 0; i < 3; i++) { 
        var enemy = new Enemy(); 
        drawImage(enemy); 
        enemies.push(enemy); 
       } 
      } 

      sprites.src = "Sprites/1945.png"; 

      gameLoopInterval = setInterval('gameLoop()', 100) 
    } 




    window.onkeypress = function(e){ 
      var evt = window.event ? event : e; 
      //alert(evt.keyCode); 
      switch(evt.keyCode) { 
       case NORTH: 

       if (player.destY > 0) 
        player.destY -= player.speed; 
       else 
        player.destY == player.destY; 

        break; 

       case SOUTH: 

       if (player.destY < canvas.height - player.spriteWidth) 
        player.destY += player.speed; 
       else 
        player.destY == player.destY; 

        break; 

       case EAST: 

        if (player.destX < canvas.width - player.spriteWidth) 
         player.destX += player.speed; 
       else 
        player.destX == player.destY; 

        break; 

       case WEST: 

       if (player.destX > 0) 
        player.destX -= player.speed; 
       else 
        player.destX == player.destX; 

        break; 

       case FIRE: 

         fireAction(); 

        break; 
      } 
    } 
</script> 

Answer 1

你的問題似乎是：

for (enemy in enemies) { 
    intersect = intersects(enemy.destX, enemy.destY, enemy.spriteWidth, enemy.spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight); 
} 

intersect總會有最後保存的值。 （這意味着你如果它與最後的敵人相交真的只檢查。）

一個快速的解決辦法是改變內部線路：

intersect = intersect || intersects(enemy.destX, enemy.destY, enemy.spriteWidth, enemy.spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight); 

這將使相交逗留true如果火災沒有按與下一個敵人相交。

編輯：

你的第二個問題是在同爲（）。在JavaScript中，當你做一個for in時，第一個變量沒有對實例的引用，而只是關鍵。

你的決賽應該是這樣的：

for (enemy in enemies) { 
    intersect = intersect || intersects(enemies[enemy].destX, enemies[enemy].destY, enemies[enemy].spriteWidth, enemies[enemy].spriteHeight, projdestX, projdestY, projspriteWidth, projspriteHeight); 
} 

你似乎也沒有任何產卵敵人。在我的代碼（http://jsfiddle.net/path411/umjnQ/）的小提琴添加以下代碼片段到你gameLoop()：

if(enemies.length < 1) { 
    enemies.push(new Enemy()); 
} 

這只是簡單地創建一個新的敵人，如果你不已經有一個。 （你可能會想稍後改變）。