構造函數的最大特點是什么？就是多次new可以創建不同對象
但是煙花，可能會存在多個，每個煙花都是獨立的對象，需要在點擊的一瞬間被創建
因為，點擊時才創建對象，所以點擊事件之前的過程不屬於面向對象的過程
提前處理好：
選擇元素，綁定事件，觸發事件時，執行面向對象的啟動（new）
***需要用到上一次封裝的運動函數
OOA:煙花：點擊頁面，出現運動的元素到達目的之后，炸開到隨機的位置
1.創建主題煙花的元素，設置初始位置，顏色，等信息，插入頁面
2.開始運動到鼠標點擊的位置
3.到目標之后，刪除，然后，創建一堆小煙花，設置位置，顏色，等信息，插入頁面
4.小煙花開始運動，運動到隨機位置
5.結束之后刪除
OOD:
function Fire(){
// 1.執行創建主題煙花的功能
this.init()
}
Fire.prototype.init = function(){
// 定義創建煙花的功能
// 2.執行運動功能
this.move()
}
Fire.prototype.move = function(){
// 定義運動功能
// 3.刪除主體煙花，執行創建小煙花的功能
this.smallFire()
}
Fire.prototype.smallFire = function(){
// 定義創建小煙花的功能
// 4.執行小煙花開始運動的功能
this.smallMove()
}
Fire.prototype.smallMove = function(){
// 小煙花開始運動
// 5.結束后，刪除所有小煙花
}
整體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
var ocont = document.querySelector("#container");
ocont.onclick = function(eve){
var e = eve || window.event;
new Fire({
cont:ocont,
x:e.offsetX,
y:e.offsetY
});
}
function Fire(options){
this.cont = options.cont;
this.x = options.x;
this.y = options.y;
// 1.執行創建主題煙花的功能
this.init()
}
Fire.prototype.init = function(){
// 定義創建煙花的功能
this.f = document.createElement("div");
this.f.className = "fire";
this.cont.appendChild(this.f);
this.f.style.background = randomColor();
this.f.style.left = this.x + "px";
// 2.執行運動功能
this.move();
}
Fire.prototype.move = function(){
// 定義運動功能
move(this.f,{top:this.y},()=>{
// 3.刪除主體煙花
this.f.remove();
// 執行創建小煙花的功能
this.smallFire()
})
}
Fire.prototype.smallFire = function(){
var that = this;
// 定義創建小煙花的功能
var num = random(10,20);
var r = random(100,200);
console.log(num);
for(var i=0;i<num;i++){
let s = document.createElement("div");
s.className = "small-fire";
s.style.left = this.x + "px";
s.style.top = this.y + "px";
s.style.background = randomColor();
this.cont.appendChild(s);
s.setAttribute("index",i);
// 計算運動成一個圓的目標值
var target = {
x:parseInt(Math.sin( Math.PI/180 * (360/num*i) ) * r) + this.x,
y:parseInt(Math.cos( Math.PI/180 * (360/num*i) ) * r) + this.y
}
move(s,{
left:target.x,
top:target.y
},function(){
s.remove();
})
}
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
}
function move(ele,data,end){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in data){
var iNow = parseInt(getStyle(ele,i));
var speed = (data[i] - iNow)/7;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
(data[i] != iNow) && (onoff = false);
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
end && end();
}
}, 30);
}
function getStyle(ele,attr){
if(getComputedStyle){
return getComputedStyle(ele,false)[attr];
}else{
return ele.currentStyle[attr];
}
}
</script>
</html>