HTML5 Canvas粒子渲染异常：仅显示单个粒子的问题求助

核心问题1：所有粒子共享同一个位置引用 #

你在创建粒子时直接传入了projectile.position对象，这会导致所有新生成的粒子都引用同一个位置对象——也就是说所有粒子的坐标完全一样，重叠在一起自然看起来像只渲染了一个。

修复代码： #

修改createParticles里的position参数，创建新的位置对象：

const createParticles = (enemy: Enemy, projectile: Projectile) => {
  for (let i = 0; i < enemy.radius * 2; i++) {
    particles.push(new Particle({ 
      // 复制position的x/y值，而不是传引用
      position: { x: projectile.position.x, y: projectile.position.y }, 
      radius: Math.random() * 2, 
      color: enemy.color, 
      velocity: {
        x: (Math.random() - 0.5) * (Math.random() * 2),
        y: (Math.random() - 0.5) * (Math.random() * 2)
      }
    }));
  }
}

核心问题2：forEach遍历中使用splice导致粒子漏处理 #

在遍历粒子数组时用splice(idx, 1)会改变数组长度，导致forEach跳过下一个元素（因为索引已经递增，但数组元素前移了），部分粒子不会被更新或删除。

修复代码（二选一）： #

方案1：倒序遍历数组

// 从后往前遍历，避免splice影响后续索引
for (let idx = particles.length - 1; idx >= 0; idx--) {
  const particle = particles[idx];
  if (particle.alpha <= 0) particles.splice(idx, 1);
  else particle.update();
}

方案2：用filter生成新数组（更简洁）

// 过滤掉alpha<=0的粒子，剩下的执行更新
particles = particles.filter(particle => {
  if (particle.alpha <= 0) return false;
  particle.update();
  return true;
});

先修复第一个问题，应该就能看到多个粒子渲染出来了，第二个问题是优化粒子数组的维护逻辑，避免内存泄漏或异常。

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