碰撞检测与 css 动画不匹配

Question

我正在制作一个非常基本的太空侵略者游戏，但在碰撞检测方面遇到了一些麻烦。 我需要打的enemy，它们在"fiende"里面."missile"是导弹的div。

我没有尝试太多，因为我对js很陌生，因此我没有足够的知识来改进它。

编辑：经过一些测试，我发现当动画运行时，碰撞检测会中断。

function collisionDetection() {
for (var enemy = 0; enemy < fiende.length; enemy++) {
for (var missile = 0; missile < missiles.length; missile++) {
if (
missiles[missile].left >= fiende[enemy].left &&
missiles[missile].left <= (fiende[enemy].left + 50) &&
missiles[missile].top <= (fiende[enemy].top + 50) &&
missiles[missile].top >= fiende[enemy].top
) {
fiende.splice(enemy, 1);
missiles.splice(missile, 1);
}
}
}
}

.HTML

<div id="background">
<div id="missiles"></div>
<div id="fiende"></div>
</div>

.CSS

div.missile1 {
width: 10px;
height: 28px;
background-image: url('missile1.png');
position: absolute;
}
div.enemy {
width: 50px;
height: 50px;
background-image: url('enemy.png');
position: absolute;
}

有些动画，之后基本是一样的。

@keyframes bevegelse {
0% {
left: -230px;
top: 0%;
}
5% {
left: 250px;
top: 0%;
}
10% {
left: 250px;
top: 40px;
}
15% {
left: -230px;
top: 40px;
}

当导弹击中敌人时，它会摧毁导弹没有击中的其他一些敌人。有时它甚至不会破坏随机的。

Answer 1

你的循环有问题。 您正在逐步将索引单步执行到数组中，但也在进行修改数组，因此可能会得到令人困惑的结果。 这可能是也可能不是其他问题的原因(显然这不是您的全部代码)，但是解决此问题可能会有所帮助。

有多种方法可以解决此问题。 我通常的方法是通过数组向后计数，以便删除元素不会影响循环尚未访问的索引的位置。

function collisionDetection() {
//because this loop is continued once the array is modified, count from the end
for (var enemy = fiende.length-1; enemy >=0 ; enemy--) {
//this loop exits when a clash is found, so count as normal
for (var missile = 0; missile < missiles.length; missile++) {
if (
missiles[missile].left >= fiende[enemy].left &&
missiles[missile].left <= (fiende[enemy].left + 50) &&
missiles[missile].top <= (fiende[enemy].top + 50) &&
missiles[missile].top >= fiende[enemy].top
) {
fiende.splice(enemy, 1);
missiles.splice(missile, 1);
//the enemy has already been hit, exit and dont consider other missiles
break;
}
}
}
}

我在这里假设每个敌人都有一枚导弹。 如果您希望摧毁不止一枚导弹，请移除中断并在内循环中倒数。

---

感谢您提供对您的 git 代码的引用(请参阅下面的评论)。

以上是代码中的错误，但不是通常会导致任何问题的错误。 问题似乎是，当敌人被激活时，子弹不会击中他们。 这里的问题是，您正在检测与 js 代码的敌人位置视图的冲突，但您正在使用 css 动画增强动画。 如果你想检测碰撞，那么你需要完全在JS中动画。

尝试删除 css 动画以验证您可以击中敌人。 然后，如果这有效，您需要在 js 中完成所有移动。