javascript 制作坦克大战游戏初步图片与代码

时间：2021-04-21 09:40:31|栏目：JavaScript代码|点击：次

学了一阵子的javascript，该做点东西，虽然东西还是东拼西凑，见笑。方向键控制坦克移动，回车键发射炸弹。其他的功能敌方坦克那些还没写。

<html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />         <title>javascript坦克游戏初步|阿会楠练习作品</title>         <style type="text/css">         body{             background:black;         }         #tanke{             position:absolute;             left:500px;             top:200px;         }         </style>              </head>     <body>             <div id="tanke"><img src="https://www.jb51.net/jstest/tanke/top.gif" /></div>     </body> </html> <script language="JavaScript" type="text/javascript">         var i = 0;         var bombLeftArray = new Array(100);//存放炸弹信息x         var bombTopArray = new Array(100);//存放炸弹信息y         var bombDirctionArray = new Array(100);//存放炸弹方向         var t = new Array(100);//炸弹加速度         for(var t_ = 0;t_ < 100;t_++)         {             t[t_] = 0;         }         var bombsetup = 3;//炸弹速度         var client_width = document.body.clientWidth + document.body.scrollLeft;//页面的宽度         var client_height = document.body.clientHeight + document.body.scrollTop;//页面的高度                  function $(obj){             return document.getElementById(obj);         }                  //页面所有炸弹的移动         function runAllBomb(){             var allBomb = document.getElementsByTagName("div");             for(var j_ = 1;j_ < allBomb.length;j_ ++)             {                                  //判断子弹的方向                 if(bombDirctionArray[j_] == null)                 {                         var reg = /[a-z]{1,}\.gif/;//匹配只要找到图片的名字就可以了                     bombDirctionArray[j_] = allBomb[j_].innerHTML.match(reg) + "";                 }                                  switch(bombDirctionArray[j_])                 {                                          case "ztop.gif":                         bombLeftArray[j_] = allBomb[j_].offsetLeft;                         bombTopArray[j_] = allBomb[j_].offsetTop;                         if(bombTopArray[j_] > 0){                             allBomb[j_].style.top = bombTopArray[j_]  - bombsetup*t[j_];                             t[j_] ++;                                                      }                         else                         {                             allBomb[j_].style.display = "none";                         }                     break;                                          case "zbottom.gif":                         bombLeftArray[j_] = allBomb[j_].offsetLeft;                         bombTopArray[j_] = allBomb[j_].offsetTop;                                                  if(bombTopArray[j_] < client_height)                         {                             allBomb[j_].style.top = bombTopArray[j_] + bombsetup*t[j_];                             t[j_] ++;                         }                         else                         {                             allBomb[j_].style.display = "none";                         }                     break;                                          case "zleft.gif":                         bombLeftArray[j_] = allBomb[j_].offsetLeft;                         bombTopArray[j_] = allBomb[j_].offsetTop;                                                  if(bombLeftArray[j_] > 0)                         {                             allBomb[j_].style.left = bombLeftArray[j_] - bombsetup*t[j_];                             t[j_] ++;                         }                         else                         {                             allBomb[j_].style.display = "none";                         }                     break;                                          case "zright.gif":                         bombLeftArray[j_] = allBomb[j_].offsetLeft;                         bombTopArray[j_] = allBomb[j_].offsetTop;                                                  if(bombLeftArray[j_] < client_width)                         {                             allBomb[j_].style.left = bombLeftArray[j_] + bombsetup*t[j_];                             t[j_] ++;                         }                         else                         {                             allBomb[j_].style.display = "none";                         }                     break;                 }                              }             }         var runBomb = window.setInterval(runAllBomb,100);         //取得页面上所有的炸弹，并让其以一定速度运行                  document.onkeydown = function(evt){                                       var evt = window.event?window.event:evt;//获取event对象的兼容写法，兼容FF和IE              var tanke_w = $("tanke").offsetWidth;//取得坦克的宽度             var tanke_h = $("tanke").offsetHeight;//取得坦克的高度             var current_x = $("tanke").offsetLeft;//坦克当前x坐标             var current_y = $("tanke").offsetTop;//坦克当前y坐标             var step = 2;//移动的速度             var z_step = 1;//子弹速度             switch(evt.keyCode)             {                     //向左                 case 37:                 $("tanke").style.left = current_x + document.body.scrollLeft - step + "px";                 $("tanke").innerHTML = "<img src='https://www.jb51.net/jstest/tanke/left.gif' />";                 break;                                  //向右                 case 39:                 $("tanke").style.left = current_x + document.body.scrollLeft + step + "px";                 $("tanke").innerHTML = "<img src='https://www.jb51.net/jstest/tanke/right.gif' />";                 break;                                  //向上                 case 38:                 $("tanke").innerHTML = "<img src='https://www.jb51.net/jstest/tanke/top.gif' />";                 $("tanke").style.top = current_y + document.body.scrollTop - step + "px";                 break;                                  //向下                 case 40:                 $("tanke").innerHTML = "<img src='https://www.jb51.net/jstest/tanke/bottom.gif' />";                 $("tanke").style.top = current_y + document.body.scrollTop + step + "px";                 break;                                  //发出攻击                 case 13:                     //新子弹                     var createDiv = document.createElement("div");                     createDiv.setAttribute("id","bomb" + i);                     i ++;                     //createDiv.style.overflow = "hidden";                     createDiv.style.position = "absolute";                     var reg = /[a-z]{1,}\.gif/;//匹配只要找到图片的名字就可以了                     var current_decoration = $("tanke").innerHTML.match(reg);                     switch(current_decoration[0])//按下回车发弹                     {                         //炮筒对着左边                         case "left.gif":                         createDiv.style.left = current_x - 5 + "px";                         createDiv.style.top = current_y + (tanke_h/2) - 3 + "px";                         createDiv.innerHTML = "<img src='https://www.jb51.net/jstest/tanke/zleft.gif' />"                         break;                                                  //炮筒对着右边                         case "right.gif":                         createDiv.style.left = current_x + tanke_w - 7 + "px";                         createDiv.style.top = current_y + (tanke_h/2) - 1 + "px";                         createDiv.innerHTML = "<img src='https://www.jb51.net/jstest/tanke/zright.gif' />";                         break;                                                  //炮筒对着上边                         case "top.gif":                         createDiv.style.left = current_x + (tanke_w/2) - 5 + "px";                         createDiv.style.top = current_y - 5 + "px";                         createDiv.innerHTML = "<img src='https://www.jb51.net/jstest/tanke/ztop.gif' />";                         break;                                                  //炮筒对着下边                         case "bottom.gif":                         createDiv.style.left = current_x + (tanke_w/2) - 7 + "px";                         createDiv.style.top = current_y + tanke_h - 7 + "px";                         createDiv.innerHTML = "<img src='https://www.jb51.net/jstest/tanke/zbottom.gif' />";                         break;                      }                      document.body.appendChild(createDiv);                 break;                              }                      }                       </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：微信小程序蓝牙连接小票打印机实例代码详解

栏目：JavaScript代码

下一篇：JS中使用apply方法通过不同数量的参数调用函数的方法

本文标题：javascript 制作坦克大战游戏初步图片与代码

本文地址：http://www.codeinn.net/misctech/106030.html

更多JavaScript代码

JavaScript代码

javascript 制作坦克大战游戏初步图片与代码

阅读排行

推荐教程

JavaScript代码

javascript 制作坦克大战游戏初步 图片与代码

阅读排行

推荐教程

javascript 制作坦克大战游戏初步图片与代码