Question

我正在制作一个非常基础的太空侵略者游戏，但在crashDetection上遇到了一些麻烦。 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中进行所有移动。

我的碰撞遇到麻烦

1 个答案: