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> <img src="http://www.jb51.net/jstest/tanke/top.gif" /> </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和IEvar 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="http://www.jb51.net/jstest/tanke/left.gif" />"; break;//向右 case 39: $（"tanke"）.style.left = current_x + document.body.scrollLeft + step + "px"; $（"tanke"）.innerHTML = "<img src="http://www.jb51.net/jstest/tanke/right.gif" />"; break;//向上 case 38: $（"tanke"）.innerHTML = "<img src="http://www.jb51.net/jstest/tanke/top.gif" />"; $（"tanke"）.style.top = current_y + document.body.scrollTop - step + "px"; break;//向下 case 40: $（"tanke"）.innerHTML = "<img src="http://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="http://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="http://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="http://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="http://www.jb51.net/jstest/tanke/zbottom.gif" />"; break;}document.body.appendChild（createDiv）; break;}} </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

首页 / 脚本样式 / JavaScript / javascript 制作坦克大战游戏初步 图片与代码

首页 / 脚本样式 / JavaScript / javascript 制作坦克大战游戏初步图片与代码