欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS--烟花效果

程序员文章站 2022-06-01 18:38:29
...
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#container{
			width: 80%;
			height: 500px;
			margin: 30px auto;
			background-color: #000000;
			border: 2px solid #000000;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 5px;
			height: 20px;
			position: absolute;
			bottom: 0;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			border-bottom-left-radius: 60%;
			border-bottom-right-radius: 60%;
		}
		.s_fire{
			width: 5px;
			height: 5px;
			border-radius: 50%;
			position: absolute;
		}
	</style>
		
</head>
<body>
	<div id="container"></div>
</body>
<script src="move.2.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	class Fire{
		constructor(pos) {
		    this.cont=document.getElementById("container");
			this.x=pos.x;
			this.y=pos.y;
		}
		create(){
			this.f=document.createElement("div");
			this.f.className="fire";
			this.f.style.backgroundColor=randColor();
			this.cont.appendChild(this.f);
			this.f.style.left=this.x+"px";
			this.move();
		}
		move(){
			move(this.f,{top:this.y},()=>{
				this.f.remove();
				var sFireNum=rand(15,30);
				var r=rand(150,300);
				for(var i=0;i<sFireNum;i++){
					var sF=new SmallFire({
						cont:this.cont,
						x:this.x,
						y:this.y,
						r:r,
						i:i,
						sum:sFireNum
					});
					sF.create();
				}
			});
		}
	}
	class SmallFire{
		constructor(obj) {
			this.cont=obj.cont;
			this.x=obj.x;
			this.y=obj.y;
			this.r=obj.r;
			this.i=obj.i;
			this.sum=obj.sum;		    
		}
		create(){
			this.f=document.createElement("div");
			this.f.className="s_fire";
			this.f.style.backgroundColor=randColor();
			this.cont.appendChild(this.f);
			this.f.style.left=this.x+"px";
			this.f.style.top=this.y+"px";
			this.move();
		}
		move(){
			move(this.f,{ 
				left:parseInt(Math.cos( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.x,
                top:parseInt(Math.sin( Math.PI/180 * (360/this.sum*this.i) ) * this.r) + this.y,
				},()=>{
					this.f.remove()
				});
		}
	}
	var ocant=document.getElementById("container");
	ocant.onclick=function(eve){
		var e=eve||window.evevt;
		var x=e.pageX-this.offsetLeft;
		var y=e.pageY-this.offsetTop;
		var f=new Fire({
			x:x,
			y:y
		});
		f.create();
	}	
	
	function rand(min,max){
		return Math.round(Math.random()*(max-min)+min);
	}
	function randColor(){
		return`rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;
	}
</script>
</html>

JS--烟花效果