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

Collision detection is only affecting the last rendered object

本文关键字:对象 最后 影响 碰撞检测      更新时间:2023-09-26

我制作了一款简单的2D游戏。点击开始按钮,然后点击枪射击移动目标,这些目标是随机生成的,具有随机的类别,速度和高度。出于调试目的,我禁用了大多数随机性。我们添加了碰撞检测功能,这样与子弹相撞的飞船就会变成红色,玩家得一分,子弹就会被移除。这一切都在工作,除了一个问题:只有最后一艘船被检测为碰撞。任何帮助都会很感激。我读了这篇文章,但我不确定它是否适用于我的情况。

https://dl.dropboxusercontent.com/u/1656361/test_game_v1-0/index.html(与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);
  });   
});

试试碰撞函数:

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