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

來源：懂視網責編：小采時間：2020-11-27 20:38:23

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

javascript制作坦克大戰游戲初步圖片與代碼_javascript技巧: 學了一陣子的javascript，該做點東西，雖然東西還是東拼西湊，見笑。方向鍵控制坦克移動，回車鍵發射炸彈。其他的功能敵方坦克那些還沒寫。 javascript坦克游戲初步|阿會楠練習作品 body{ background:black; } #tanke{ positi

推薦度：

點擊下載本文 文檔為doc格式

導讀javascript制作坦克大戰游戲初步圖片與代碼_javascript技巧: 學了一陣子的javascript，該做點東西，雖然東西還是東拼西湊，見笑。方向鍵控制坦克移動，回車鍵發射炸彈。其他的功能敵方坦克那些還沒寫。 javascript坦克游戲初步|阿會楠練習作品 body{ background:black; } #tanke{ positi

學了一陣子的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.gxlcms.com/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和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='http://www.gxlcms.com/jstest/tanke/left.gif' />"; 
 break; 
 
 //向右 
 case 39: 
 $("tanke").style.left = current_x + document.body.scrollLeft + step + "px"; 
 $("tanke").innerHTML = "<img src='http://www.gxlcms.com/jstest/tanke/right.gif' />"; 
 break; 
 
 //向上 
 case 38: 
 $("tanke").innerHTML = "<img src='http://www.gxlcms.com/jstest/tanke/top.gif' />"; 
 $("tanke").style.top = current_y + document.body.scrollTop - step + "px"; 
 break; 
 
 //向下 
 case 40: 
 $("tanke").innerHTML = "<img src='http://www.gxlcms.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='http://www.gxlcms.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='http://www.gxlcms.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='http://www.gxlcms.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='http://www.gxlcms.com/jstest/tanke/zbottom.gif' />"; 
 break; 
 } 
 document.body.appendChild(createDiv); 
 break; 
 
 } 
 
 } 
 
 
</ script>

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：坦克 js javascript

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦