原型方法烟花

最新推荐文章于 2025-06-12 23:47:50 发布

原创最新推荐文章于 2025-06-12 23:47:50 发布 · 309 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			left: 0;
			top: 0;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height: 10px;
			position: absolute;
			border-radius: 50%;
		}
	</style>

</head>
<body>
	
	<div class="container">
		
	</div>

</body>
</html>	
<script src="../../animate10.0.js"></script>
<script src="../../public.js"></script>
<script>
	//在container中点击
	//创建一个烟花在container中，
	//烟花向上移动
	//移动到鼠标点击的位置后爆炸
	var container=document.getElementsByClassName("container")[0];
	container.onclick=function(e){
		var e=e||event;
		var x=e.offsetX;
		var y=e.offsetY;
		new FireWork(x,y);
	}
	function FireWork(x,y){
		this.x=x;
		this.y=y;
		this.init();
	}
	
	FireWork.prototype.init=function(){
		this.createFire();
	}
	FireWork.prototype.createFire=function(){
	this.fire=document.createElement("div");
	container.appendChild(this.fire);
	this.fire.className="fire";
	this.fire.style.left=this.x-this.fire.offsetWidth/2+"px";
	this.fire.style.background="red";
	this.fireMove();
	}
	
	FireWork.prototype.fireMove=function(){
		this.fireTimer=setInterval(function(){
			this.fire.style.top=this.fire.offsetTop-5+"px";
			if(this.fire.offsetTop<=this.y){
				clearInterval(this.fireTimer);
				this.fire.remove();
				this.fireBomb();
			}
		}.bind(this),10);
	}
	FireWork.prototype.fireBomb=function(){
		var r=getRand(50,200);
		for(var i=0;i<20;i++){
			var div=document.createElement("div");
			div.className="small-fire";
			container.appendChild(div);
			div.style.left=this.x-div.offsetWidth/2+"px";
			div.style.top=this.y+"px";
			div.style.background=getRandColor();
			this.bomb(div,r,i);
		}
	}
	
	FireWork.prototype.bomb=function(div,r,i){
		var l=this.x+Math.round(Math.cos(i*18*Math.PI/180)*r);
		var t=this.y-Math.round(Math.sin(i*18*Math.PI/180)*r);
		animate(div,{
			left:l,
			top:t
		},function(){
			div.remove();
		})
	}
</script>

原型方法 烟花

原型方法烟花