分散烟花
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);
}
}
这样一个简单的面向对象烟花就完成了。