Javascript 碰撞检测仅影响最后渲染的对象

我做了一个简单的2D游戏。单击“开始”按钮，然后单击枪向移动目标开火，移动目标以随机间隔以随机等级、速度和高度生成。出于调试目的，我禁用了大部分随机性。增加了碰撞检测功能，因此与子弹相撞的船只会变为红色，玩家会得到一分，子弹就会被移除。除了一个问题外，所有这些都在工作：只有最后渲染的船舶被检测为碰撞。任何帮助都将不胜感激。我读过，但我不确定这是否适用于我的情况

（使用Dropbox托管：除非您允许Dropbox中的脚本在Chrome或Firefox中运行，否则演示将无法运行，请单击小盾图标）

JS

$(document).ready(function() {

  var score = 0;

  function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

 // New Ship Creation // 

  function newShip (){
    var ship = 1; // var ship = Math.floor((Math.random()*3)+1);
    var shipPosition = Math.floor((Math.random()*150)+1);
    var speed = 0;
    var speedRandom = Math.floor((Math.random()*999)+1);
    if (ship == 1){
      ship = "slowShip";
      speed = 4001+speedRandom;
      } else if (ship == 2) {
      ship = "mediumShip";
      speed = 3001+speedRandom;
      } else if (ship == 3) {
      ship = "fastShip";
      speed = 2500+(speedRandom/2);
      }
    var div = "<div class='allShips " + ship + "'></div>";
    var shipClass = "."+ship;
    $('#gameFrame').prepend(div);
    $(shipClass).animate({left: 400}, speed, "linear", function(){
      $(this).remove();
    });  
    $('.allShips').first().css("top", shipPosition);
  }


  // Game Start //

  $("button.start").click(function(){
    var randomTime = getRandomInt(2000,2000); // (500,4500);

    setInterval(function() {
      newShip(); }, randomTime);

      // Gun Control //

      $('.gun').click(function() {
          $('.gun').after("<div class='bullet'></div>");
          $(".bullet").animate({top: '-10px'}, 1000,"linear", function(){
            $(this).remove();
          });
      });

      // Collision Detection //

      function collisions($div1, $div2) {
        var shipCount = $div1.length;
        var bulletCount = $div2.length;
        // console.log(shipCount);
        if (shipCount > 0 && bulletCount > 0) {
          var x1 = $div1.offset().left;
          var y1 = $div1.offset().top;
          var h1 = $div1.outerHeight(true);
          var w1 = $div1.outerWidth(true);
          var b1 = y1 + h1;
          var r1 = x1 + w1;
          var x2 = $div2.offset().left;
          var y2 = $div2.offset().top;
          var h2 = $div2.outerHeight(true);
          var w2 = $div2.outerWidth(true);
          var b2 = y2 + h2;
          var r2 = x2 + w2;

          if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
            return false;
          } else {
          return true;
          }
        };  
      }

      // Collision Consequences //

      setInterval(function(){
        $('.allShips').each(function(){
          if(collisions($('.allShips'), $('.bullet'))){ 
            $(this).css("background-color", "red");
            score += 1;
            $('#score').text(score);
            $('.bullet').remove();  
          }  
        }); 
      }, 10);
  });   
});

$（文档）.ready（函数（）{
var得分=0；
函数getRandomInt（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
//新船舶创建//
函数newShip（）{
var ship=1；//var ship=Math.floor（（Math.random（）*3）+1）；
var shipPosition=Math.floor（（Math.random（）*150）+1）；
var速度=0；
var speedRandom=Math.floor（（Math.random（）*999）+1）；
如果（船舶==1）{
ship=“slowShip”；
速度=4001+speedRandom；
}否则，如果（船舶==2）{
ship=“mediumShip”；
速度=3001+speedRandom；
}否则，如果（船舶==3）{
ship=“fastShip”；
速度=2500+（速度随机/2）；
}
var div=“”；
var shipClass=“.”+船舶；
$（“#游戏框架”）。前置（div）；
$（shipClass）.animate（{left:400}，速度，“线性”，函数（）{
$（this.remove（）；
});  
$（'.allShips'）.first（）.css（“top”，shipPosition）；
}
//比赛开始//
$（“button.start”）。单击（函数（）{
var randomTime=getRandomInt（20002000）；/（5004500）；
setInterval（函数（）{
newShip（）；}，随机时间）；
//枪支管制//
$（'.gun'）。单击（函数（）{
$（“.gun”）。在（“”）之后；
$（“.bullet”）.animate（{top:'-10px'}，1000，“线性”，函数（）{
$（this.remove（）；
});
});
//碰撞检测//
函数冲突（$div1，$div2）{
var shipCount=$div1.length；
变量bulletCount=$div2.length；
//控制台日志（发货计数）；
如果（发货数量>0&&bulletCount>0）{
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$div2.offset（）.left；
变量y2=$div2.offset（）.top；
var h2=$div2.outerHeight（真）；
var w2=$div2.外径（真）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | | r1r2）{
返回false；
}否则{
返回true；
}
};  
}
//碰撞后果//
setInterval（函数（）{
$（'.allShips'）。每个（函数（）{
如果（碰撞（$（'.allShips'），$（'.bullet'））{
$（this.css（“背景色”、“红色”）；
分数+=1；
$（“#分数”）。文本（分数）；
$（'.bullet'）.remove（）；
}  
}); 
}, 10);
});   
});

尝试以下碰撞功能：

function collisions($div1, $div2) {
    var shipCount = $div1.length;
    var bulletCount = $div2.length;
    // console.log(shipCount);
    if (shipCount > 0 && bulletCount > 0) {
      $div2.each(function(){
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        var x2 = $(this).offset().left;
        var y2 = $(this).offset().top;
        var h2 = $(this).outerHeight(true);
        var w2 = $(this).outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
          return false;
        } else {
        return true;
        }
     });
    };  
  }

函数冲突（$div1，$div2）{
var shipCount=$div1.length；
变量bulletCount=$div2.length；
//控制台日志（发货计数）；
如果（发货数量>0&&bulletCount>0）{
$div2.每个（函数（）{
var x1=$div1.offset（）.left；
变量y1=$div1.offset（）.top；
var h1=$div1.outerHeight（true）；
var w1=$div1.外径（真）；
var b1=y1+h1；
var r1=x1+w1；
var x2=$（this）.offset（）.left；
var y2=$（this）.offset（）.top；
var h2=$（this）.outerHeight（true）；
var w2=$（this）.outerWidth（true）；
var b2=y2+h2；
var r2=x2+w2；
如果（b1b2 | | r1r2）{
返回false；
}否则{
返回true；
}
});
};  
}

至少尝试一下：

if（冲突（$（此），$（'.bullet'））{…

同意Wolff的说法，你正在发送。循环中每次发送的所有飞船都应该是单独的飞船。我们将检查它，但无法让演示做任何事情。我们只是能够在IE中测试它。它实际上是被检测到的最后一颗子弹，而不是最后一艘飞船。尝试一次发射一颗子弹，你会看到这一点你可以击中多艘船。有人能解释一下为什么沃尔夫用

$替换
$（.allShips）
（这个）

解决了我的问题？我本应该抓住这个错误，但我没想到它会解决这个问题。好吧，您发送了一个包含所有船只的jquery对象，并从该对象访问属性，该对象只会引用集合中的第一个对象。$（此）在您的循环中，会引用jquery集合中该迭代中的单个ship。我尝试了这个方法，但它不起作用。但是，我愚蠢地更新了链接中的代码以解决问题。因此，这可能就是问题所在。这就是为什么您没有看到“last element”问题。现在还原代码以便链接有意义。