javascript - 使用 JavaScript 跟踪元素位置

Question

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

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

问题在于，第二个函数仅在子弹发射时才会获取其位置，因此只有当玩家触摸敌人时敌人才会被摧毁，这并不理想。

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

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

非常感谢!

Answer 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>