포탄이 목표물에 맞고 사라지고 득점하는 것을 구현하는 js 탱크 전투
- WBOY원래의
- 2016-09-15 11:14:471863검색
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(함수(){<br>
var zd=document.getElementById(myid);//글머리 기호 가져오기<br>
If(fx=='qin39'){//오른쪽 글머리 기호<br>
var ls=zd.style.marginLeft;<br>
ls=parseInt(ls);<br>
If(ls<w></w>
zd.style.marginLeft=(ls+1)+'px';<br>
}그밖에{<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>
}그밖에{<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>
}그밖에{<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>
}그밖에{<br>
rezidan(myid);<br>
ClearInterval(set);<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='';//当子弹碰撞后删除子弹的class以防止下次继续击中敌方坦克<br>
rezidan(myid);//删除때리다坦克<br>
ClearInterval(setz); //删除坦克的时间函数<br>
fensu();//记录分数<br>
} <br>
}<br>
}<br>
/***/ <br>
var classz=ztk.className;<br>
var oArr = classz.split(" “);<br>
<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>
~ ~ }그 외{<br>
Fwz = ran (); // 벽을 넘어 위치를 다시 선택합니다 <br>
}
var clsaa=parseInt(oArr[1])+1;<br>
ztk.className='qinr '+clsaa;<br>
~ ~ }그 외{<br>
Fwz = ran (); // 위치를 다시 선택하세요 <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' <br>
~ ~ }그 외{<br>
Fwz = ran (); // 벽을 넘어 위치를 다시 선택합니다 <br>
}
Var clsaa = PARSEINT (우리의 [1])+1;
ztk.className='qinl'+clsaa;<br>
~ ~ }그밖에{<br>
Fwz = ran (); // 위치 다시 선택 <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' <br>
~ ~ }그 외{<br>
Fwz = ran (); // 벽을 넘어 위치를 다시 선택합니다 <br>
}
var clsaa=parseInt(oArr[1])+1;<br>
ztk.className='qint '+clsaa;<br>
~ ~ }그밖에{<br>
Fwz = ran (); // 위치 다시 선택 <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>
~ ~ }그 외{<br>
Fwz = ran (); // 벽을 넘어 위치를 다시 선택합니다 <br>
}
Var clsaa = PARSEINT (우리의 [1])+1;
ztk.className='qinf '+clsaa;<br>
~ ~ }그 외{<br>
Fwz = ran (); // 위치 다시 선택 <br> }<br>
}<br>
~
}그밖에{<br>
Fwz = ran (); // 활동 함수 <br>
}<br>
(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>
(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>
(fwz == 1) {//Azimens 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>
(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>
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회)