p5.js/p5.play如何让所有精灵朝向多个不同吸引点移动

算力阿峰

2026-10-1

问题原因

你在创建小行星时没有给asteroid变量加作用域声明，它会被默认提升为全局变量，最终只会保留最后一个被创建的小行星实例
你在遍历小行星数组施加引力时，调用的是全局的asteroid变量而非当前遍历到的asteroidArray[i]实例，所以只有最后一个小行星会受到吸引点的引力影响，其余小行星都不会触发引力逻辑

修正方案

修改drawAsteroid函数里的引力调用对象，把引力施加给每一个遍历到的小行星实例即可，修正后代码如下：

function createAsteroids() {
  for (let i = 0; i < numAsteroids; i++) {
    // 新增const限定变量作用域，避免污染全局
    const asteroid = createSprite(random(0, 1000), random(-50, -350), 40, 40);
    asteroid.maxSpeed = random(1, 3);
    rock.add(asteroid);
    asteroidArray.push(asteroid);
  }
}

function drawAsteroid() {
  rock.overlap(turret, explode);
  // 塔台坐标统一存为数组，后续修改/新增塔台更方便
  const turretPositions = [
    [100, 740],
    [400, 740],
    [700, 740]
  ];
  for (let i = 0; i < asteroidArray.length; i++) {
    const currentAsteroid = asteroidArray[i];
    if (currentAsteroid.position.y > height) {
      currentAsteroid.position.y = 0;
      currentAsteroid.position.x = random(0, 800);
    }
    currentAsteroid.addSpeed(3, 90);
    // 给当前小行星施加所有塔台的引力
    turretPositions.forEach(pos => {
      currentAsteroid.attractionPoint(1, pos[0], pos[1]);
    });
  }
}

function explode(sprite, obstical) {
  sprite.remove();
  obstical.remove();
}