js实现坦克大战游戏

2023-07-31 18:19:05 54

本文实例为大家分享了js实现坦克大战游戏的具体代码，供大家参考，具体内容如下




tank

body{
margin:0px;
padding:0px;
border:0px;
}

.map{
position:absolute;
top:30px;
width:390px;
height:390px;
left:50%;
margin-left:-200px;
border:9pxsolidorange;
background-color:#8B8989;
}

.mapchild{
position:absolute;
background-size:cover;
}

#ifo{
position:absolute;
top:30px;
width:418px;
height:418px;
left:50%;
margin-left:-200px;
color:green;
text-align:center;
background-color:#FAEBD7;
z-index:10;
}





按键说明：
T：开始游戏(游戏开始后无效)

P:暂停游戏

W、S、A、D：上、下、左、右

ENTER：发射子弹

//常量及全局变量的定义-------------------------------------------- constTANK_W=30; constTANK_H=30; constMAP_W=TANK_W*13; constMAP_H=TANK_H*13; constBULLENT_W=7.5; constBULLENT_H=7.5; constWALL_W=15; constWALL_H=15; constBULLENT_FREQ=30; constTANK_FREQ=200; constTANK_STEP=7.5; //当前文件同目录 constIMG_PATH="tankImage/"; constMUSIC_PATH="tankMusic/"; //87=W;83=S;65=A;68=D constKEYCODE_U=87; constKEYCODE_D=83; constKEYCODE_L=65; constKEYCODE_R=68; //坦克移动不响应时间 constNORESPONSEFIRETIME=200; constNORESPONSETANKMOVETIME=TANK_FREQ+100; //我方坦克开火、移动状态 noresponseFire=false; noresponseTankMove=false; //游戏状态 state="READY"; //frequency频率 //对象id vartank_id=0; varbullent_id=0; varwall_id=0; //敌方坦克总数 varemTankNum=20; varmeTankNum=3; //我方坦克对象 varmytank=null; vartankArray=newArray(); varbullentArray=newArray(); //因为功能性砖块会与普通静态砖块重叠所以必须另外存储 varfunctionWallArray=newArray(); //地图width=390，地图中最小的静物wall宽度高度=15，所以数组的一维二维均为390/15=26 //先声明一维 varnoMoveArray=newArray(4); for(vari=0;iMAP_W) x_r=MAP_W; if(y_u<0) y_u=0; if(y_d>MAP_H) y_d=MAP_H; for(vari=Math.floor(x_l/largeWidth);i=x_ri|y_d<=y_ui|y_u>=y_di)){ //console.log(obj.id+"与"+obji.id+"相撞了") iscoll=true; }else{ iscoll=false; } returniscoll; } //碰撞处理函数 functiondelColl(obj,obji){ varcollresult; switch(obj.type){ case"bullent": switch(obji.type){ case"tank": switch(obj.belongs){ case"me": switch(obji.belongs){ case"me": collresult="MOVE"; break; case"em": collresult="DELETE"; playMusic("hit"); animation("blast",obji.x,obji.y); delObj(obji); break; } ;break; case"em": switch(obji.belongs){ case"me": collresult="DELETE"; playMusic("hit"); delObj(obji); break; case"em": collresult="MOVE"; break; } ;break; } break; case"wall": switch(obji.selfType){ case"steel": collresult="DELETE"; playMusic("hit"); break; case"wall": collresult="DELETE"; playMusic("hit"); delObj(obji); break; case"star": collresult="DELETE"; playMusic("hit"); delObj(obji); break; } ;break; case"bullent": switch(obji.belongs){ default: collresult="MOVE"; break; } ;break; } ;break; case"tank": switch(obji.type){ case"tank": collresult="NOMOVE"; break; case"wall": switch(obji.selfType){ case"wall": case"steel": collresult="NOMOVE"; break; case"timer": collresult="MOVE"; timer(); delObj(obji); break; case"bomb": collresult="MOVE"; bomb(); delObj(obji); break; case"stronghome": collresult="MOVE"; delObj(obji); StrongHome(); break; } ;break; case"bullent": switch(obj.belongs){ case"me": switch(obji.belongs){ case"me": collresult="MOVE"; break; case"em": collresult="DELETE"; break; } ;break; case"em": switch(obji.belongs){ case"me": collresult="DELETE"; delObj(obji); break; case"em": collresult="MOVE"; break; } ;break; } ;break; } ;break; } //console.log(obj.id+"与"+obji.id+"相撞了"+"结果="+collresult); returncollresult; } //碰撞检测与处理完------------------------------------------------------------------------------------ //坦克与子弹移动函数----------------------------------------------------------------------------------- //移动函数 functionmove(obj,newDir){ varoldDir=obj.dir; obj.dir=newDir; if(state!="RUN"){ //if(obj.type!="bullent"){ //return; //} return; } //新的方向与坦克原来方向相同就前进，否则改变坦克方向 if(obj.dir!=oldDir&&obj.type=="tank"){ showDOM(obj.id,obj.width,obj.height,obj.x,obj.y,obj.getImg()); return; } varx=0 ,y=0; varstep=TANK_STEP; switch(obj.dir){ case"L": x=-step; break; case"R": x=step; break; case"U": y=-step; break; case"D": y=step; break; } //粗糙的深拷贝 varobjString=JSON.stringify(obj); varcheckObj=JSON.parse(objString); checkObj.x+=x; checkObj.y+=y; varcollresult=collision(checkObj); //出界检测; if(checkObj.x<0||(checkObj.x+checkObj.width)>MAP_W||checkObj.y<0||(checkObj.y+checkObj.height)>MAP_H){ if(checkObj.type=="tank"){ showDOM(obj.id,obj.width,obj.height,obj.x,obj.y,obj.getImg()); return; } if(checkObj.type=="bullent"){ delObj(obj); return; } //调用碰撞检测及处理函数给出移动结果 }elseif(collresult=="MOVE"){ //if(obj.type=="tank"){ //movingFrame(obj,checkObj.x,checkObj.y) movingFrame(obj,checkObj.x,checkObj.y); //} //console.log("目标y="+checkTank.y) obj.x=checkObj.x; obj.y=checkObj.y; //if(obj.type=="bullent"){ //showDOM(obj.id,obj.width,obj.height,obj.x,obj.y,obj.getImg()); //} //showDOM(obj.id,obj.width,obj.height,obj.x,obj.y,obj.getImg()); }elseif(collresult=="DELETE"){ delObj(obj); }elseif(collresult=="NOMOVE"){ showDOM(obj.id,obj.width,obj.height,obj.x,obj.y,obj.getImg()); //如果是敌方坦克就给他一个相反的方向，防止它撞墙不回头 if(obj.belongs=="em"&&obj.type=="tank"){} return; } } //反方向函数 //返回一个与输入方向相反的方向 functionnegativeDir(dir){ switch(dir){ case"L": return"R"; break; case"R": return"L"; break; case"U": return"D"; break; case"D": return"U"; break; } } //自动移动函数 //子弹坦克所特有 functionautoMove(obj){ //console.log("游戏状态="+state) varitFreq=BULLENT_FREQ; varitType=obj.type; varitId=obj.id; varitDir=obj.dir; if(obj.type=="tank"){ itFreq=TANK_FREQ; } obj.t=setInterval(function(){ if(itType=="tank"){ varitObj=obj; varturn=randState(); if(turn=="Fire"){ //console.log(obj.id+""+obj.t) createBullent(itObj); return; }elseif(turn=="none"){ itDir=itObj.dir; }else{ itDir=turn; } } move(obj,itDir); },itFreq); } //简化版移动框架 //为了使坦克的移动更平滑;使用移动框架的前提：必须在t时间内屏蔽坦克的任何方向改变 //因为js浮点数的处理很复杂，这里仅仅满足x，y为7.5的倍数，step为7.5 functionmovingFrame(obj,x,y){ varobjDom=document.getElementById(obj.id); vart=TANK_FREQ; varx1=obj.x; vary1=obj.y; varstep_x=div(sub(x,x1),t/10); varstep_y=div(sub(y,y1),t/10); varaaa=1; vartimes=1; vartank_t=setInterval(function(){ if(times==t/10){ clearInterval(tank_t); } times++; x1=add(x1,step_x); y1=add(y1,step_y); objDom.style.left=x1+"px"; objDom.style.top=y1+"px"; },10); //浮点数的加减乘除 functionadd(a,b){ varc,d,e; try{ c=a.toString().split(".")[1].length; }catch(f){ c=0; } try{ d=b.toString().split(".")[1].length; }catch(f){ d=0; } returne=Math.pow(10,Math.max(c,d)), (mul(a,e)+mul(b,e))/e; } functionsub(a,b){ varc,d,e; try{ c=a.toString().split(".")[1].length; }catch(f){ c=0; } try{ d=b.toString().split(".")[1].length; }catch(f){ d=0; } returne=Math.pow(10,Math.max(c,d)), (mul(a,e)-mul(b,e))/e; } functionmul(a,b){ varc=0 ,d=a.toString() ,e=b.toString(); try{ c+=d.split(".")[1].length; }catch(f){} try{ c+=e.split(".")[1].length; }catch(f){} returnNumber(d.replace(".",""))*Number(e.replace(".",""))/Math.pow(10,c); } functiondiv(a,b){ varc,d,e=0,f=0; try{ e=a.toString().split(".")[1].length; }catch(g){} try{ f=b.toString().split(".")[1].length; }catch(g){} returnc=Number(a.toString().replace(".","")), d=Number(b.toString().replace(".","")), mul(c/d,Math.pow(10,f-e)); } } //tank自动移动定时器的清除与重建函数 //itState表示清除、建立定时器 functionobjTimer(itState){ for(vari=0;i"); audio.src=MUSIC_PATH+src+".wav"; //路径 audio.play(); } //闪烁函数 functionflickerObj(id,interval){ varit=document.getElementById(id); for(leti=1;i<=3;i++){ setTimeout(function(){ vardisplay=i%2==0?"none":"block"; it.style.display=display; //it.style.display="none"; },(interval/3)*i); } } //创建坦克/坦克爆炸动画函数 //animationType可取born、blast分别表示坦克出生以及子弹爆炸 functionanimation(animationType,x,y){ //这里给动画所用原子设置一个随机数id，防止两幅动画使用id一样造成只有一幅动画的情况 //这样仍可能使用一副动画，不过可能为4/1000 animationTypeid=Math.random()*1000; varid=animationType+animationTypeid; //显示次数 vartimes=animationType=="born"?3:1; //显示频率 varfre=animationType=="born"?1000:300; //varwidth=animationType=="born"?TANK_W:BULLENT_W; //varheight=animationType=="born"?TANK_H:BULLENT_H; varwidth=TANK_W; varheight=TANK_H; //创建动画原子并闪烁 for(leti=1;i<=times;i++){ setTimeout(function(){ createDOM(id+i,width,height,x,y,animationType+i); flickerObj(id+i,fre/times); },fre*i); } //闪烁完毕删除闪烁原子 setTimeout(function(){ for(leti=1;i<=times;i++){ delDOM(id+i); } },fre*(times+1)); } //特效函数群完-------------------------------------------------------------------------------------- //坦克大战主逻辑----------------------------------------------------------------------------------- ifo("READY"); //坦克大战主逻辑完--------------------------------------------------------------------------------- //键盘监听及触发处理开始------------------------------------------------------------------------------ noresponseFire=false; noresponseTankMove=false; document.onkeydown=function(event){ //如果游戏状态为结束就屏蔽所有按键 if(state=="OVER"){ return; } varmyTank=tankArray[0]; varnewDir; //87=W;83=S;65=A;68=D code=event.keyCode; //可以通过在此输出code检测键盘的键值码 //console.log(code) if(code==65&&state=="RUN"&&mytank!=null&&noresponseTankMove==false){ setNOresponse("TankMove",NORESPONSEFIRETIME); newDir="L"; }elseif(code==87&&state=="RUN"&&mytank!=null&&noresponseTankMove==false){ console.log(noresponseTankMove) setNOresponse("TankMove",NORESPONSEFIRETIME); newDir="U"; }elseif(code==68&&state=="RUN"&&mytank!=null&&noresponseTankMove==false){ setNOresponse("TankMove",NORESPONSEFIRETIME); newDir="R"; }elseif(code==83&&state=="RUN"&&mytank!=null&&noresponseTankMove==false){ setNOresponse("TankMove",NORESPONSEFIRETIME); newDir="D"; //T84开始游戏 }elseif(code==84&&state=="READY"){ runGame(map1); return; //发射子弹Enter13 }elseif(code==13&&state=="RUN"&&mytank!=null&&noresponseFire==false){ //按键屏蔽，一定时间内发射子弹无效 createBullent(myTank); noresponseFire=true; //屏蔽P键300ms setTimeout(function(){ noresponseFire=false; },NORESPONSEFIRETIME); return; //屏蔽其他无关按键 //P80表示暂停 }elseif(code==80&&(state=="RUN"||state=="STOP")){ stopGame(); return; //屏蔽其他无关按键 }else{ return; } move(myTank,newDir); } functionsetNOresponse(noresponseState,t){ if(noresponseState=="TankMove"){ noresponseTankMove=true; //屏蔽P键300ms setTimeout(function(){ noresponseTankMove=false; },t); } } //键盘监听及触发处理完------------------------------------------------------------------------------ //地图1------------------------------------------------------------------------------------------ varmap1=function(){ //老巢 newwall("star",15*12,15*24,"home"); newwall("wall",15*11,15*25,"home"); newwall("wall",15*11,15*24,"home"); newwall("wall",15*11,15*23,"home"); newwall("wall",15*12,15*23,"home"); newwall("wall",15*13,15*23,"home"); newwall("wall",15*14,15*25,"home"); newwall("wall",15*14,15*24,"home"); newwall("wall",15*14,15*23,"home"); //老巢完毕 //所有普通wall for(vari=1;i<=11;i+=2){ for(varj=2;j<24;j++){ if(j>=10&&j<14){ continue; } if(i==5||i==7){ if(j>8&&j<=11) continue; if(j>20) continue; }else{ if(j>=14&&j<16){ continue; } } newwall("wall",15*2*i,15*j,"ordinary"); newwall("wall",15*2*i+15,15*j,"ordinary"); } } for(vari=0;i<6;i++){ for(varj=0;j<2;j++){ newwall("wall",15*i+15*10,15*11+15*j,"ordinary"); if(i>3) continue; newwall("wall",15*i+15*4,15*12+15*j,"ordinary"); newwall("wall",15*i+15*18,15*12+15*j,"ordinary"); } } newwall("wall",15*12,15*15,"ordinary"); newwall("wall",15*12,15*16,"ordinary"); newwall("wall",15*13,15*15,"ordinary"); newwall("wall",15*13,15*16,"ordinary"); //steel newwall("steel",15*0,15*13,"ordinary"); newwall("steel",15*1,15*13,"ordinary"); newwall("steel",15*24,15*13,"ordinary"); newwall("steel",15*25,15*13,"ordinary"); newwall("steel",15*12,15*6,"ordinary"); newwall("steel",15*12,15*7,"ordinary"); newwall("steel",15*13,15*6,"ordinary"); newwall("steel",15*13,15*7,"ordinary"); } //地图1完---------------------------------------------------------

更多关于Js游戏的精彩文章，请查看专题：《JavaScript经典游戏玩不停》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

js实现坦克大战游戏

按键说明：

热门推荐

随机推荐