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