程序员的小浪漫----烟火

多代码，慎读！！！

预览

完整项目预览----预览地址;

属性设计

烟花状态：烟花应有三个状态：

1. 升空
2. 等待炸裂
3. 炸裂后

烟花：发射点（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) * th