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://myzitong.com/article/ijiepg.html

其他资讯