Question

对于编码练习，我正在制作一个简单的游戏，当点击一把枪时，它会向移动目标射出一点红色子弹。为了有任何类型的游戏，需要比较子弹和目标的变化位置，因此当发生div的重叠（子弹和目标之间的碰撞）时，可以将其添加到条件语句中以便获得点数例如得分。

我能想到的最好方法是在点击枪时使用while循环来连续检查两个div的位置。但是，当我使用console.log运行测试时，子弹的位置始终是相同的，尽管子弹是动画的。我不确定我做错了什么。我在下面的代码中设置了用于测试目的的循环，因此while (i<100)只是暂时的。

JSBIN

JS

$(document).ready(function() {

  $('.allShips').animate({left: 400},5000,"linear");

  $('.gun').click(function() {

    $('.bullet').animate({top: '-10px'}, 1000,"linear", function(){
      $(this).animate({top: '385px'}, 0);
    });

  var i = 0;  
  var allShips = $('.ships');
  var overlap = true;
  var bullet = $('.bullet');
  while (i<100) {
    i++;
    var bulletPos = bullet.position();
  overlap = !(allShips.right < bullet.left || allShips.left > bullet.right || allShips.bottom < bullet.top || allShips.top > bullet.bottom);
    console.log(i+" Top: " + bulletPos.top);
   if (overlap === false) {
      $('.allShips').css('background-color', 'red');
   }
  }    
  }); 
});

Answer 1

您可以使用：

 var myprop = getComputedStyle("idofanmdiv", null);

得到如下属性：

myprop.left;myprop.top

现在你将获得位置，而你的div是有生命的：

 setInterval(function(){
  var myprop = getComputedStyle("idofanmdiv", null);
  elmtop = myprop.top;
  elmleft = myprop.left;
 },25);

如果要检测两个div之间的碰撞，则：使用collision detection与间隔：

function collisions($div1, $div2) {
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;
return true;
  }

喜欢：

setInterval(function(){
 if(collisions($('.allShips'), $('.bullet'))){
   alert('shot Ok :)');
  }
},25);

Working JSBIN

如何在动画制作时找到div的位置

1 个答案: