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

Posted 2023-05-08

【中文标题】如何在动画时找到 div 的位置

【英文标题】：How to find the position of a div while it is animating

【发布时间】：2014-04-11 23:44:20

【问题描述】：

对于编码练习，我正在制作一个简单的游戏，当点击枪时，它会向移动的目标射出一颗红色的小子弹。为了有任何类型的游戏，需要比较子弹和目标的变化位置，所以当发生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');
   
      
  ); 
);

【问题讨论】：

我不认为$.animate() 在这种情况下是正确的工具。我认为您需要使用requestAnimationFrame() 或setInterval() 自己制作动画。它会让你对游戏有更大的控制权。

我同意你可能想要一个主动画循环。在每次迭代中，您计算​​每个对象的下一个位置并执行碰撞检测。但是，查看animate 的阶跃函数可能仍然有用：api.jquery.com/animate/#step。

【参考方案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