Space-Shooter游戏问题：UFO被击毁后其发射的子弹停止移动

我正在学习JavaScript，开发一款Space-Shooter太空射击游戏，目前完成了第2关。第2关中的UFO逻辑如下：

• UFO随机发射子弹，子弹击中玩家飞船会让玩家损失一条生命
• 玩家击毁UFO后，UFO会变为可收集的金币

当前遇到的问题：当UFO发射的子弹正在下落时，若UFO被玩家击毁，子弹会停止移动。我猜测问题出在updateUFO()函数中，尝试过不删除被击毁的UFO对象但无效。

相关代码片段：

// Move the UFO Bullet with the UFO until it's fired
if (!ufo.ufoBullet.isFired) {
  ufo.ufoBullet.x = ufo.x;
  ufo.ufoBullet.y = ufo.y;
  ufo.ufoBullet.element.style.transform = `translate(${ufo.ufoBullet.x}px, ${ufo.ufoBullet.y}px)`;
} else {
  // Move the UFO Bullet straight down when it's fired
  ufo.ufoBullet.y += ufo.ufoBullet.dy;
  ufo.ufoBullet.element.style.transform= `translate(${ufo.ufoBullet.x}px, ${ufo.ufoBullet.y}px)`;
}

问题原因 #

核心问题在于子弹的更新逻辑完全绑定在UFO对象的更新流程中。当UFO被击毁后，大概率会从UFO列表中被移除，updateUFO()函数不再遍历处理这个UFO，导致其内部的子弹更新代码停止执行，已经发射的子弹自然就停住了。

解决方案 #

1. 分离子弹管理逻辑 #

单独维护一个全局的activeBullets数组，所有已发射的子弹（包括玩家和UFO的）都存入这个数组，在独立的updateBullets()函数中统一处理位置更新、碰撞检测和清理。

2. 发射子弹时解除与UFO的绑定 #

当UFO触发发射动作后，将子弹对象从UFO的属性中转移到全局子弹数组，后续由独立的更新函数接管，不再依赖UFO的存在。

3. 清理过期子弹 #

在子弹更新函数中，检查子弹是否超出屏幕范围或击中目标，及时销毁DOM元素并从数组中移除，避免内存泄漏。

示例修改思路：

// 全局维护活跃子弹数组
const activeBullets = [];

// UFO发射子弹的逻辑
function fireUfoBullet(ufo) {
  ufo.ufoBullet.isFired = true;
  // 将子弹加入全局数组
  activeBullets.push(ufo.ufoBullet);
  // 解除UFO与子弹的绑定，避免后续误处理
  delete ufo.ufoBullet;
}

// 独立的子弹更新函数
function updateBullets() {
  // 倒序遍历，避免删除元素时索引混乱
  for (let i = activeBullets.length - 1; i >= 0; i--) {
    const bullet = activeBullets[i];
    // 更新子弹位置
    bullet.y += bullet.dy;
    bullet.element.style.transform = `translate(${bullet.x}px, ${bullet.y}px)`;
    
    // 检查子弹是否需要销毁
    if (bullet.y > window.innerHeight || checkBulletCollision(bullet)) {
      bullet.element.remove();
      activeBullets.splice(i, 1);
    }
  }
}

// 游戏主循环中调用独立的子弹更新
function gameLoop() {
  updateUFOs();
  updateBullets();
  // 其他游戏逻辑更新...
  requestAnimationFrame(gameLoop);
}

内容的提问来源于stack exchange，提问作者Kaja S.