多代码,慎读!!!
预览
属性设计
烟花状态:烟花应有三个状态:
-
升空
-
等待炸裂
-
炸裂后
烟花:发射点(x, y),爆炸点(xEnd, yEnd),升空后等待炸裂时间(wait),炸裂后微粒个数(count),烟花半径(radius)
烟花炸裂后微粒:自身位置(x, y),自身大小(size),自身速度(rate),最大烟花半径(radius)。
config:为全局变量,以及控制参数,包括画布宽高,设定烟花属性等。
设定全局变量
-
const config = {
-
width: 360,
-
height: 600,
-
canvases: ['bg', 'firework'],
-
skyColor: '210, 60%, 5%, 0.2)',
-
fireworkTime:{min:30,max:60},
-
//烟花参数本身有默认值 传入undefined则使用默认参数
-
fireworkOpt:{
-
x: undefined,
-
y: undefined,
-
xEnd: undefined,
-
yEnd: undefined,
-
count: 300, //炸裂后粒子数
-
wait: undefined, //消失后 => 炸裂 等待时间
-
}
-
}
构建微粒类
-
class Particle{
-
//默认值写法
-
constructor({x, y, size = 1, radius = 1.2} = {}){
-
this.x = x;
-
this.y = y;
-
this.size = size;
-
-
this.rate = Math.random(); //每个微粒移动的速度都是随机不同的
-
this.angle = Math.PI * 2 * Math.random(); //每个微粒的偏移角度
-
-
//每次微粒移动速度分解为横纵坐标的移动。
-
this.vx = radius * Math.cos(this.angle) * this.rate;
-
this.vy = radius * Math.sin(this.angle) * this.rate;
-
}
-
-
go(){
-
this.x += this.vx;
-
this.y += this.vy;