原生js实现一个坦克大战游戏代码
代码语言:html
所属分类:游戏
代码描述:原生js实现一个坦克大战游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{ margin: 0; padding: 0; } body{ max-width: 500px; height: 60vh; overflow: hidden; position: relative; border: 1px solid red; margin: 0 auto; } .tank,.enemy{ width: 16px; height: 16px; background-color: rgb(66, 218, 104); position: relative; position: absolute; top:calc(100% - 35px); left: 0; transform: rotate(0); } .tank .tube,.enemy .enemy-tube{ width: 5px; height: 30%; position: absolute; left: 50%; transform: translateX(-50%); top: -30%; background-color: rgb(66, 218, 104); } .cannonball{ width: 3px; height: 3px; position: absolute; background-color: rgb(255, 0, 0); } .background{ width: 100%; height: 100%; border-collapse: collapse; background-color: orange; } .background tr{ width: 100%; } .background tr td{ background-color: #000; height: 10px; width: 10px; border: 3px solid transparent; } .background tr .wall{ background-color: red; position: relative; border: 3px solid orange; } .enemy{ top: 0; left: 50%; transform: translateX(-50%); background-color: aqua; } .enemy .enemy-tube{ background-color: aqua; color: transparent; } .background tr .base{ background: rgb(11, 238, 30) ; } .background tr .Invincible{ background: rgb(196, 196, 5) ; } .surplus{ position: relative; top: 50px; } .surplus span{ color: red; font-size: 20px; } </style> </head> <body> <table class="background"></table> <div class="tank"> <div class="tube"></div> </div> <div class="surplus"> 剩余敌人:<span id="surplus"></span> </div> <div class="tips"> ↑↓←→ 空格 </div> <script> class person{ constructor(){ this.el={ //存放标签 tank:document.querySelector(".tank"), tube:document.querySelector(".tube"), background:document.querySelector(".background"), enemyArr:[] }, this.timeID={ //计时器 walkId:0, launchId:0, EMId:0, EMPId:0 }, this.condition={ //判断条件 direction:"ArrowUp", Level:0, enemyDirection:"ArrowUp", surplus:12 } } css(el,c1,c2){ //元素、属性、属性值 el.style[c1]=c2; return this; } show(el){ el.style.display="block" return this } hide(el){ el.style.display="none" return this } }; const TankBattle = new person(); //构造实例 const data={ //存放一些信息 ArrowUp:{ name:"上", rotate:"rotate(0)", //旋转 cannonball:{ //位置 left:'(left+(width/2-2))+"px"', top:'(top-5) +"px"' } }, ArrowDown:{ name:"下", rotate:"rotate(180deg)", cannonball:{ left:'(left+(width/2)-2)+"px"', top:'top+height +"px"' } }, ArrowLeft:{ name:"左", rotate:"rotate(270deg)", cannonball:{ left:'left+"px"', top:'(top+(height/2)-2)+"px"' } }, ArrowRight:{ name:"右", rotate:"rotate(90deg)", cannonball:{ left:'(left+(width))+"px"', top:'(top+(height/2)-2) +"px"' } }, Wall:[ [ " e e ", " e e ", "ooooo eeee ooooo", "ooooo ooooo", " ", " ", " ", " ", " oooo ooooo oooo ", " oooo ooooo oooo ", " oooo ooooo oooo ", " ", " oooooo oooooo ", " oooo oooo ", " oo oo ", " o o ", " o o o o ", "ooooo o o ooooo", "ooooo ooooo", "ooooo ooooo", " o ooooooo o ", " o o ", " ", " ", " ", "ooooooo oooooooo", " ", " oooo ", " oxxo ", " oxxo ", ] ] } const p=person.prototype; document.querySelector("#surplus").innerHTML=TankBattle.condition.surplus p.walk=function(){ //移动、事件 let count=0, //计数,长按无效 tank=this.el.tank, down=e=>{ count++ if(count>1) return; e.key===" "?this.cannonball(tank,this.direction,"own"):false; for(k in data){ if(k===e.key){ //判断上下左右 this.setInter(tank,data[k].name,12); this.css(tank,"transform",data[k].rotate); this.direction=data[k] }; }; }, up=e=>{ count=0; clearInterval(this.timeID.walkId) }; document.onkeydown = down; //键盘按下 document.onkeyup = up; //键盘抬起 }; p.setInter=function(el,post,dalay){ //移动、执行 let {top,left,width,height}=this.position(el), body=this.position(document.body), falg=false, count=0; this.timeID.walkId=setInterval(() => { this.collisionDetection(document.querySelectorAll(".wall"),top,left,height,width,()=>{ count++ falg=true; if(count==1){ //每当符合条件的时候就让相应的方向-2像素,并且只减一次,防止卡死 this.retreat(post,el,top,left) }; }); this.collisionDetection(document.querySelectorAll(".enemy"),top,left,height,width,()=>{ falg=true; count++ if(count==1){ this.retreat(post,el,top,left) }; }); this.collisionDetection(document.querySelectorAll(".Invincible"),top,left,height,width,()=>{ falg=true; count++ if(count==1){ this.retreat(post,el,top,left) }; }); if(falg) return ; if(post==="上"|| post==="下"){ post==="上" && top>0 ? top-=1:false; post==="下" && top<(body.height-height) ? top+=1:false; this.css(el,"top",top+"px"); }else{ post==="左" && left>0 ? left-=1:false; post==="右" && left<(body.width-width) ? left+=1:false; this.css(el,"left",left+"px"); }; }, dalay); }; p.retreat=function(post,el,top,left){ //后退 if(post==="上"|| post==="下"){ post==="上"? top+=3:false; post==="下"? top-=3:false; this.css(el,"top",top+"px"); }else{ post==="左"? left+=3:false; post==="右"? left-=3:false; this.css(el,"left",left+"px"); }; } p.cannonball=function(el,post,type){ //生成炮弹 let {top,left,width,height}=this.position(el); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0