javascript - 屏幕上的物体太多时发生碰撞问题

Question

我正在使用以下函数创建子弹(同时玩家保持 ctrl)并将其放入一个名为 bullets 的数组中:

setInterval(function produceBullet() {
if (shoot) {
    bullet = new Bullet(player.x - 3, player.y - 3, 6, 16, 10)
    bullets.push(bullet);
}
}, 200);

下一个函数是关于 boss 和子弹之间的碰撞。在那种情况下，每颗子弹都会从老板身上夺走 1 条生命(游戏顶部的数字):

function collisions() {
for (i = 0; i < bullets.length; i++) {
    if (bullet.x > bossOne.x && bullet.x < bossOne.x + bossOne.sizeX &&
        bullet.y < bossOne.y + bossOne.sizeY && bullet.y > bossOne.y) {
        bullets.splice(i, 1);
        bossLife -= 1;
        bossLifeCounter.innerHTML = bossLife;
        if (bossLife <= 0) {
            bossLifeCounter.innerHTML = "winner!";
            bossOne.x = -10000;
        }
    }
}  
}

我还使用显示功能:

function draw() {
for (i = 0; i < bullets.length; i++) {
    bullets[i].show();
    bullets[i].move();
    if (bullet.y < 0) {
        bullets.splice(i, 1);
    }
}

collisions();

requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

当屏幕上只有 1 颗子弹时，一切都很好，玩家按住 ctrl 键射击 boss，而他在不释放 ctrl 键的情况下失去了生命。

问题是当玩家离 boss 很远时，屏幕上有很多子弹，只有在松开 ctrl 键时碰撞才有效。

远程服务器上的完整代码，您可以在其中检查问题:https://stacho163.000webhostapp.com/

如果有人有时间研究代码(它很短，我认为很清楚)并且知道它有什么问题，我将不胜感激。谢谢

Answer 1

看看 intersection observer api，它会给你带来比滚动你自己的碰撞检测更好的性能。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API