JS烟花效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40196539/article/details/99685074

调用一个startMove的js文件，这个封装用的原生js，包括获取样式，高度，宽度和透明度等。引用js地址如下https://blog.youkuaiyun.com/weixin_40196539/article/details/98477850

如有错误，欢迎指正，不胜感激！

烟花完整代码如下：

<!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 src="js/startMove.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//产生范围随机数
			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)
			}
			document.onclick = function(e) {
				e = e || event;
				
				var fire = new Fire({
					x: e.clientX,
					y: e.clientY
				})
				fire.launch();
			}

			function Fire(point) { //发射过程
				this.point = point;//位置
				this.init = function() { //发射的烟花初始化 设置从屏幕最低端发射 随机颜色
					this.ele = document.createElement("div");
					this.ele.className = "star";
					this.ele.style.backgroundColor = "#" + randomcolor();
					this.ele.style.left = this.point.x + "px";
					this.ele.style.top = document.body.offsetHeight + "px";
					document.body.appendChild(this.ele);
				}
				this.init();
			}
			Fire.prototype.launch = function() { //发射
					startMove(this.ele, {
						top: this.point.y,
						height: 6
					}, ()=>{ //移动完成的回调函数
						this.over(); //删除烟花
						var r = randomInt(30, 50);
						for(var i = 0; i < r; i++) { //创建爆炸需要的烟花
							new Spark(this.point).init().go(); //调用爆炸方法 链式调用
						}
					});
				}
			Fire.prototype.over = function() {
					this.ele.remove();
				}

			function Spark(e) {
				var self = this;//除了使用箭头函数外，也可以将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>