JS--烟花效果

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

wanguo_S

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

阅读量194

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/w_guo_S/article/details/104660903

本文详细介绍了如何使用JavaScript创建一个绚丽的烟花效果。通过绘制图形、设置动画和模拟物理运动，使得烟花在屏幕上绽放，为网页增添动态美感。无论是初学者还是有经验的开发者，都能从中学到JavaScript动画及图形绘制的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

在这里插入图片描述