我的碰撞检测有些麻烦

Question

我正在制作一个非常基本的太空入侵者游戏，但是遇到了一些有关collisionDetection的麻烦。 enemy是我需要击中的，他们在"fiende"内。 "missile"是导弹的div。

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

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

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中进行所有运动。