javascript制作坦克大战游戏初步图片与代码_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> 
  
 </body> 
</html> 
 
 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 = ""; 
 break; 
 
 //向右 
 case 39: 
 $("tanke").style.left = current_x + document.body.scrollLeft + step + "px"; 
 $("tanke").innerHTML = ""; 
 break; 
 
 //向上 
 case 38: 
 $("tanke").innerHTML = ""; 
 $("tanke").style.top = current_y + document.body.scrollTop - step + "px"; 
 break; 
 
 //向下 
 case 40: 
 $("tanke").innerHTML = ""; 
 $("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 = "" 
 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 = ""; 
 break; 
 
 //炮筒对着上边 
 case "top.gif": 
 createDiv.style.left = current_x + (tanke_w/2) - 5 + "px"; 
 createDiv.style.top = current_y - 5 + "px"; 
 createDiv.innerHTML = ""; 
 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 = ""; 
 break; 
 } 
 document.body.appendChild(createDiv); 
 break; 
 
 } 
 
 } 
 
 
</ script>

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

显示全文

全部频道

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