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

您可能感兴趣的文章:

清除js缓存的多种方法总结
下面小编就为大家带来一篇清除js缓存的多种方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
修复bash漏洞的shell脚本分享
这篇文章主要介绍了修复bash漏洞的shell脚本分享,本文脚本适应常见的linux服务器系统,如CentOS、Debian、Ubuntu、OpenSuSE、Aliyun等系统,需要的朋友可以参考下
2014-12-12
解决layui中table异步数据请求不支持自定义返回数据格式的问题
今天小编就为大家分享一篇解决layui中table异步数据请求不支持自定义返回数据格式的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
[分享]一个非常漂亮的进度滚动条
[分享]一个非常漂亮的进度滚动条...
2007-02-02
利用JavaScript模拟京东按键输入功能
这篇文章主要给大家介绍了关于如何利用JavaScript模拟京东按键输入功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
利用 spin.js 生成等待效果(js 等待效果)
这篇文章主要介绍了利用 spin.js 生成等待效果(js 等待效果),需要的朋友可以参考下
2017-06-06
javascript Blob对象实现文件下载
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
一文详解如何使npm-scripts更好维护的配置方法
这篇文章主要为大家介绍了如何使npm-scripts更好维护的配置方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
JS动态显示倒计时效果
这篇文章主要介绍了JS实现倒计时效果动态显示倒计时功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
js给图片打马赛克的方法示例
有时候你发出去的图片局部不想别别人看见，那么最简单的办法就是在你想要处理的地方打上马赛克，这篇文章主要介绍了js给图片打马赛克的方法示例，感兴趣的可以了解一下
2021-05-05