[[229837]]

const config = { 
    width: 360, 
    height: 600, 
    canvases: ['bg', 'firework'], 
    skyColor: '210, 60%, 5%, 0.2)', 
    fireworkTime:{min:30,max:60}, 
    //煙花參數(shù)本身有默認(rèn)值 傳入undefined則使用默認(rèn)參數(shù) 
    fireworkOpt:{ 
        x: undefined, 
        y: undefined, 
        xEnd: undefined, 
        yEnd: undefined, 
        count: 300,   //炸裂后粒子數(shù) 
        wait: undefined,  //消失后 => 炸裂  等待時(shí)間 
    } 
} 

class Firework{ 
    constructor({x, y = config.height, xEnd, yEnd, count = 300, wait} = {}){ 
        //煙花自身屬性 
        this.x = x || config.width / 8 + Math.random() * config.width * 3 / 4;  
        this.y = y; 
        this.xEnd = xEnd || this.x; 
        this.yEnd = yEnd || config.width / 8 + Math.random() * config.width * 3 / 8; 
        this.size = 2; 
        this.velocity = -3; 
         
        this.opacity = 0.8; 
        this.color = `hsla(${360 * Math.random() | 0},80%,60%,1)`; 
        this.wait = wait || 30 + Math.random() * 30; 
        //微粒個(gè)數(shù)等 
        this.count = count; 
        this.particles = []; 
        this.createParticles(); 
     
        this.status = 1; 
    } 
    //創(chuàng)建微粒 
    createParticles(){ 
        for(let i = 0;i < this.count; ++i){ 
            this.particles.push(new Particle({x:this.xEnd, y:this.yEnd})); 
        } 
    } 
    //升空 
    rise(){ 
        this.y += this.velocity * 1; 
        this.velocity += 0.005; //升空時(shí)產(chǎn)生的阻力 
        //煙花升空到目標(biāo)位置開始漸隱 
        if(this.y - this.yEnd <= 50){ 
            this.opacity = (this.y - this.yEnd) / 50; 
        } 
        //如果到了目標(biāo)位置 就開始第二個(gè)狀態(tài) 
        if(this.y <= this.yEnd){ 
            this.status = 2; 
        } 
    } 
     
    //渲染煙花  煙花所有動作完成之后返回false 
    render(ctx){ 
        switch(this.status){ 
            case 1: //升空 
            ctx.save(); 
            ctx.beginPath(); 
            ctx.globalCompositeOperation = 'lighter'; 
            ctx.globalAlpha = this.opacity; 
            ctx.translate(this.x, this.y); 
            ctx.scale(0.8, 2.3); 
            ctx.translate(-this.x, -this.y); 
            ctx.fillStyle = this.color; 
            ctx.arc(this.x + Math.sin(Math.PI * 2 * Math.random()) / 1.2, this.y, this.size, 0, Math.PI * 2, false); 
            ctx.fill(); 
            ctx.restore(); 
     
            this.rise(); 
            return true; 
            break; 
            case 2: //煙花消失階段，等待炸裂 
            if(--this.wait <= 0){ 
                this.opacity = 1; 
                this.status = 3; 
            } 
            return true; 
            break; 
            case 3: //炸裂之后 渲染煙花微粒 
            ctx.save(); 
            ctx.globalCompositeOperation = 'lighter'; 
            ctx.globalAlpha = this.opacity; 
            ctx.fillStyle = this.color; 
            for(let i = 0;i < this.particles.length;++i){ 
            this.particles[i].render(ctx); 
            } 
            ctx.restore(); 
            this.opacity -= 0.01; 
            return this.opacity > 0; 
            break; 
            default:  
            return false; 
        } 
    } 
} 

const canvas = { 
    init: function(){ 
        //一些屬性的設(shè)定 可以不用管 
        this.setProperty(); 
        this.renderBg(); 
         
        //循環(huán)體 **主要 
        this.loop(); 
    }, 
    setProperty: function(){ 
        this.fireworks = []; 
        this.width = config.width; 
        this.height = config.height; 
        this.fireworkTime = (config.fireworkTime.min + (config.fireworkTime.max - config.fireworkTime.min) * Math.random()) | 0; 
     
        this.bgCtx = document.querySelector('#bg').getContext('2d'); 
        this.fireworkCtx = document.querySelector('#firework').getContext('2d'); 
    }, 
    renderBg(){ 
        this.bgCtx.fillStyle = 'hsla(210, 60%, 5%, 0.9)' 
        this.bgCtx.fillRect(0, 0, this.width, this.height); 
    }, 
     
    loop(){ 
        requestAnimationFrame(this.loop.bind(this)); 
        this.fireworkCtx.clearRect(0, 0, this.width, this.height); 
         
        //隨機(jī)創(chuàng)建煙花 
        if(--this.fireworkTime <= 0){ 
            this.fireworks.push(new Firework(config.fireworkOpt)); 
            //每次到點(diǎn)之后重新設(shè)置煙花產(chǎn)生時(shí)間 （|0轉(zhuǎn)化為整數(shù)） 
            this.fireworkTime = (config.fireworkTime.min + (config.fireworkTime.max - config.fireworkTime.min) * Math.random()) | 0; 
        } 
     
        for(let i = this.fireworks.length - 1; i >= 0; --i){ 
            //渲染煙花 （若返回值為false則移除煙花） 
            !this.fireworks[i].render(this.fireworkCtx) && this.fireworks.splice(i,1);     
        } 
     
    } 
} 
canvas.init(); 

//canvas.loop方法 
 
// this.fireworkCtx.clearRect(0, 0, this.width, this.height); 
this.fireworkCtx.fillStyle = config.skyColor; 
this.fireworkCtx.fillRect(0,0,this.width,this.height);     

// *****Firework constructor 
// this.color = `hsla(${360 * Math.random() | 0},80%,60%,1)`; 
this.hue = 360 * Math.random() | 0; 
this.color = `hsla(${this.hue},80%,60%,1)`; 
// *****Firework 新增實(shí)例方法 
getSkyColor(){ 
    const skyColor = { 
        //只有炸裂階段才返回亮度 
        lightness: this.status == 3 ? this.opacity : 0 , 
        hue: this.hue 
    }; 
    return skyColor; 
} 
// *****config 修改config的skyColor 
// skyColor: 'hsla(210, 60%, 5%, 0.2)', 
skyColor: 'hsla({hue}, 60%, {lightness}%, 0.2)', 
// canvas.loop方法 
//this.fireworkCtx.fillStyle = config.skyColor; 
//每次替換色調(diào)與亮度值。 
this.fireworkCtx.fillStyle = config.skyColor.replace('{lightness}', 5 + this.skyColor.lightness * 15).replace('{hue}' , this.skyColor.hue); 
 
this.skyColor = { //新增 
    lightness: 0, 
    hue: 210 
}; 
for(let i = this.fireworks.length - 1; i >= 0; --i){ 
    //新增 天空顏色為最亮的煙花的顏色 
    this.skyColor = this.skyColor.lightness >= this.fireworks[i].getSkyColor().lightness ? this.skyColor : this.fireworks[i].getSkyColor(); 
    !this.fireworks[i].render(this.fireworkCtx) && this.fireworks.splice(i,1);     
}