粒子系统深度实现：力场与发射器 ​

class Particle {
  constructor() {
    this.reset();
  }
  
  reset() {
    this.active = false;
    this.x = 0;
    this.y = 0;
    this.vx = 0;
    this.vy = 0;
    this.ax = 0;
    this.ay = 0;
    
    this.life = 0;      // 当前生命值
    this.maxLife = 1;   // 最大生命值
    
    this.size = 5;
    this.color = { r: 255, g: 255, b: 255 };
    this.alpha = 1;
  }
  
  update(deltaTime) {
    if (!this.active) return;
    
    const dt = deltaTime / 1000;
    
    // 更新速度和位置
    this.vx += this.ax * dt;
    this.vy += this.ay * dt;
    this.x += this.vx * dt;
    this.y += this.vy * dt;
    
    // 更新生命周期
    this.life -= deltaTime;
    if (this.life <= 0) {
      this.active = false;
    }
    
    // 根据生命值计算透明度
    this.alpha = this.life / this.maxLife;
  }
  
  draw(ctx) {
    if (!this.active) return;
    
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.fillStyle = `rgb(${this.color.r}, ${this.color.g}, ${this.color.b})`;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

class ParticlePool {
  constructor(size) {
    this.particles = [];
    for (let i = 0; i < size; i++) {
      this.particles.push(new Particle());
    }
  }
  
  acquire() {
    // 找到一个不活动的粒子
    for (const p of this.particles) {
      if (!p.active) {
        return p;
      }
    }
    return null;  // 池已满
  }
  
  release(particle) {
    particle.reset();
  }
  
  getActiveCount() {
    return this.particles.filter(p => p.active).length;
  }
}

class Emitter {
  constructor(x, y, options = {}) {
    this.x = x;
    this.y = y;
    
    this.rate = options.rate || 50;  // 每秒发射粒子数
    this.lifeMin = options.lifeMin || 1000;  // 生命周期（毫秒）
    this.lifeMax = options.lifeMax || 2000;
    
    this.speedMin = options.speedMin || 50;  // 初始速度
    this.speedMax = options.speedMax || 100;
    
    this.angle = options.angle || 0;  // 发射角度
    this.spread = options.spread || Math.PI;  // 扩散角度
    
    this.sizeMin = options.sizeMin || 3;
    this.sizeMax = options.sizeMax || 8;
    
    this.color = options.color || { r: 255, g: 200, b: 0 };
    
    this.accumulator = 0;  // 累积时间
  }
  
  emit(pool, deltaTime) {
    this.accumulator += deltaTime;
    const interval = 1000 / this.rate;
    
    while (this.accumulator >= interval) {
      this.accumulator -= interval;
      
      const particle = pool.acquire();
      if (!particle) break;  // 池已满
      
      this.initParticle(particle);
    }
  }
  
  initParticle(particle) {
    particle.active = true;
    particle.x = this.x;
    particle.y = this.y;
    
    // 随机角度
    const angle = this.angle + (Math.random() - 0.5) * this.spread;
    const speed = this.lerp(this.speedMin, this.speedMax, Math.random());
    
    particle.vx = Math.cos(angle) * speed;
    particle.vy = Math.sin(angle) * speed;
    
    particle.ax = 0;
    particle.ay = 0;
    
    particle.life = this.lerp(this.lifeMin, this.lifeMax, Math.random());
    particle.maxLife = particle.life;
    
    particle.size = this.lerp(this.sizeMin, this.sizeMax, Math.random());
    particle.color = this.color;
    particle.alpha = 1;
  }
  
  lerp(a, b, t) {
    return a + (b - a) * t;
  }
}

class ForceField {
  apply(particle, deltaTime) {
    // 子类实现
  }
}

class Gravity extends ForceField {
  constructor(strength = 980) {
    super();
    this.strength = strength;  // 像素/秒²
  }
  
  apply(particle) {
    particle.ay += this.strength / 1000;  // 转换为毫秒
  }
}

class Wind extends ForceField {
  constructor(vx, vy) {
    super();
    this.vx = vx;
    this.vy = vy;
  }
  
  apply(particle) {
    particle.ax += this.vx;
    particle.ay += this.vy;
  }
}

class Attractor extends ForceField {
  constructor(x, y, strength) {
    super();
    this.x = x;
    this.y = y;
    this.strength = strength;
  }
  
  apply(particle) {
    const dx = this.x - particle.x;
    const dy = this.y - particle.y;
    const distSq = dx * dx + dy * dy;
    const dist = Math.sqrt(distSq);
    
    if (dist < 1) return;  // 避免除零
    
    const force = this.strength / distSq;
    particle.ax += (dx / dist) * force;
    particle.ay += (dy / dist) * force;
  }
}

class ParticleSystem {
  constructor(poolSize = 1000) {
    this.pool = new ParticlePool(poolSize);
    this.emitters = [];
    this.forceFields = [];
  }
  
  addEmitter(emitter) {
    this.emitters.push(emitter);
  }
  
  addForceField(field) {
    this.forceFields.push(field);
  }
  
  update(deltaTime) {
    // 发射新粒子
    for (const emitter of this.emitters) {
      emitter.emit(this.pool, deltaTime);
    }
    
    // 更新粒子
    for (const particle of this.pool.particles) {
      if (!particle.active) continue;
      
      // 重置加速度
      particle.ax = 0;
      particle.ay = 0;
      
      // 应用力场
      for (const field of this.forceFields) {
        field.apply(particle, deltaTime);
      }
      
      particle.update(deltaTime);
    }
  }
  
  render(ctx) {
    for (const particle of this.pool.particles) {
      particle.draw(ctx);
    }
  }
}

const fireSystem = new ParticleSystem(500);

const fireEmitter = new Emitter(400, 550, {
  rate: 100,
  lifeMin: 500,
  lifeMax: 1500,
  speedMin: 80,
  speedMax: 150,
  angle: -Math.PI / 2,  // 向上
  spread: Math.PI / 6,  // 小扩散
  sizeMin: 5,
  sizeMax: 15,
  color: { r: 255, g: 100, b: 0 }
});

fireSystem.addEmitter(fireEmitter);
fireSystem.addForceField(new Wind(0, -50));  // 向上的风

function animate(time) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  fireSystem.update(16);  // 固定时间步
  fireSystem.render(ctx);
  
  requestAnimationFrame(animate);
}

function createExplosion(x, y) {
  const explosionSystem = new ParticleSystem(300);
  
  const explosionEmitter = new Emitter(x, y, {
    rate: 5000,  // 瞬间发射大量粒子
    lifeMin: 500,
    lifeMax: 1500,
    speedMin: 100,
    speedMax: 300,
    angle: 0,
    spread: Math.PI * 2,  // 全方向
    sizeMin: 3,
    sizeMax: 10,
    color: { r: 255, g: 150, b: 0 }
  });
  
  explosionSystem.addEmitter(explosionEmitter);
  explosionSystem.addForceField(new Gravity(200));
  
  // 停止发射（爆炸是一次性的）
  setTimeout(() => {
    explosionSystem.emitters = [];
  }, 100);
  
  return explosionSystem;
}