JS寫的小游戲，網頁泡泡龍

2024-09-05 12:20:58

字體：大中小

來源：轉載

供稿：網友

JS寫的小游戲，網頁泡泡龍，雖然不是太完美，但做為JS愛好者，能寫出游戲也很不錯了，希望JavaScript愛好者們共同參考一下，共同提高。

<html><head>    <title>網頁游戲-泡泡龍</title>    <style type="text/css">        *{padding:0px;margin:0px}	hr{width:2px;height:2px;}	#a{width:502px;height:602px;border:1px solid #000;position:absolute;left:50px;top:50px;}	#a div,hr,span{position:absolute;}    </style>    <script type="text/javascript">	function aa(id){		this.time=null;		this.id=document.getElementById(id);		this.r=25;		this.w=500;		this.h=600;		this.idd=null;		this.ar=new Array();		this.v=270;		this.color=new Array("#00ff00","#0000ff","#ff0000","#854521");		this.x=this.w/2;		this.y=this.h-this.r;		var txt="";		this.c=null;		this.n=0;		this.jo=0;		for(i=0;i<50;i++){			txt+="<hr style='top:"+Math.sin(Math.PI*this.v/180)*i+"px;left:"+Math.cos(Math.PI*this.v/180)*i+"px;'>";		}		this.id.innerHTML+="<span style='left:"+this.x+"px;top:"+(this.h-this.r)+"px;'>"+txt+"</span>";	}	aa.prototype.add=function(){		var txt="";		this.c=Math.ceil(Math.random()*4)-1;		for(i=0;i<360;i++){			txt+="<hr style='color:"+this.color[this.c]+";top:" + Math.cos(i*Math.PI/180)*this.r + "px;left:" + Math.sin(i*Math.PI/180)*this.r + "px;'>";		}		this.id.innerHTML+="<div style='top:"+this.y+"px;left:"+this.x+"px;'>"+txt+"</div>";				this.idd=this.id.getElementsByTagName("div")[this.ar.length];	}	aa.prototype.go=function(){		var tt=true;		var objthis=this;		var u=(Math.cos(Math.PI*this.v/180)*4)/(Math.sin(Math.PI*this.v/180)*4);		this.x=this.x+Math.cos(Math.PI*this.v/180)*3;		this.y=this.y+Math.sin(Math.PI*this.v/180)*3;		if(this.x<this.r){this.y=this.y+(this.x-this.r)/u;this.x=this.r;this.v=360-this.v+180}		if(this.x>this.w-this.r){this.y=this.y+(this.w-this.r-this.x)/u;this.x=this.w-this.r;this.v=360-this.v+180}		if(this.y<this.r){			this.y=this.r;			var tt=false;					}		this.idd.style.left=this.x+"px";		this.idd.style.top=this.y+"px";		if(tt){			if(this.tf()){				setTimeout(function(){objthis.go()},1);			}else{				this.ti();			}		}else{			this.ggg();		}			}	aa.prototype.ggg=function(){			this.v=270;			this.ar.push(new Array(this.x,this.y,this.c));			this.x=this.w/2;			this.y=this.h-this.r;			this.c=Math.ceil(Math.random()*4)-1;			this.sz();			this.hh();			this.add();	}		aa.prototype.sz=function(){		var j=new Array();		for(i=0;i<this.ar.length;i++){			for(var a=i+1;a<this.ar.length;a++){				if(this.ar[i][2]==this.ar[a][2]){					var xv=this.ar[a][0]-this.ar[i][0];					var yv=this.ar[a][1]-this.ar[i][1];					if(Math.sqrt(xv*xv+yv*yv)<=this.r*2+1){j.push(new Array(i,a));}				}			}		}		if(j.length>1){this.uo(j)};	}	aa.prototype.hi=function(a){		if(this.x==this.w/2 && this.y==this.h-this.r){			if(a==37){				this.v-=1;				if(this.v==190){this.v++}				this.hh();			}else if(a==39){				this.v+=1;				this.hh();				if(this.v==350){this.v--}			}else if(a==38){this.go()}		}	}	aa.prototype.hh=function(){		var o=this.id.getElementsByTagName("span")[0].getElementsByTagName("hr");		for(i=0;i<50;i++){			o[i].style.left=Math.cos(Math.PI*this.v/180)*i+"px";			o[i].style.top=Math.sin(Math.PI*this.v/180)*i+"px";		}	}	aa.prototype.tf=function(a){		for(i=0;i<this.ar.length;i++){			if(arguments.length==1){if(arguments[0]==i){continue;}}			var xv=this.ar[i][0]-this.x;			var yv=this.ar[i][1]-this.y;			if(Math.sqrt(xv*xv+yv*yv)<=this.r*2+1){				this.n=i;				return false;			}		}		return true;	}	aa.prototype.ti=function(){		var xv=this.ar[this.n][0]-this.x;		var yv=this.ar[this.n][1]-this.y;		var d=Math.acos(xv/Math.sqrt(xv*xv+yv*yv))*180/Math.PI*-1;		var c=this.v-d;		this.jo=Math.sin(Math.PI*c/180)*80;		var c=180+this.v-c;		this.oo(c);			}	aa.prototype.oo=function(a){		var objthis=this;		var c=a-this.jo*0.1;		this.jo=this.jo-this.jo*0.1;		this.x=Math.cos(c*Math.PI/180)*this.r*2+this.ar[this.n][0];		this.y=Math.sin(c*Math.PI/180)*this.r*2+this.ar[this.n][1];		this.idd.style.left=this.x+"px";		this.idd.style.top=this.y+"px";		if(this.tf(this.n)){			if(Math.abs(this.jo)<0.1){				this.jo=0;				this.hd(c);			}else{				setTimeout(function(){objthis.oo(c)},10);			}		}else{this.ggg();}	}	aa.prototype.hd=function(a){		var objthis=this;		var v=(90-a)*0.05;		this.jo+=v;		this.jo*=0.95;		var c=a+this.jo;		this.x=Math.cos(c*Math.PI/180)*this.r*2+this.ar[this.n][0];		this.y=Math.sin(c*Math.PI/180)*this.r*2+this.ar[this.n][1];		this.idd.style.left=this.x+"px";		this.idd.style.top=this.y+"px";		if(this.tf(this.n)){			if(Math.abs(this.jo)>0.01){				setTimeout(function(){objthis.hd(c)},10);			}else{this.ggg()}		}else{this.ggg();}	}	aa.prototype.uo=function(a){		var av=new Array(a.shift());		while(a.length!=0){			var tt=true;			for(ii=0;ii=3){				for(ii=0;ii</head><body onkeydown="xa.hi(event.keyCode | event.which)"><div   class="zrdpjhx"   id="a"></div><script type="text/javascript">	var xa=new aa("a");	xa.add();</script></body></html>

上一篇：JavaScript猜數字游戲

下一篇：JavaScript 過河游戲