程序员的小浪漫-手撸烟花特效

多代码，慎读！！！

预览

属性设计

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

1. 升空

2. 等待炸裂

3. 炸裂后

烟花：发射点（x, y），爆炸点(xEnd, yEnd)，升空后等待炸裂时间（wait），炸裂后微粒个数（count），烟花半径（radius）

烟花炸裂后微粒：自身位置（x, y），自身大小（size），自身速度（rate），最大烟花半径（radius）。

config：为全局变量，以及控制参数，包括画布宽高，设定烟花属性等。

设定全局变量

1. const config = {

2.    width: 360,

3.    height: 600,

4.    canvases: ['bg', 'firework'],

5.    skyColor: '210, 60%, 5%, 0.2)',

6.    fireworkTime:{min:30,max:60},

7.    //烟花参数本身有默认值 传入undefined则使用默认参数

8.    fireworkOpt:{

9.        x: undefined,

10.        y: undefined,

11.        xEnd: undefined,

12.        yEnd: undefined,

13.        count: 300,   //炸裂后粒子数

14.        wait: undefined,  //消失后 => 炸裂  等待时间

15.    }

16. }

构建微粒类

1. class Particle{

2.    //默认值写法

3.    constructor({x, y, size = 1, radius = 1.2} = {}){

4.        this.x = x;

5.        this.y = y;

6.        this.size = size;

7.  

8.        this.rate = Math.random(); //每个微粒移动的速度都是随机不同的

9.        this.angle = Math.PI * 2 * Math.random(); //每个微粒的偏移角度

10.  

11.        //每次微粒移动速度分解为横纵坐标的移动。

12.        this.vx = radius * Math.cos(this.angle) * this.rate;

13.        this.vy = radius * Math.sin(this.angle) * this.rate;

14.    }

15.  

16.    go(){

17.        this.x += this.vx;

18.        this.y += this.vy;