使用 JavaScript 跟踪元素位置答案

【问题标题】：Track element position with JavaScript使用 JavaScript 跟踪元素位置
【发布时间】：2020-07-15 18:06:21
【问题描述】：

我正在制作一个简单的射击游戏，我的想法是跟踪子弹和敌人并检查它们是否最终发生碰撞。我正在使用以下代码进行子弹移动：

function animateBullet(bullet) {
  let height = document.body.style.height;
   
  let distanceToTop = bullet.offsetTop - document.body.style.height;

  bullet.animate(
    [
      // keyframes
      { transform: `translateY(0px)` },
      { transform: `translateY(${-distanceToTop}px)` },
    ],
    {
      // timing options
      duration: 500,
      iterations: 1,
    }
  );
}

为了检查子弹和敌人的位置，我使用了这段代码（还没有清理）：

function killEnemy(bullet) {
  let enemy = document.querySelectorAll(".enemy-player");

  let bulletLeft = bullet.offsetLeft;
  let bulletRight = bullet.offsetLeft + 5;
  let bulletTop = bullet.offsetTop;

  console.log("bullet left: " + bulletLeft);
  console.log("bullet right: " + bulletRight);
  console.log("bullet top: " + bulletTop);

  for (let i = 0; i < enemy.length; i++) {
    let enemyLeft = enemy[i].offsetLeft;
    let enemyRight = enemy[i].offsetLeft + 15;
    let enemyBottom = enemy[i].offsetTop + 15;

    console.log("enemy left: " + enemyLeft);
    console.log("enemy right: " + enemyRight);
    console.log("enemy bottom: " + enemyBottom);

    // not working!!!
    if (enemyBottom === bulletTop) {
      enemy[i].remove();
    }
  }
}

问题是第二个函数只有在子弹发射的那一刻才会得到他们的位置，所以敌人只有在玩家接触到它时才会被摧毁，这并不理想。

问题：如何从子弹发射的那一刻起一直跟踪他们的位置？

天才们的额外问题：我编写第一个函数的方式是，玩家在屏幕上的位置越高，子弹越慢。无论玩家在发射时所处的位置，如何让子弹以相同的速度行进？

非常感谢！

【问题讨论】：

标签： javascript position element collision tracking

【解决方案1】：

您必须反复调用 getBoundingClientRect 才能获取元素的当前位置：

const red = document.getElementById("red");
const blue = document.getElementById("blue");

const interval = setInterval(()=> {
  if(red.getBoundingClientRect().right >= blue.getBoundingClientRect().left){
    console.log("Collision!");
    red.style.animationPlayState = "paused";
    blue.style.animationPlayState = "paused";
    clearInterval(interval);
  }
},0);

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box; 
  margin: 0;
}


#red, #blue {
  width: 100px;
  height: 100px; 
  border-radius: 100px;
}


#red {
  background-color: red; 
  animation-name: right;
  animation-duration: 4s;
  animation-timing-function: linear; 
}

#blue{
  background-color: blue;
  animation-name: left;
  animation-duration: 2s;
  animation-timing-function: linear; 
}

@keyframes left {
  from {transform: translateX(0)}
  to {transform: translateX(calc(-100vw + 100px))}
}

@keyframes right {
  from {transform: translateX(0)}
  to {transform: translateX(calc(100vw - 100px))}
}

<div id="red"></div>
<div id="blue"></div>

【讨论】：