面向对象写出随机烟花效果
Posted zoutuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象写出随机烟花效果相关的知识，希望对你有一定的参考价值。
封装运动函数，来实现烟花的向上移动
注意：
首先在运动函数中：
1、在每一次执行新的函数时，一定要清除上一次的定时器，否则会造成定时器的累加
2、注意浏览器的兼容问题
3、要判断步进值的正负
1 var timer = null;//定时器 2 function startMove(obj, objArr, callback) 3 clearInterval(obj.timer);//清除上一次的定时器 4 var onOff = false;//定义开关，初始值为false 5 obj.timer = setInterval(function () 6 // console.log(attr);//属性 7 // console.log(objArr[attr]);//属性值 8 //遍历对象 9 for (var attr in objArr) 10 //获取实时位置 11 var tmpPos = parseInt(getPos(obj, attr)); 12 //定义步长值 13 var speed = (objArr[attr] - tmpPos) / 10; 14 //判断步长值 15 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 16 17 //赋值给对象 18 obj.style[attr] = tmpPos + speed + ‘px‘; 19 20 21 //判断元素运动的临界值 22 if((tmpPos + speed)==objArr[attr]) onOff = true; 23 if(onOff) 24 clearInterval(obj.timer); 25 if(callback) 26 callback(); 27 28 29 , 30) 30 31 32 //封装函数获取实时位置 33 function getPos(obj, attr) 34 if (obj.currentStyle) 35 return currentStyle[attr];//IE 36 else 37 return getComputedStyle(obj)[attr];//非IE 38 39
面向对象
其次：
在面向对象中
1、在绑定事件中，切记实例化对象
2、在调用运动函数时，记得参数以一一对应，并且在实现之后清除自身
3、在小烟花中，在后面调用运动函数时，要使用块级作用域，将sFire保存起来
一次执行完毕，执行下一次
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 * 10 margin: 0; 11 padding: 0; 12 13 14 #cont 15 width: 1200px; 16 height: 600px; 17 background: black; 18 margin: 50px auto; 19 position: relative; 20 cursor:pointer; 21 background:black; 22 /* 要设置相对定位，否则大烟花无法与鼠标位置相对应 */ 23 24 25 .big-fire 26 background: red; 27 position: absolute; 28 /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */ 29 bottom: 0px; 30 width: 6px; 31 height: 6px; 32 33 34 .small-fire 35 width: 10px; 36 height: 10px; 37 position: absolute; 38 border-radius: 50%; 39 40 </style> 41 </head> 42 <body> 43 <div id="cont"></div> 44 <script src="./move.js"></script> 45 <script> 46 //1 获取节点 47 var contObj = document.getElementById(‘cont‘); 48 //2 绑定事件获取鼠标实时位置 49 contObj.onclick = function(eve) 50 var e = eve || window.event; 51 var mousePos= 52 x:e.offsetX, 53 y:e.offsetY 54 55 // console.log(e.offsetX); 56 // console.log(e.offsetY); 57 new Fire(contObj,mousePos); 58 59 60 //3 封装烟花构造函数 61 function Fire(contObj,mousePos) 62 //!!! 63 this.contObj = contObj; 64 this.mousePos = mousePos; 65 //创建大烟花，设置class，left，bg 66 var bigFire = document.createElement(‘div‘); 67 bigFire.className = ‘big-fire‘; 68 bigFire.style.left = mousePos.x + ‘px‘; 69 bigFire.style.backgroundColor = this.ranColor(); 70 contObj.appendChild(bigFire); 71 var that = this; 72 startMove(bigFire,top:mousePos.y,function() 73 bigFire.remove(); 74 that.smallFire(); 75 ) 76 77 /*封装小烟花*/ 78 Fire.prototype.smallFire = function() 79 var fireNum = 20; 80 for(var i = 0;i<fireNum;i++) 81 var sFire = document.createElement(‘div‘); 82 sFire.className = ‘small-fire‘; 83 contObj.appendChild(sFire); 84 sFire.style.backgroundColor = this.ranColor(); 85 //小烟花初始位置 86 sFire.style.left = this.mousePos.x + ‘px‘; 87 sFire.style.top = this.mousePos.y + ‘px‘; 88 //小烟花终点位置 89 var sLeft =this.ranNum(0,contObj.offsetWidth - sFire.offsetWidth); 90 var sTop =this.ranNum(0,contObj.offsetHeight - sFire.offsetHeight); 91 //6 调用运动函数 92 //因为for的循环速度,比烟花运动到终点的速度快 93 // 调用使用运动函数是的sFire,在烟花到了终点位置时,已经被其他新的烟花给覆盖了 94 // 使用块级作用域,将sFire保存起来,一次执行完毕,执行下一次 95 (function(sFire) 96 startMove(sFire,left:sLeft,top:sTop,function() 97 sFire.remove(); 98 ); 99 )(sFire)//！！！注意调用小烟花 100 101 102 //随机颜色 103 Fire.prototype.ranColor=function() 104 var r = this.ranNum(0,255); 105 var g = this.ranNum(0,255); 106 var b = this.ranNum(0,255); 107 return `rgb($r,$g,$b)`; 108 109 //封装随机数 110 Fire.prototype.ranNum=function(min,max) 111 return Math.round(Math.random()*(max-min)+min); 112 113 </script> 114 </body> 115 </html>
以上是关于面向对象写出随机烟花效果的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript中的面向对象编程，详解原型对象及prototype，constructor，proto，内含面向对象编程详细案例（烟花案例）