JS面向物件程式設計之煙花效果
阿新 • • 發佈：2019-01-31
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,html{height: 100%;width: 100%;background: #000;overflow: hidden;} *{margin: 0;padding: 0;} .boom{height: 6px;width: 6px;position: absolute;} .star{height: 50px;width: 6px;position: absolute;} </style> <script> //這是自己封裝的方法 //多屬性緩衝運動 move(ball, {width:500, height:500, left: 700, top: 200},callback()); function move(obj, json,callback) { clearInterval(obj.t); obj.t = setInterval(function(){ for(var attr in json){ var speed = 0; speed = (json[attr] - parseInt(getStyle(obj,attr)))/8; if(speed>0){ speed=(speed<1?speed=1:speed); }else{ speed=(speed>-1?speed=-1:speed); } obj.style[attr] = parseInt(getStyle(obj,attr)) + speed + "px"; if(parseInt(getStyle(obj,attr)) == json[attr]){ delete json[attr]; if(getJsonLong(json)==0){ clearInterval(obj.t); callback?callback():""; } } } },30); } //產生範圍隨機數 function randomInt(min,max){ return Math.round(Math.random()*(max-min)) + min; } //隨機顏色 function randomcolor() { var r = Math.round(Math.random() * 255).toString(16); var g = Math.round(Math.random() * 255).toString(16); var b = Math.round(Math.random() * 255).toString(16); return(r.length < 2 ? "0" + r : r) + (g.length < 2 ? "0" + g : g) + (b.length < 2 ? "0" + b : b) } </script> <script type="text/javascript"> window.onload = function(){ document.onclick=function(e){ e = e || event; new Fire({x:e.clientX,y:e.clientY}).init().launch();//呼叫Fire方法 傳入當前點選滑鼠座標，接著呼叫他的init方法接著呼叫他的launch方法 } function Fire(e){//發射過程 var self = this; this.init = function(){//發射的煙花初始化 設定從螢幕最低端發射 隨機顏色 this.ele = document.createElement("div"); this.ele.className = "star"; this.ele.style.backgroundColor = "#" + randomcolor(); this.ele.style.left = e.x + "px"; this.ele.style.top = document.body.offsetHeight + "px"; document.body.appendChild(this.ele); return this; } this.launch = function(){//發射 move(this.ele,{top:e.y,height:6},function(){//移動完成的回撥函式 self.over();//刪除煙花 var r = randomInt(30,50); for(var i = 0;i < r ;i++){//建立爆炸需要的煙花 new Spark(e).init().go();//呼叫爆炸方法 } }); } this.over = function(){ this.ele.remove(); } } function Spark(e){ var self = this; this.init = function(){//爆炸的煙花初始化 this.ele = document.createElement("div"); this.ele.className = "boom"; this.ele.style.backgroundColor = "#" + randomcolor(); this.ele.style.left = e.x + "px"; this.ele.style.top = e.y + "px"; this.ele.speedX = randomInt(-20,20); this.ele.speedY = randomInt(-20,10); document.body.appendChild(this.ele); return this; } this.go = function(){//爆炸 var t = setInterval(function(){//定時器控制爆炸出來的每一個煙花的運動 if(self.ele.offsetTop > document.body.offsetHeight){//掉出螢幕刪除 並停止定時器 self.ele.remove(); clearInterval(t); } self.ele.style.left = self.ele.offsetLeft + self.ele.speedX + "px";//x軸 左右隨機速度 self.ele.style.top = self.ele.offsetTop + self.ele.speedY++ + "px";//y軸隨機速度並且速度一增加 模擬拋物線 },30); } } } </script> </head> <body> </body> </html>
所謂面向物件，相對於面向過程而言做了更好的分工。管發射的只管發射，管爆炸的只管爆炸，思路更清晰。把程式分成多塊可以很多人一起完成。