js如何实现坦克大战游戏

小编给大家分享一下js如何实现坦克大战游戏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

目前创新互联已为数千家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、五台网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

具体内容如下



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

  .map {
  position: absolute;
  top: 30px;
  width: 390px;
  height: 390px;
  left: 50%;
  margin-left: -200px;
  border: 9px solid orange;
  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：发射子弹

//常量及全局变量的定义-------------------------------------------- const TANK_W = 30; const TANK_H = 30; const MAP_W = TANK_W * 13; const MAP_H = TANK_H * 13; const BULLENT_W = 7.5; const BULLENT_H = 7.5; const WALL_W = 15; const WALL_H = 15; const BULLENT_FREQ = 30; const TANK_FREQ = 200; const TANK_STEP = 7.5; //当前文件同目录 const IMG_PATH = "tankImage/"; const MUSIC_PATH = "tankMusic/"; // 87=W;83=S;65=A;68=D const KEYCODE_U = 87; const KEYCODE_D = 83; const KEYCODE_L = 65; const KEYCODE_R = 68; //坦克移动不响应时间 const NORESPONSEFIRETIME = 200; const NORESPONSETANKMOVETIME = TANK_FREQ + 100; //我方坦克开火、移动状态 noresponseFire = false; noresponseTankMove = false; //游戏状态 state = "READY"; //frequency频率 //对象id var tank_id = 0; var bullent_id = 0; var wall_id = 0; //敌方坦克总数 var emTankNum = 20; var meTankNum = 3; //我方坦克对象 var mytank = null; var tankArray = new Array(); var bullentArray = new Array(); //因为功能性砖块会与普通静态砖块重叠所以必须另外存储 var functionWallArray = new Array(); //地图width=390，地图中最小的静物wall宽度高度=15，所以数组的一维二维均为390/15=26 //先声明一维 var noMoveArray = new Array(4); for (var i = 0; i < MAP_W / WALL_W; i++) { //一维长度 noMoveArray[i] = new Array(); //再声明二维 for (var j = 0; j < MAP_H / WALL_H; j++) { //二维长度 noMoveArray[i][j] = null; } } //常量及全局变量完-------------------------------------------------------------------------------- //对象的定义------------------------------------------------------------------------------------- //坦克对象 tank = function(selfType, x, y, belongs, dir) { //共有属性 this.id = "tank_" + tank_id++; this.type = "tank"; //selfType可取1、2、3表示一类坦克，二类坦克，三类坦克 this.selfType = selfType; this.x = x; this.y = y; this.belongs = belongs; this.dir = dir; this.width = TANK_W; this.height = TANK_H; this.life = this.selfType; //因为坦克的img与方向有关，每一次改变dir都会影响img，所以设置一个对象函数用于获取 this.getImg = function() { return img = this.belongs + "Tank" + this.selfType + this.dir; } //敌方坦克的自移动函数的setInterval的值t this.t; createDOM(this.id, this.width, this.height, this.x, this.y, this.getImg(), 2); //把生成的坦克对象存入移动对象数组 tankArray.push(this); if (belongs == "me") { mytank = this; meTankNum--; } //敌方坦克调用自移动函数 if (this.belongs == "em") { emTankNum--; //检测是否需要生成功能砖块 createFunctionWall(); autoMove(this); } } //子弹对象 bullent = function(selfType, x, y, belongs, dir) { //播放发射子弹音乐 playMusic("fire"); //共有属性 this.id = "bullent_" + bullent_id++; this.type = "bullent"; this.selfType = selfType; this.x = x; this.y = y; this.belongs = belongs; this.dir = dir; this.width = BULLENT_W; this.height = BULLENT_H; //为了与坦克的img保持一致，同样设置一个对象函数用于获取 this.getImg = function() { return img = this.type; } //子弹与敌方坦克特有属性，自移动的定时器 this.t; createDOM(this.id, this.width, this.height, this.x, this.y, this.getImg(), 1); //把生成的子弹对象存入移动对象数组 bullentArray.push(this); autoMove(this); } //墙对象 wall = function(selfType, x, y, belongs) { //共有属性 this.id = "wall_" + wall_id++; this.type = "wall"; //wall、steel、star、timer分别表示普通砖块、子弹不可打破砖块、我方老巢、定时器 this.selfType = selfType; this.x = x; this.y = y; //belongs取值home、ordinary、function分别表示老巢的砖块、一般砖块、功能性砖块 this.belongs = belongs; this.width; this.height; if (this.selfType == "star") { //设置全局变量star star = this; this.width = TANK_W; this.height = TANK_H; } else if (this.selfType != "star") { this.width = WALL_W; this.height = WALL_H; } //为了与坦克的img保持一致，同样设置一个对象函数用于获取 this.getImg = function() { return img = this.selfType; } var zIndex = belongs == "function" ? 3 : 2; createDOM(this.id, this.width, this.height, this.x, this.y, this.getImg(), zIndex); // if(n==13)console.log(this) //地图中所有的静物都是wall类型的，分为长宽15的wall、steel和长宽30的star；我们只需要存储15规格的，star只有一个不需要存储 if (this.belongs != "function") { noMoveArray[x / 15][y / 15] = this; } else { functionWallArray.push(this); } } //对象的定义完------------------------------------------------------------------------------------ //DOM对象创建与显示------------------------------------------------------------------------------- //总体说明：1、为了便于计算所有对象的width、height、x、y均不带px单位 // 创建DOM对象函数 function createDOM(id, width, height, x, y, img, zIndex) { var map = document.getElementById("map"); var it = document.createElement("div"); it.id = id; it.style.zIndex = zIndex; map.appendChild(it); showDOM(id, width, height, x, y, img); } //删除DOM对象函数 function delDOM(id) { var it = document.getElementById(id); map.removeChild(it); } //展示函数，根据obj的属性刷新对应的DOM function showDOM(id, width, height, x, y, img) { var it = document.getElementById(id); it.className = "mapchild"; it.style.cssText = "width:" + width + "px;height:" + height + "px;left:" + x + "px;top:" + y + "px;background-image:url('" + IMG_PATH + img + ".gif');"; } //DOM对象创建与显示完------------------------------------------------------------------------------- //对象的创建与销毁函数群----------------------------------------------------------------------------- //创建坦克函数 //因为坦克出现有一个动画，不能直接new tank生成 //new tank(3,15 * 8,15 * 24,"me","U") function createTank(selfType, belongs, x, y) { //先让创建动画显示 var emTank_x1 = 0 , emTank_x2 = 180; emTank_x3 = 360; var emTank_y = 0; var meTank_x = 15 * 8; var meTank_y = 15 * 24; //因为创建动画显示3s+销毁1s，所以需要在4s后创建坦克 //这里需要对出生的位置进行检测，防止坦克重叠 if (belongs == "me" && meTankNum != 0) { animation("born", 15 * 8, 15 * 24); //我方坦克显示位置固定 setTimeout(function() { var mytank = new tank(3,15 * 8,15 * 24,"me","U"); flickerObj(mytank.id); }, 4500); } if (belongs == "em" && emTankNum != 0) { animation("born", x, y); //我方坦克显示位置固定 setTimeout(function() { var emtank = new tank(1,x,y,"em","U"); flickerObj(emtank.id); }, 4500); } //判断指定位置是否有坦克 function isThereHaveTank(x, y) { if (tankArray.length == 0) { return false; } for (var i = 0; i < tankArray.length; i++) { return tankArray[i].x == x && tankArray[i].y == y; } } } //发射子弹函数 //根据发射子弹坦克位置和方向,生成一个子弹 function createBullent(obj) { var x, y; switch (obj.dir) { case "U": x = obj.x + 0.5 * obj.width - 0.5 * BULLENT_W; y = obj.y; break; case "D": x = obj.x + 0.5 * obj.width - 0.5 * BULLENT_W; y = obj.y + obj.height - BULLENT_H; break; case "L": x = obj.x; y = obj.y + 0.5 * obj.height - 0.5 * BULLENT_H; break; case "R": x = obj.x + obj.width - BULLENT_W; y = obj.y + 0.5 * obj.height - 0.5 * BULLENT_H; break; } new bullent("speed",x,y,obj.belongs,obj.dir); } //删除对象函数 //在html中删除元素，并将数组中的值赋值为null function delObj(obj) { if (obj.t != undefined) { clearInterval(obj.t); } switch (obj.type) { case "bullent": delDOM(obj.id); bullentArray.splice(bullentArray.indexOf(obj), 1); break; case "tank": if (--obj.life == 0) { switch (obj.belongs) { case "me": meTankNum == 0 ? gameOver() : createTank(3, null, null, "me", null); ;break; case "em": console.log("敌方坦克=" + emTankNum) if (emTankNum == 0) { console.log("victory"); } ;break; } //调用销毁坦克动画 animation("blast", obj.x, obj.y); delDOM(obj.id); delete tankArray[tankArray.indexOf(obj)]; if (obj.belongs == "me") { mytank = null; gameOver(); } //obj.life!=0 } else { obj.selfType = obj.life; showDOM(obj.id, obj.width, obj.height, obj.x, obj.y, obj.getImg()); } ;break; case "wall": if (obj.selfType == "star") { img = "destory"; showDOM(obj.id, obj.width, obj.height, obj.x, obj.y, img); gameOver(); } else if (obj.belongs == "function") { delDOM(obj.id); functionWallArray.splice(bullentArray.indexOf(obj), 1); } else { delDOM(obj.id); noMoveArray[obj.x / 15][obj.y / 15] = null; } ;break; } } //对象的创建与销毁函数群完--------------------------------------------------------------------------- //碰撞检测与处理------------------------------------------------------------------------------------ //获取可能碰撞的静态物体函数 //在存储静物的时候使用二维数组相当于将地图画成间距15的小格子，所有的静物均在小格子中，所以给定一个物体就可以得到包围它一圈的小格子； //这比遍历整个noMoveArray来的快的多 function getPossibleCollisionObj(obj) { var PossibleCollisionObjArray = new Array(); var largeWidth = WALL_W; var largeHeight = WALL_H; var x_l = obj.x - largeWidth; var x_r = obj.x + largeWidth + obj.width; var y_u = obj.y - largeHeight; var y_d = obj.y + largeHeight + obj.height; //计算出的左侧、右侧、上下侧均不能出地图 if (x_l < 0) x_l = 0; if (x_r > MAP_W) x_r = MAP_W; if (y_u < 0) y_u = 0; if (y_d > MAP_H) y_d = MAP_H; for (var i = Math.floor(x_l / largeWidth); i < Math.floor(x_r / largeWidth); i++) { for (var j = Math.floor(y_u / largeHeight); j < Math.floor(y_d / largeHeight); j++) { if (noMoveArray[i][j] != null) { PossibleCollisionObjArray.push(noMoveArray[i][j]); } } } //console.log(PossibleCollisionObjArray); return PossibleCollisionObjArray; } //碰撞检测及处理函数 function collision(obj) { //collresult有三个值，MOVE、DELETE、NOMOVE；move表示检测后的处理结果是继续移动（即使碰上了，有些也不需要处理），DELETE表示删除自身 //因为碰撞检测只存在与移动物体，而移动函数需要碰撞检测给出是否移动的结果，所以不能在碰撞处理中直接删除被检测物体 var collresult = "MOVE"; //单独检测是否碰撞老巢 //collresult = isCollision(obj, star) ? gameOver():"MOVE"; //检测功能性砖块 for (var i = 0; i < functionWallArray.length; i++) { if (functionWallArray[i] != null && isCollision(obj, functionWallArray[i])) { collresult = delColl(obj, functionWallArray[i]); } } //检测所有的静物；采用的是遍历所有静物 // for (var i = 0; i < noMoveArray.length; i++) { // for (var j = 0; j < noMoveArray[i].length; j++) { // if (noMoveArray[i][j] != null && isCollision(obj, noMoveArray[i][j])) { // collresult = delColl(obj, noMoveArray[i][j]); // } // } // } //检测所有的静物；采用的是遍历可能相撞的静物 var PossibleCollisionObjArray = getPossibleCollisionObj(obj); for (var i = 0; i < PossibleCollisionObjArray.length; i++) { if (isCollision(obj, PossibleCollisionObjArray[i])) { collresult = delColl(obj, PossibleCollisionObjArray[i]); } } //检测坦克 for (var i = 0; i < tankArray.length; i++) { //tankArray[i].id != obj.id 因为检测的时候的对象是通过拷贝得到的，它与真正的坦克的id一样 if (tankArray[i] != null && tankArray[i].id != obj.id && isCollision(obj, tankArray[i])) { collresult = delColl(obj, tankArray[i]); } } //检测子弹 for (var i = 0; i < bullentArray.length; i++) { if (bullentArray[i].id != obj.id && isCollision(obj, bullentArray[i])) { collresult = delColl(obj, bullentArray[i]); } } return collresult; } //碰撞检测 function isCollision(obj, obji) { var iscoll; //用x_l、x_r、y_u、y_d分别表示左右上下的值 var x_l = obj.x; var x_r = x_l + obj.width; var y_u = obj.y; var y_d = y_u + obj.height; var x_li = obji.x; var x_ri = x_li + obji.width; var y_ui = obji.y; var y_di = y_ui + obji.height; //分别不在被检测物体的左右上下说明发生碰撞，开始处理(第一种检测碰撞算法，考虑反面情况) if (!(x_r <= x_li | x_l >= x_ri | y_d <= y_ui | y_u >= y_di)) { //console.log(obj.id+"与"+obji.id+"相撞了") iscoll = true; } else { iscoll = false; } return iscoll; } //碰撞处理函数 function delColl(obj, obji) { var collresult; 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); return collresult; } //碰撞检测与处理完------------------------------------------------------------------------------------ //坦克与子弹移动函数----------------------------------------------------------------------------------- //移动函数 function move(obj, newDir) { var oldDir = 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; } var x = 0 , y = 0; var step = 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; } //粗糙的深拷贝 var objString = JSON.stringify(obj); var checkObj = JSON.parse(objString); checkObj.x += x; checkObj.y += y; var collresult = 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; } //调用碰撞检测及处理函数给出移动结果 } else if (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()); } else if (collresult == "DELETE") { delObj(obj); } else if (collresult == "NOMOVE") { showDOM(obj.id, obj.width, obj.height, obj.x, obj.y, obj.getImg()); //如果是敌方坦克就给他一个相反的方向，防止它撞墙不回头 if (obj.belongs == "em" && obj.type == "tank") {} return; } } //反方向函数 //返回一个与输入方向相反的方向 function negativeDir(dir) { switch (dir) { case "L": return "R"; break; case "R": return "L"; break; case "U": return "D"; break; case "D": return "U"; break; } } //自动移动函数 //子弹坦克所特有 function autoMove(obj) { // console.log("游戏状态="+state) var itFreq = BULLENT_FREQ; var itType = obj.type; var itId = obj.id; var itDir = obj.dir; if (obj.type == "tank") { itFreq = TANK_FREQ; } obj.t = setInterval(function() { if (itType == "tank") { var itObj = obj; var turn = randState(); if (turn == "Fire") { //console.log(obj.id+" "+obj.t) createBullent(itObj); return; } else if (turn == "none") { itDir = itObj.dir; } else { itDir = turn; } } move(obj, itDir); }, itFreq); } //简化版移动框架 //为了使坦克的移动更平滑;使用移动框架的前提：必须在t时间内屏蔽坦克的任何方向改变 //因为js浮点数的处理很复杂，这里仅仅满足x，y为7.5的倍数，step为7.5 function movingFrame(obj, x, y) { var objDom = document.getElementById(obj.id); var t = TANK_FREQ; var x1 = obj.x; var y1 = obj.y; var step_x = div(sub(x, x1), t / 10); var step_y = div(sub(y, y1), t / 10); var aaa = 1; var times = 1; var tank_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); //浮点数的加减乘除 function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString().split(".")[1].length; } catch (f) { d = 0; } return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e; } function sub(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch (f) { c = 0; } try { d = b.toString().split(".")[1].length; } catch (f) { d = 0; } return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e; } function mul(a, b) { var c = 0 , d = a.toString() , e = b.toString(); try { c += d.split(".")[1].length; } catch (f) {} try { c += e.split(".")[1].length; } catch (f) {} return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c); } function div(a, b) { var c, d, e = 0, f = 0; try { e = a.toString().split(".")[1].length; } catch (g) {} try { f = b.toString().split(".")[1].length; } catch (g) {} return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e)); } } //tank自动移动定时器的清除与重建函数 //itState表示清除、建立定时器 function objTimer(itState) { for (var i = 0; i < tankArray.length; i++) { if (tankArray[i] != null && tankArray[i].type == "tank") { if (itState == "stop" && tankArray[i].t != undefined) { clearInterval(tankArray[i].t); } if (itState == "run" && tankArray[i].belongs == "em") { autoMove(tankArray[i]); } } } } //坦克随机状态函数 //为自动移动的敌方坦克，返回一个方向LRUD或者Fire或者none,分别表示转向、开火和什么也不做(继续前行) function randState() { var z; //敌方坦克随机发射子弹的概率是1/7 z = randomNum(10); switch (z) { case 1: return "L"; break; case 2: return "R"; break; case 3: return "D"; break; case 4: return "L"; break; //5表示发射子弹 case 5: return "Fire"; break; default: //none表示按照原来方向前进 return "none"; break; } function randomNum(scope) { return parseInt(Math.random() * scope); } } //坦克与子弹移动函数完-------------------------------------------------------------------------- //游戏状态及提示函数群-------------------------------------------------------------------------- //开始游戏 function runGame(mapName) { //生成地图 var map = document.createElement("div"); map.id = "map"; map.className = "map"; document.body.appendChild(map); state = "RUN"; ifo(state); mapName(); playMusic("start"); createTank(3, "me"); createTank(1, "em", 0, 0); createTank(1, "em", 180, 0); createTank(1, "em", 330, 0); } //游戏暂停函数 function stopGame() { if (state == "RUN") { state = "STOP"; ifo("STOP"); objTimer("stop"); } else if (state == "STOP") { state = "RUN"; ifo(state); objTimer("run"); } } //游戏结束函数 function gameOver() { state = "OVER"; //暂停子弹的所有定时器 objTimer("stop"); //alert("GAME OVER"); createDOM("over", 120, 67.5, (MAP_W - 120) / 2, (MAP_H - 67.5) / 2, "over"); flickerObj("over"); } //更改地图 //保留的第二关、第三关 function changeMap() { //清除所有定时器及地图 objTimer("stop"); var mapChildrenNodes = map.childNodes; document.body.removeChild(map); //执行runGame //runGame(map2); } //提示信息函数 //根据游戏状态提示信息 function ifo(state) { var ifo = document.getElementById("ifo"); var ifo_title = document.getElementById("ifo_title"); switch (state) { case "READY": ifo_title.innerHTML = "坦克大战"; break; case "RUN": ifo.style.display = "none"; break; case "STOP": ifo.style.display = "block"; ifo_title.innerHTML = "暂停"; ifo.style.backgroundColor = "transparent"; break; } } //游戏状态及提示函数群完--------------------------------------------------------------------------------- //功能砖块函数----------------------------------------------------------------------------------------- //生成功能性砖块 function createFunctionWall() { if (emTankNum != 9 || emTankNum != 13 || emTankNum != 17) { return; } var selfType, x, y; switch (emTankNum) { case 9: selfType == "timer"; x = 15 * 18; y = 15 * 6; break; case 13: selfType == "stronghome"; x = 15 * 2; y = 15 * 18; break; case 17: selfType == "bomb"; x = 15 * 22; y = 15 * 17; break; } var it = new wall(selfType,x,y,"function"); flickerObj(it.id); //11秒后删除它 setTimeout(function() { //10秒后删除前闪烁功能砖，如果已经被吃了就取消闪烁 if (functionWallArray.indexOf(it) != -1) { flickerObj(it.id); } }, 10000); setTimeout(function() { //如果11秒删除时发现功能砖已经被吃了就取消删除 if (functionWallArray.indexOf(it) != -1) { delObj(it); } }, 11000); } //老巢steel砖块函数 function StrongHome() { function changeHome(selfType) { for (var i = 0; i < noMoveArray.length; i++) { for (var j = 0; j < noMoveArray[i].length; j++) { if (noMoveArray[i][j] != null && noMoveArray[i][j].belongs == "home" && noMoveArray[i][j].selfType != "star") { noMoveArray[i][j].selfType = selfType; noMoveArray[i][j].img = noMoveArray[i][j].selfType; var obj = noMoveArray[i][j]; showDOM(obj.id, obj.width, obj.height, obj.x, obj.y, obj.getImg()); } } } } changeHome("steel"); setTimeout(function() { changeHome("wall"); }, 5000); } //爆炸砖块函数 function bomb() { for (var i = 0; i < tankArray.length; i++) { objTimer("stop"); if (tankArray[i] != null && tankArray[i].belongs == "em") { //console.log(moveArray[i]) delObj(tankArray[i]); } } } //定时器砖块函数 function timer() { //暂停坦克的所有定时器 objTimer("stop"); setTimeout(function() { objTimer("run"); }, 2000); } //功能砖块函数完--------------------------------------------------------------------------------------- //特效函数群------------------------------------------------------------------------------------------ //音乐函数 function playMusic(src) { var audio = document.createElement("audio"); //var audio=document.createElement(""); audio.src = MUSIC_PATH + src + ".wav"; //路径 audio.play(); } //闪烁函数 function flickerObj(id, interval) { var it = document.getElementById(id); for (let i = 1; i <= 3; i++) { setTimeout(function() { var display = i % 2 == 0 ? "none" : "block"; it.style.display = display; //it.style.display="none"; }, (interval / 3) * i); } } //创建坦克/坦克爆炸动画函数 //animationType可取born、blast分别表示坦克出生以及子弹爆炸 function animation(animationType, x, y) { //这里给动画所用原子设置一个随机数id，防止两幅动画使用id一样造成只有一幅动画的情况 //这样仍可能使用一副动画，不过可能为4/1000 animationTypeid = Math.random() * 1000; var id = animationType + animationTypeid; //显示次数 var times = animationType == "born" ? 3 : 1; //显示频率 var fre = animationType == "born" ? 1000 : 300; // var width = animationType == "born" ? TANK_W : BULLENT_W; // var height = animationType == "born" ? TANK_H : BULLENT_H; var width = TANK_W; var height = TANK_H; //创建动画原子并闪烁 for (let i = 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 (let i = 1; i <= times; i++) { delDOM(id + i); } }, fre * (times + 1)); } //特效函数群完-------------------------------------------------------------------------------------- //坦克大战主逻辑----------------------------------------------------------------------------------- ifo("READY"); //坦克大战主逻辑完--------------------------------------------------------------------------------- //键盘监听及触发处理开始------------------------------------------------------------------------------ noresponseFire = false; noresponseTankMove = false; document.onkeydown = function(event) { //如果游戏状态为结束就屏蔽所有按键 if (state == "OVER") { return; } var myTank = tankArray[0]; var newDir; // 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"; } else if (code == 87 && state == "RUN" && mytank != null && noresponseTankMove == false) { console.log(noresponseTankMove) setNOresponse("TankMove", NORESPONSEFIRETIME); newDir = "U"; } else if (code == 68 && state == "RUN" && mytank != null && noresponseTankMove == false) { setNOresponse("TankMove", NORESPONSEFIRETIME); newDir = "R"; } else if (code == 83 && state == "RUN" && mytank != null && noresponseTankMove == false) { setNOresponse("TankMove", NORESPONSEFIRETIME); newDir = "D"; //T 84 开始游戏 } else if (code == 84 && state == "READY") { runGame(map1); return; //发射子弹 Enter 13 } else if (code == 13 && state == "RUN" && mytank != null && noresponseFire == false) { //按键屏蔽，一定时间内发射子弹无效 createBullent(myTank); noresponseFire = true; //屏蔽P键300ms setTimeout(function() { noresponseFire = false; }, NORESPONSEFIRETIME); return; //屏蔽其他无关按键 //P 80表示暂停 } else if (code == 80 && (state == "RUN" || state == "STOP")) { stopGame(); return; //屏蔽其他无关按键 } else { return; } move(myTank, newDir); } function setNOresponse(noresponseState, t) { if (noresponseState == "TankMove") { noresponseTankMove = true; //屏蔽P键300ms setTimeout(function() { noresponseTankMove = false; }, t); } } //键盘监听及触发处理完------------------------------------------------------------------------------ //地图1------------------------------------------------------------------------------------------ var map1 = function() { //老巢 new wall("star",15 * 12,15 * 24,"home"); new wall("wall",15 * 11,15 * 25,"home"); new wall("wall",15 * 11,15 * 24,"home"); new wall("wall",15 * 11,15 * 23,"home"); new wall("wall",15 * 12,15 * 23,"home"); new wall("wall",15 * 13,15 * 23,"home"); new wall("wall",15 * 14,15 * 25,"home"); new wall("wall",15 * 14,15 * 24,"home"); new wall("wall",15 * 14,15 * 23,"home"); // 老巢完毕 //所有普通wall for (var i = 1; i <= 11; i += 2) { for (var j = 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; } } new wall("wall",15 * 2 * i,15 * j,"ordinary"); new wall("wall",15 * 2 * i + 15,15 * j,"ordinary"); } } for (var i = 0; i < 6; i++) { for (var j = 0; j < 2; j++) { new wall("wall",15 * i + 15 * 10,15 * 11 + 15 * j,"ordinary"); if (i > 3) continue; new wall("wall",15 * i + 15 * 4,15 * 12 + 15 * j,"ordinary"); new wall("wall",15 * i + 15 * 18,15 * 12 + 15 * j,"ordinary"); } } new wall("wall",15 * 12,15 * 15,"ordinary"); new wall("wall",15 * 12,15 * 16,"ordinary"); new wall("wall",15 * 13,15 * 15,"ordinary"); new wall("wall",15 * 13,15 * 16,"ordinary"); //steel new wall("steel",15 * 0,15 * 13,"ordinary"); new wall("steel",15 * 1,15 * 13,"ordinary"); new wall("steel",15 * 24,15 * 13,"ordinary"); new wall("steel",15 * 25,15 * 13,"ordinary"); new wall("steel",15 * 12,15 * 6,"ordinary"); new wall("steel",15 * 12,15 * 7,"ordinary"); new wall("steel",15 * 13,15 * 6,"ordinary"); new wall("steel",15 * 13,15 * 7,"ordinary"); } //地图1完---------------------------------------------------------

以上是“js如何实现坦克大战游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页标题：js如何实现坦克大战游戏
转载源于：http://jkwzsj.com/article/ijiepg.html

js如何实现坦克大战游戏

按键说明：

其他资讯