collisionDetection 与 css 动画不匹配

Question

我正在制作一款非常基础的 space 入侵者游戏，但在碰撞检测方面遇到了一些问题。 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;
            }
        }
    }
}

我在这里假设每个敌人发射一枚导弹。如果你想摧毁一枚以上的导弹，那么去掉 break 并在内循环中倒数。

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

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

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

collisionDetection 与 css 动画不匹配

collisionDetection doesn't match css animation

javascript

collision-detection