JS面向对象编程之烟花效果

最新推荐文章于 2023-09-05 15:34:43 发布

_小白白

最新推荐文章于 2023-09-05 15:34:43 发布

阅读量944

点赞数 1

分类专栏：运动效果文章标签： js 特效 js运动烟花效果面向对象

本文链接：https://blog.csdn.net/qq_31043525/article/details/52618275

版权

运动效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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.οnclick=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>

所谓面向对象，相对于面向过程而言做了更好的分工。管发射的只管发射，管爆炸的只管爆炸，思路更清晰。把程序分成多块可以很多人一起完成。