如何在Kaboom.js中实现小行星持续生成？代码问题求助

你的代码仅在初始化阶段生成了NUM_ASTERIODS个小行星，没有处理小行星被销毁后的补充逻辑，所以当小行星被射击消失后，不会自动生成新的来维持数量。以下是两种实现持续生成的方案：

方案一：销毁时自动补充 #

把生成单个小行星的逻辑封装成独立函数，给每个小行星绑定销毁事件，当它被销毁时自动生成新的小行星。

修改后的代码：

const NUM_ASTERIODS = 3;

// 封装生成单个小行星的函数
function spawnAsteroid() {
  let spawnPoint = asteroidSpawnPoint();
  const a = add([
      sprite("asteroid"),
      pos(spawnPoint),
      rotate(rand(1, 90)),
      origin("center"),
      area(),
      scale(0.2),      
      solid(),
      "asteroid",
      "mobile",
      "wraps",
      {
          speed: rand(5, 10),
          initializing: true
      }
  ]);

  // 处理初始碰撞问题
  while (a.isColliding("mobile")) {
    spawnPoint = asteroidSpawnPoint();
    a.pos = spawnPoint;
    a.pushOutAll();
  }

  a.initializing = false;
  a.pushOutAll();

  // 当前小行星被销毁时，生成新的小行星
  a.onDestroy(() => {
    spawnAsteroid();
  });
}

// 初始化生成指定数量的小行星
for (let i = 0; i < NUM_ASTERIODS; i++) {
  spawnAsteroid();
}

function asteroidSpawnPoint() {
   // 随机在场景边缘生成
   return choose([
       rand(vec2(0), vec2(width(), 0)),
       rand(vec2(0), vec2(0, height())),
       rand(vec2(0, height()), vec2(width(), height())),
       rand(vec2(width(), 0), vec2(width(), height()))
   ]);
}

方案二：定时检查数量补充 #

如果希望严格维持屏幕上始终有NUM_ASTERIODS个小行星（比如避免同时销毁多个时出现短暂数量不足），可以用update函数每帧检查当前小行星的数量，当数量少于设定值时补充生成。

修改后的代码：

const NUM_ASTERIODS = 3;

// 封装生成单个小行星的函数
function spawnAsteroid() {
  let spawnPoint = asteroidSpawnPoint();
  const a = add([
      sprite("asteroid"),
      pos(spawnPoint),
      rotate(rand(1, 90)),
      origin("center"),
      area(),
      scale(0.2),      
      solid(),
      "asteroid",
      "mobile",
      "wraps",
      {
          speed: rand(5, 10),
          initializing: true
      }
  ]);

  while (a.isColliding("mobile")) {
    spawnPoint = asteroidSpawnPoint();
    a.pos = spawnPoint;
    a.pushOutAll();
  }

  a.initializing = false;
  a.pushOutAll();
}

// 初始化生成指定数量的小行星
for (let i = 0; i < NUM_ASTERIODS; i++) {
  spawnAsteroid();
}

// 每帧检查小行星数量，不足则补充
update(() => {
  const currentAsteroids = get("asteroid").length;
  if (currentAsteroids < NUM_ASTERIODS) {
    const needSpawn = NUM_ASTERIODS - currentAsteroids;
    for (let i = 0; i < needSpawn; i++) {
      spawnAsteroid();
    }
  }
});

function asteroidSpawnPoint() {
   return choose([
       rand(vec2(0), vec2(width(), 0)),
       rand(vec2(0), vec2(0, height())),
       rand(vec2(0, height()), vec2(width(), height())),
       rand(vec2(width(), 0), vec2(width(), height()))
   ]);
}

两种方案的区别：

• 方案一逻辑更轻量，每次销毁一个才生成一个，适合不需要严格维持数量的场景。
• 方案二会确保屏幕上始终保持设定数量的小行星，适合需要稳定敌人数量的玩法。

内容的提问来源于stack exchange，提问作者Ivanna