Question

我做了一个简单的2D游戏。单击“开始”按钮，然后单击枪以向随机类别，速度和高度随机生成的移动目标触发。出于调试目的，我已禁用大部分随机性。已经添加了碰撞检测，以便与子弹碰撞的船变红，玩家得分并且子弹被移除。除了一个问题外，这一切都正常工作：只有最后一艘船被检测为碰撞。任何帮助，将不胜感激。我读过this，我不确定它是否适用于我的情况。

https://dl.dropboxusercontent.com/u/1656361/test_game_v1-0/index.html （托管Dropbox：demo除非你允许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);
  });   
});

Answer 1

尝试使用碰撞功能：

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

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

1 个答案: