js坦克大戰以實現砲彈擊中目標消失並且記分
js坦克大战以实现炮弹击中目标消失并且记分
话不多说
下载下面的代码包就能看到效果，
效果图：
js代码如下：/**初始化*/<br>
var shell=document.getElementById('tk');<br>
shell.innerHTML='<div></div>';<br>
var w=shell.offsetWidth;h=shell.offsetHeight;<br>
/**初始化*/<br>
function keyDown(e) { <br>
var keycode = e.which; <br>
remove(keycode,2);//坦克移动<br>
if(keycode=='32'){//发射子弹<br>
zidan();<br>
}<br>
}<br>
<br>
function keyUp(e){//键位弹起时候记录最后按下方向键,并将其储存到class中去<br>
var keycode = e.which; shell_1=document.getElementById('shell_1');<br>
<br>
if(keycode=='37' || keycode=='38' || keycode=='39' || keycode=='40'){<br>
shell_1.className='qin'+keycode;<br>
}<br>
<br>
}<br>
/**键位监听*/<br>
document.onkeydown = keyDown;<br>
document.onkeyup = keyUp;<br>
/**键位监听*/<br>
function remove(code,su){//玩家坦克移动函数<br>
var shell_1=document.getElementById('shell_1');<br>
var l;<br>
if(code=='37'){//左移<br>
l=shell_1.style.marginLeft;<br>
l=parseInt(l);<br>
if(l>0){<br>
shell_1.style.marginLeft=(l-su)+'px';<br>
}<br>
}<br>
<br>
if(code=='38'){//上移<br>
l=shell_1.style.marginTop;<br>
l=parseInt(l);<br>
if(l>0){<br>
shell_1.style.marginTop=(l-su)+'px';<br>
}<br>
}<br>
<br>
if(code=='39'){//右移<br>
l=shell_1.style.marginLeft;<br>
l=parseInt(l);<br>
if(l
shell_1.style.marginLeft=(l+su)+'px';<br>
}<br>
}<br>
<br>
if(code=='40'){//下移<br>
l=shell_1.style.marginTop;<br>
l=parseInt(l);<br>
if(l
shell_1.style.marginTop=(l+su)+'px';<br>
}<br>
}<br>
<br>
}<br>
<br>
function zidan(){//玩家坦克子弹函数<br>
/**获取子弹初始位置*/<br>
var che=document.getElementById('shell_1');<br>
var l=che.style.marginLeft;<br>
var t=che.style.marginTop;<br>
var html=shell.innerHTML;//获取原有html<br>
/**获取子弹初始位置*/<br>
<br>
var myDate = new Date();<br>
var myid=myDate.getTime(); <br>
<br>
/**创建初始子弹*/<br>
shell.innerHTML=html+'<div></div>';<br>
/**建立初始子彈*/<br>
<br>
/**取得子彈的運行方向*/<br>
var fx=che.className;//子彈方向只能在子彈初始的時候取得<br>
/**取得子彈的運行方向*/<br>
<br>
<br>
<br>
<br>
var set=setInterval(function(){<br>
<br>
var zd=document.getElementById(myid);//取得子彈<br>
<br>
if(fx=='qin39'){//子彈向右<br>
var ls=zd.style.marginLeft;<br>
ls=parseInt(ls);<br>
<br>
if(ls<w></w>
zd.style.marginLeft=(ls+1)+'px';<br>
}else{<br>
rezidan(myid);<br>
clearInterval(set);<br>
}<br>
}<br>
if(fx=='qin37'){//子彈向左<br>
var ls=zd.style.marginLeft;<br>
ls=parseInt(ls);<br>
if(ls>0){ <br>
zd.style.marginLeft=(ls-1)+'px';<br>
}else{<br>
rezidan(myid);<br>
clearInterval(set);<br>
}<br>
}<br>
if(fx=='qin38'){//子彈向上<br>
var ls=zd.style.marginTop;<br>
ls=parseInt(ls);<br>
if(ls>0){ <br>
zd.style.marginTop=(ls-1)+'px';<br>
}else{<br>
rezidan(myid);<br>
clearInterval(set);<br>
}<br>
}<br>
if(fx=='qin40'){//子彈向下<br>
var ls=zd.style.marginTop;<br>
ls=parseInt(ls);<br>
if(ls<h></h>
zd.style.marginTop=(ls+1)+'px';<br>
}else{<br>
rezidan(myid);<br>
clearInterval(set);<br>
}<br>
}<br>
<br>
},10);<br>
<br>
}<br>
<br>
<br>
function rezidan(id){//删除子弹函数或者坦克<br>
var child=document.getElementById(id);<br>
if(child){<br>
shell.removeChild(child);<br>
}<br>
}<br>
<br>
<br>
//**电脑坦克*/<br>
<br>
function ran(){//随机1到4的方位函数<br>
var kwc=Math.ceil(Math.random()*10);<br>
var kwv;<br>
if(kwc%4==0){kwv=1;}<br>
if(kwc%4==1){kwv=2;}<br>
if(kwc%4==2){kwv=3;}<br>
if(kwc%4==3){kwv=4;}<br>
return kwv;<br>
}<br>
<br>
<br>
<br>
function rantanke(){//随机创建敌方坦克<br>
<br>
<br>
<br>
/**初始坦克随机出现位置*/<br>
var html=shell.innerHTML;//获取原有html<br>
var t=Math.random()*1000;<br>
var l=Math.random()*1000;<br>
<br>
if(t>h){t=(t-h)+'px';}else{t=t+'px';}//判断坦克不会超出边界太远<br>
if(l>w){l=(l-w)+'px';}else{l=l+'px';}//判断坦克不会超出边界太远<br>
/**初始坦克随机出现位置*/<br>
<br>
<br>
<br>
var myDate = new Date();<br>
var myid=myDate.getTime();<br>
/**创建坦克*/<br>
shell.innerHTML=html+'<div></div>';<br>
/**創建坦克*/<br>
<br>
var setz=setInterval(function(){<br>
/**被擊中*/ <br>
var ztk=document.getElementById(myid);dt=ztk.style.marginTop;dl=ztk.style.marginLeft;<br>
dt=parseInt(dt);dl=parseInt(dl); <br>
var zidanob=document.getElementsByClassName('zidan');<br>
if(zidanob.length!=0){ <br>
for(i=0;i<zidanob.length></zidanob.length>
var zt=zidanob[i].style.marginTop;<br>
var zl=zidanob[i].style.marginLeft;<br>
zt=parseInt(zt);zl=parseInt(zl);<br>
if(zt>dt&&ztdl&&zl
zidanob[i].style.display='none';//隱藏子彈<br>
zidanob[i].className='';//當子彈碰撞後消除子彈的類別以防止下次繼續擊中敵方坦克<br>
rezidan(myid);//刪除被擊中坦克<br>
清除間隔（setz）； //刪除&戰車的時間函數<br>
fensu();//記錄分數<br>
} <br>
}<br>
}<br>
/**&*/ <br>
var classz=ztk.className;<br>
var oArr = classz.split("""");<br>
var fwz;//每次執行易卜程式碼FWZ就清空,fwz是方向判斷變數<br>
<br>
<br>
if(classz){//判斷是否為&後第一次移動<br>
<br>
if(oArr[0]=='qinr'){//持續向右移動50次<br>
if(parseInt(oArr[1])
var lz=ztk.style.marginLeft;<br>
lz=parseInt(lz);<br> if(lz<w></w>
ztk.style.marginLeft=(lz+2)+'px';<br>
}else{<br>
fwz=ran();//撞牆重新選定方位<br>
}<br>
var clsaa=parseInt(oArr[1])+1;<br>
ztk.className='qinr '+clsaa;<br>
}else{<br>
fwz=ran();//重新選取方位<br>
}<br>
}<br>
<br>
<br>
if(oArr[0]=='qinl'){//持續以左移50次<br>
if(parseInt(oArr[1])
var lz=ztk.style.marginLeft;<br>
lz=parseInt(lz);<br>
if(lz>0){<br>
ztk.style.marginLeft=(lz-2)+'px' ztk.style.marginLeft=(lz-2)+'px' <br>
}else{<br>
fwz=ran();//撞牆重新選定方位 <br>位
}<br>
var clsaa=parseInt(oArr[1])+1;<br>
ztk.className='qinl '+clsaa;<br>
}else{<br>
fwz=ran();//重新選取方位<br>
}<br>
}<br>
<br>
<br> if(oArr[0]=='qint'){//持續向上移動50次<br>
if(parseInt(oArr[1])
var lz=ztk.style.marginTop;<br>
lz=parseInt(lz);<br>
if(lz>0){ <br>
ztk.style.marginTop=(lz-2)+'px';
}else{<br>
fwz=ran();//撞牆重新選定方位 <br>
}<br>
var clsaa=parseInt(oArr[1])+1;<br>
ztk.className='qint '+clsaa;<br>
}else{<br>
fwz=ran();//重新選取方位<br>
}<br>
}<br>
<br>
if(oArr[0]=='qinf'){//持續向下移動50次<br>
if(parseInt(oArr[1])
var lz=ztk.style.marginTop;<br>
lz=parseInt(lz);<br>
if(lz<h></h>
ztk.style.marginTop=(lz+2)+'px';<br>
}else{<br>
fwz=ran();//撞牆重新選定方位 <br>位
}<br>
var clsaa=parseInt(oArr[1])+1;<br>
ztk.className='qinf '+clsaa;<br>
}else{<br>
fwz=ran();//重新選取方位<br> }<br>
}<br>
<br>
}else{<br>
fwz=ran();//方位函數<br>
}<br>
<br>
<br>
<br>
<br>
if(fwz==2){//方位值為2就執行向右移動<br>
var lz=ztk.style.marginLeft;<br>
lz=parseInt(lz);<br>
ztk.style.marginLeft=(lz+2)+'px'; <br>
ztk.className='qinr 1';<br>
}<br>
<br>
if(fwz==3){//方位值為3位執行向左移<br>
var lz=ztk.style.marginLeft;<br>
lz=parseInt(lz);<br>
ztk.style.marginLeft=(lz-2)+'px';<br>
ztk.className='qinl 1';<br>
}<br>
<br>
if(fwz==1){//方位值為1就執行向上移動<br>
var lz=ztk.style.marginTop;<br>
lz=parseInt(lz);<br>
ztk.style.marginTop=(lz-2)+'px';<br>
ztk.className='qint 1';<br>
}<br>
<br>
if(fwz==4){//方位值為4就執行向下移動<br>
var lz=ztk.style.marginTop;<br>
lz=parseInt(lz);<br>
ztk.style.marginTop=(lz+2)+'px';<br>
ztk.className='qinf 1';<br>
}<br>
},50);<br>
<br>
}<br>
function fensu(){//記分函數<br>
var ob=document.getElementById('fs');<br> var s=ob.innerText;<br>
s=parseInt(s);<br>
s=s+1;<br>
ob.innerText=s;<br>
}
rew.zip
( 33.16 KB 下載：9 次 )
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解Python編程的入門級程式碼範例
Jan 04, 2024 am 10:50 AM
了解Python程式設計的入門程式碼範例Python是一種簡單易學，功能強大的程式語言。對於初學者來說，了解Python程式設計的入門級程式碼範例是非常重要的。本文將為您提供一些具體的程式碼範例，幫助您快速入門。列印HelloWorldprint("HelloWorld")這是Python中最簡單的程式碼範例。 print()函數用於將指定的內容輸出
Go語言程式設計實例：Web開發中的程式碼範例
Mar 04, 2024 pm 04:54 PM
《Go語言程式設計實例：Web開發中的程式碼範例》隨著網路的快速發展，Web開發已成為各行業中不可或缺的一部分。作為一門功能強大且效能優越的程式語言，Go語言在Web開發中越來越受到開發者們的青睞。本文將透過具體的程式碼範例，介紹如何利用Go語言進行Web開發，讓讀者更能理解並運用Go語言來建立自己的Web應用。 1.簡單的HTTP伺服器首先，讓我們從一個
PHP 變數的實際應用：10 個實際使用範例
Feb 19, 2024 pm 03:00 PM
PHP變數儲存程式運行期間的值，對於建立動態且互動的WEB應用程式至關重要。本文將深入探討php變量，並透過10個真實的範例展示它們的實際應用。 1.儲存使用者輸入$username=$_POST["username"];$passWord=$_POST["password"];此範例從表單提交中提取使用者名稱和密碼，並將其儲存在變數中以供進一步處理。 2.設定配置值$database_host="localhost";$database_username="username";$database_pa
Java實作簡單的冒泡排序程式碼
Jan 30, 2024 am 09:34 AM
Java冒泡排序最簡單的程式碼範例冒泡排序是一種常見的排序演算法，它的基本想法是透過相鄰元素的比較和交換來將待排序序列逐步調整為有序序列。以下是一個簡單的Java程式碼範例，示範如何實作冒泡排序：publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int
如何使用PHP編寫庫存管理系統中的庫存分倉管理功能代碼
Aug 06, 2023 pm 04:49 PM
如何使用PHP編寫庫存管理系統中的庫存分倉管理功能碼庫存管理是許多企業中不可或缺的一部分。對於擁有多個倉庫的企業來說，庫存分倉管理功能尤其重要。透過合理管理和追蹤庫存，企業可以實現不同倉庫之間的庫存調撥，優化營運成本，改善協同效率。本文將介紹如何使用PHP編寫庫存分倉管理功能的程式碼，並為您提供相關的程式碼範例。一、建立資料庫在開始編寫庫存分倉管理功能的程式碼之
華為雲端邊緣運算對接指南：Java程式碼範例快速實作接口
Jul 05, 2023 pm 09:57 PM
華為雲端邊緣運算對接指南：Java程式碼範例快速實現介面隨著物聯網技術的快速發展和邊緣運算的興起，越來越多的企業開始關注邊緣運算的應用。華為雲端提供了邊緣運算服務，為企業提供了高可靠的運算資源和便利的開發環境，使得邊緣運算應用更容易實現。本文將介紹如何透過Java程式碼快速實現華為雲端邊緣運算的介面。首先，我們需要準備好開發環境。確保你已經安裝了Java開發工具包（
從入門到精通：Go語言中常用資料結構的程式碼實現
Mar 04, 2024 pm 03:09 PM
標題：從入門到精通：Go語言中常用資料結構的程式碼實作資料結構在程式設計中起著至關重要的作用，它是程式設計的基礎。在Go語言中，有許多常用的資料結構，掌握這些資料結構的實作方式對於成為優秀的程式設計師至關重要。本文將介紹Go語言中常用的資料結構，並給出對應的程式碼範例，幫助讀者從入門到精通這些資料結構。 1.數組（Array）數組是一種基本的資料結構，是一組相同類型
指導與範例：學習Java選擇排序演算法的實現
Feb 18, 2024 am 10:52 AM
Java選擇排序法程式碼編寫指南及範例選擇排序是一種簡單直觀的排序演算法，其想法是每次從未排序的元素中選擇最小（或最大）的元素進行交換，直到所有元素排序完成。本文將提供選擇排序的程式碼編寫指南，並附上具體的Java範例程式碼。演算法原理選擇排序的基本原理是將待排序數組分為已排序和未排序兩部分，每次從未排序部分選擇最小（或最大）的元素，將其放到已排序部分的末尾。重複上述
