javascript 制作坦克大戰游戲初步圖片與代碼

2019-11-21 01:51:51

字體：大中小

來源：轉載

供稿：網友

學了一陣子的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   class="iwvjtn8m0"   id="tanke"><img src="https://www.jb51.net//www.survivalescaperooms.com/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//www.survivalescaperooms.com/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//www.survivalescaperooms.com/jstest/tanke/right.gif' />";                 break;                                  //向上                 case 38:                 $("tanke").innerHTML = "<img src='https://www.jb51.net//www.survivalescaperooms.com/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//www.survivalescaperooms.com/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//www.survivalescaperooms.com/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//www.survivalescaperooms.com/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//www.survivalescaperooms.com/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//www.survivalescaperooms.com/jstest/tanke/zbottom.gif' />";                         break;                      }                      document.body.appendChild(createDiv);                 break;                              }                      }                       </script>

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

上一篇：XRegExp 0.2: Now With Named Capture

下一篇：javascript數組組合成字符串的腳本