专栏名称: 王兴欣
目录
相关文章推荐
IN朝鲜  ·  朝鲜海军前司令喜提“姑父”套餐! ·  22 小时前  
51好读  ›  专栏  ›  王兴欣

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

王兴欣  · 掘金  ·  · 2018-02-22 06:46

正文

请到「今天看啥」查看全文


.vy += 0.02 ; //重力影响 y越大实际越偏下 //空气阻力 this .vx *= 0.98 ; this .vy *= 0.98 ; } //画出微粒的位置 render(ctx){ this .go(); ctx.beginPath(); ctx.arc( this .x, this .y, this .size, 0 , Math .PI * 2 , false ); ctx.fill(); } }

构建烟花类

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;
    	//微粒个数等
        this.count = count;
    	this.particles = [];
    	this.createParticles();
    
    	this.status = 1;
    }
    //创建微粒
    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; //升空时产生的阻力
    	//烟花升空到目标位置开始渐隐
    	if(this.y - this.yEnd <= 50){
    		this.opacity = (this.y - this.yEnd) / 50;
    	}
    	//如果到了目标位置 就开始第二个状态






请到「今天看啥」查看全文