分散烟花

分散烟花

javascript中有名的莫过于对象，怎样处对象呢？现在我们一起面向对象，做一个自动播放烟花效果，也可以自己点击放烟花的效果


html很简单

<div id="tips"><a id="auto" href="#">自动放烟花</a></div>

这是css样式

html,body{overflow:hidden;height:100%;}
    body{background:#000;}
    a{text-decoration:none;outline:none;}
    #tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
    #tips{top:0;border-width:0 0 2px;}
    #tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
    #tips a.active{background:#FE0000;}
    p{position:absolute;top:55px;width:100%;text-align:center;}
    .fire {
        width: 3px;
        height: 30px;
        background: white;
        position: absolute;top:100%;
    } 
    .spark,.show {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

首先创建一个页面

let page = {//创建
            btn:'#auto',
            container:'body',
            init(){
                this.btn = document.querySelector(this.btn);
                this.container = document.querySelector(this.container);
                document.onclick = haha;//点击事件
                function haha(e){
                    let x = e.clientX;//点击的x坐标
                    let y = e.clientY;//点击的y坐标
                    new Firework(x,y);
                }
            }
        }

然后初始化页面page.init();接着创建烟花

function Firework(x,y){
            this.left = x;
            this.top = y;
            this.init();
            this.move();
        }

给烟花添加属性，它的运动轨迹，爆炸

Firework.prototype = {//添加烟花属性
            constructor:Firework,
            init(){//初始化
                let fire = document.createElement('span');//创建烟花
                fire.className = 'fire';
                fire.style.left = this.left + 'px';
                page.container.appendChild(fire);
                this.ele = fire;
            },
            move(){//烟花移动动画
                animate(this.ele,{top:this.top,height:3},function(){
                    this.boom();
                    this.remove();
                }.bind(this));
            },
            remove(){//清除动画
                this.ele.parentNode.removeChild(this.ele);
            },
            boom(){//烟花爆炸
                let qty = randomNumber(30,50);
                for(var i=0;i<qty;i++){
                    let deg = 360/qty*i;
                    new Spark(this.left,this.top,deg);
                }
            }
        }

爆炸后散出各个五颜六色的烟花，及其去向

function Spark(x,y,deg){//爆炸后的方向去向
            this.center = {x:x,y:y};
            this.r = randomNumber(20,300);
            this.color = randomColor();
            this.rad = deg*Math.PI/180;
            this.init();
            this.move();
        }

给各个不同方向的烟花添加属性及去向

Spark.prototype={//设置爆炸后各个烟花的属性
            constructor:Spark,
            init(){//初始化
                let spark = document.createElement('span');
                spark.className = 'spark';
                spark.style.backgroundColor = this.color;
                spark.style.left = this.center.x + 'px';
                spark.style.top = this.center.y + 'px';
                page.container.appendChild(spark);
                this.ele = spark;
            },
            move(){//各个烟花去向动画
                let a = this.r*Math.cos(this.rad);
                let b = this.r*Math.sin(this.rad);
                animate(this.ele,{left:parseInt(this.center.x+a),top:parseInt(this.center.y+b)},function(){
                    this.remove();
                }.bind(this));
            },
            remove(){//清除动画
                this.ele.parentNode.removeChild(this.ele);
            }
        }

这样一个简单的面向对象烟花就完成了。