使用 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>

使用 JavaScript 跟踪元素位置

Track element position with JavaScript

javascript

tracking

position

element

collision