粒子系统开发：如何实现画布中心起爆的单烟花效果

嘿，我来帮你搞定这个烟花粒子的问题！你现在的粒子乱飞，核心问题出在初始位置和速度的设置上——原来的代码让粒子一开始就散布在整个画布，速度也是随机乱飘的，完全不符合烟花从中心起爆向四周散开的逻辑。

第一步：把粒子初始位置固定在画布中心 #

你原来的代码里，粒子的初始x、y是随机整个画布的，这直接导致粒子不可能从中心出发。把这两行改成固定的中心坐标：

// 替换原来的随机x、y
this.x = canvas.width / 2;
this.y = canvas.height / 2;

第二步：让粒子向四周放射状散开（控制速度方向） #

原来的vx和vy是随机正负值，会导致粒子乱撞。我们可以用角度计算速度分量，让每个粒子朝着随机的方向（360度全覆盖）飞出去，这样就有烟花炸开的效果了：

// 生成0到2π的随机角度（对应360度所有方向）
const angle = Math.random() * Math.PI * 2;
// 控制粒子的初始速度大小（这里取3-8的随机值，你可以自己调）
const speed = Math.random() * 5 + 3;
// 根据三角函数计算x、y方向的速度分量
this.vx = Math.cos(angle) * speed;
this.vy = Math.sin(angle) * speed;

可选优化：加入重力效果让烟花更真实 #

如果想让烟花更贴近真实效果，可以给粒子加一点重力，让它们在飞行过程中慢慢下落。只需要在粒子的更新方法里，给vy（垂直方向速度）加一个小的重力值：

// 假设你有Particle的update方法
Particle.prototype.update = function() {
  this.x += this.vx;
  this.y += this.vy;
  // 加入重力，让粒子逐渐下落（数值越大，下落越快）
  this.vy += 0.1;
  // 还可以加生命周期，让粒子慢慢消失
  this.life -= 1;
};

完整的Particle构造函数示例 #

把这些整合起来，你可以用这样的完整构造函数：

function Particle() {
  // 初始位置：画布中心
  this.x = canvas.width / 2;
  this.y = canvas.height / 2;
  
  // 计算放射状的速度
  const angle = Math.random() * Math.PI * 2;
  const speed = Math.random() * 5 + 3;
  this.vx = Math.cos(angle) * speed;
  this.vy = Math.sin(angle) * speed;
  
  // 可选：粒子的生命周期和随机颜色
  this.life = 100;
  this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
}

// 更新粒子状态
Particle.prototype.update = function() {
  this.x += this.vx;
  this.y += this.vy;
  // 重力作用
  this.vy += 0.1;
  this.life--;
};

// 绘制粒子
Particle.prototype.draw = function(ctx) {
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
  ctx.fill();
};

这样修改后，所有粒子都会从画布中心出发，向四周散开，再加上重力的话，会呈现出真实烟花炸开后下落的效果，不会再乱飞啦！

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