<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 80%;
height: 600px;
border: 2px solid red;
background: #000;
margin:20px auto;
cursor: pointer;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
.fire{
width: 10px;
height:10px;
position: absolute;
bottom: 0;
}
.small-fire{
width: 10px;
height:10px;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script src="../move.js"></script>
<script>
function Fire(options){
this.x = options.x;
this.y = options.y;
this.cont = options.parent;
// 1.創建主體煙花，設置樣式，位置
this.init()
}
Fire.prototype.init = function(){
// 主體煙花，設置樣式，位置
this.ele = document.createElement("div");
this.ele.className = "fire";
this.ele.style.left = this.x + "px";
this.ele.style.background = randomColor();
this.cont.appendChild(this.ele)
// 2.開始運動，運動結束
this.animate()
}
Fire.prototype.animate = function(){
// 開始運動。。。
move(this.ele,{
top:this.y
},function(){
// 刪除主體煙花
this.ele.remove()
// 3.創建小煙花
this.createSmall()
}.bind(this))
}
Fire.prototype.createSmall = function(){
// 創建小煙花,運動，刪掉
var num = random(10,20);
// 1.隨機的半徑
var r = random(100,200);
console.log(num)
for(var i=0;i<num;i++){
let div = document.createElement("div");
div.className = "small-fire";
div.style.background = randomColor();
div.style.left = this.x + "px";
div.style.top = this.y + "px";
div.setAttribute("i",i);
this.cont.appendChild(div);
// 2.利用三角函數，計算出一個圓上面平均分布的點的坐標
// 注意三角函數的方法接收的是弧度：別忘記角度轉弧度
var l = parseInt(Math.cos( Math.PI/180 * (360/num * i)) * r) + this.x;
var t = parseInt(Math.sin( Math.PI/180 * (360/num * i)) * r) + this.y;
move(div,{
left:l,
top:t
},function(){
div.remove()
})
}
}
// for(){
// ali[i] = i
// ali[i].onclick = function(){
// this
// }
// }
// 范圍隨機數
function random(max,min){
return Math.round(Math.random()*(max-min)+min);
}
// 隨機顏色
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
var ocont = document.getElementById("container");
ocont.onclick = function(eve){
var e = eve || window.event;
new Fire({
x:e.offsetX,
y:e.offsetY,
parent:this
});
}
</script>
</html>
//移動
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
