Question

因此，我试图仅使用HTML，JS和CSS制作一款侵略太空的游戏。我现在遇到的问题是JS中的collisionDetection函数。我给敌人设置了动画，使其向右->下->左->右等。但是，代码仍然认为它们处于凝视位置。因此，损坏的hitbox就会出现。如果我关闭CSS动画，collisionDetection效果很好。

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

function collisionDetection() {
for (var enemy = fiende.length - 1; enemy >= 0; 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);
            break;
        }
    }
}

有点难以解释，所以我将给我我的Github游戏：https://belminh.github.io/Projekt_2/html/space_invaders.html，这是访问我所有文件的链接：https://github.com/BelminH/belminh.github.io/tree/master/Projekt_2

Answer 1

我已经查看了您的代码，发现此代码是您问题的答案：

document.getElementById（'fiende'）。style.animation ='bevegelse 32s forwards'

此代码使用CSS动画，您无法找到魔鬼的真实位置。

Answer 2

我认为问题也来自css动画，它移动了div敌人，但没有更改js中的值。另外，您可能必须在moveFiende（）函数中添加横向运动。

Answer 3

您刚刚制作了动画，但没有移动敌人。

<div class="enemy" style="left:450px; top:75px"></div>

您的"enemy" div的值没有变化，因此命中框保持在同一位置。

无法检测“太空侵略者”游戏中的位置（基本代码/入门）

3 个答案: