网页版泡泡龙_基于JavaScript编写泡泡龙游戏特效

以前，烈火给大家介绍过很多JS编写的网页版小游戏，例如：JS网页版连连看、Bubble Breaker、星际争霸等。今天我们再来看一个样式不是太完美的小游戏——网页泡泡龙，很多办公室一族都喜欢玩的哦。

另外，作为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<av.length;ii++){ if(this.ino(av[ii],a[0][0])){ if(this.ino(av[ii],a[0][1])){}else{av[ii].push(a[0][1]);} a.shift(); tt=false; }else if(this.ino(av[ii],a[0][1])){ av[ii].push(a[0][0]); a.shift(); tt=false; } } if(tt){av.push(a.shift())}; } var obj=new Array(); var va=new Array(); for(i=0;i<av.length;i++){ if(av[i].length>=3){ for(ii=0;ii<av[i].length;ii++){ obj.push(this.id.getElementsByTagName("div")[av[i][ii]]); va.push(av[i][ii]); } } } var ooo=new Array(); for(i=0;i<obj.length;i++){ obj[i].parentNode.removeChild(obj[i]); } for(i=0;i<this.ar.length;i++){ var jjja=true; for(ii=0;ii<va.length;ii++){ if(va[ii]==i){jjja=false;} } if(jjja){ooo.push(this.ar[i])} } this.ar=ooo; } aa.prototype.ino=function(a,c){ for(i=0;i<a.length;i++){ if(a[i]==c){return true;} } return false; } </script> </head> <body onkeydown="xa.hi(event.keyCode | event.which)"> <div id="a"></div> <script type="text/javascript"> var xa=new aa("a"); xa.add(); </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!