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

更新时间：2007年11月29日 21:55:16 作者：

学了一阵子的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需再刷新一下页面才能执行]

您可能感兴趣的文章:

小程序实现展开/收起的效果示例
这篇文章主要介绍了小程序实现展开/收起的效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
MSAgent 详细解说
MSAgent 详细解说...
2006-11-11
javascript中的with语句学习笔记及用法
在本篇文章里小编给大家分享的是关于javascript中的with语句学习笔记及用法，有需要的朋友们可以学习下。
2020-02-02
js 字符串转换成数字的三种方法
在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全
2013-03-03
JS 替换和时间插件的结合使用方法
这篇文章主要介绍了JS 替换和时间插件的结合使用代码，需要的朋友可以参考下
2013-07-07
浅谈layui分页控件field参数接收对象的问题
今天小编就为大家分享一篇浅谈layui分页控件field参数接收对象的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Javascript在IE和FireFox中的不同表现简析
本文将详细介绍Javascript在IE和FireFox中的不同表现，本人整理了一下，需要的朋友可以参考下
2012-12-12
JS判断当前页面是否在微信浏览器打开的方法
这篇文章主要介绍了JS判断当前页面是否在微信浏览器打开的方法,涉及JavaScript针对客户端的相关判定技巧,非常简单实用,需要的朋友可以参考下
2015-12-12
JavaScript制作淘宝星级评分效果的思路
这篇文章主要介绍了JavaScript制作淘宝星级评分效果的整个思考过程，思路很清晰，并附带了完整的程序源码，感兴趣的小伙伴们可以参考一下
2015-11-11
微信小程序button组件使用详解
这篇文章主要为大家详细介绍了微信小程序button组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01