js坦克大战以实现炮弹击中目标消失并且记分

话不多说

下载下面的代码包就能看到效果，

效果图：

js代码如下：/**初始化*/

var shell=document.getElementById('tk');

shell.innerHTML='

';

var w=shell.offsetWidth;h=shell.offsetHeight;

/**初始化*/

function keyDown(e) {

var keycode = e.which;

remove(keycode,2);//坦克移动

if(keycode=='32'){//发射子弹

zidan();

}

}

function keyUp(e){//键位弹起时候记录最后按下方向键,并将其储存到class中去

var keycode = e.which; shell_1=document.getElementById('shell_1');

if(keycode=='37' || keycode=='38' || keycode=='39' || keycode=='40'){

shell_1.className='qin'+keycode;

}

}

/**键位监听*/

document.onkeydown = keyDown;

document.onkeyup = keyUp;

/**键位监听*/

function remove(code,su){//玩家坦克移动函数

var shell_1=document.getElementById('shell_1');

var l;

if(code=='37'){//左移

l=shell_1.style.marginLeft;

l=parseInt(l);

if(l>0){

shell_1.style.marginLeft=(l-su)+'px';

}

}

if(code=='38'){//上移

l=shell_1.style.marginTop;

l=parseInt(l);

if(l>0){

shell_1.style.marginTop=(l-su)+'px';

}

}

if(code=='39'){//右移

l=shell_1.style.marginLeft;

l=parseInt(l);

if(l

shell_1.style.marginLeft=(l+su)+'px';

}

}

if(code=='40'){//下移

l=shell_1.style.marginTop;

l=parseInt(l);

if(l

shell_1.style.marginTop=(l+su)+'px';

}

}

}

function zidan(){//玩家坦克子弹函数

/**获取子弹初始位置*/

var che=document.getElementById('shell_1');

var l=che.style.marginLeft;

var t=che.style.marginTop;

var html=shell.innerHTML;//获取原有html

/**获取子弹初始位置*/

var myDate = new Date();

var myid=myDate.getTime();

/**创建初始子弹*/

shell.innerHTML=html+'

';

/**创建初始子弹*/

/**获取子弹的运行方向*/

var fx=che.className;//子弹方向只能在子弹初始的时候获取

/**获取子弹的运行方向*/

var set=setInterval(function(){

var zd=document.getElementById(myid);//获取子弹

if(fx=='qin39'){//子弹向右

var ls=zd.style.marginLeft;

ls=parseInt(ls);

if(ls

zd.style.marginLeft=(ls+1)+'px';

}else{

rezidan(myid);

clearInterval(set);

}

}

if(fx=='qin37'){//子弹向左

var ls=zd.style.marginLeft;

ls=parseInt(ls);

if(ls>0){

zd.style.marginLeft=(ls-1)+'px';

}else{

rezidan(myid);

clearInterval(set);

}

}

if(fx=='qin38'){//子弹向上

var ls=zd.style.marginTop;

ls=parseInt(ls);

if(ls>0){

zd.style.marginTop=(ls-1)+'px';

}else{

rezidan(myid);

clearInterval(set);

}

}

if(fx=='qin40'){//子弹向下

var ls=zd.style.marginTop;

ls=parseInt(ls);

if(ls

zd.style.marginTop=(ls+1)+'px';

}else{

rezidan(myid);

clearInterval(set);

}

}

},10);

}

function rezidan(id){//删除子弹函数或者坦克

var child=document.getElementById(id);

if(child){

shell.removeChild(child);

}

}

//**电脑坦克*/

function ran(){//随机1到4的方位函数

var kwc=Math.ceil(Math.random()*10);

var kwv;

if(kwc%4==0){kwv=1;}

if(kwc%4==1){kwv=2;}

if(kwc%4==2){kwv=3;}

if(kwc%4==3){kwv=4;}

return kwv;

}

function rantanke(){//随机创建敌方坦克

/**初始坦克随机出现位置*/

var html=shell.innerHTML;//获取原有html

var t=Math.random()*1000;

var l=Math.random()*1000;

if(t>h){t=(t-h)+'px';}else{t=t+'px';}//判断坦克不会超出边界太远

if(l>w){l=(l-w)+'px';}else{l=l+'px';}//判断坦克不会超出边界太远

/**初始坦克随机出现位置*/

var myDate = new Date();

var myid=myDate.getTime();

/**创建坦克*/

shell.innerHTML=html+'

';

/**创建坦克*/

var setz=setInterval(function(){

/**被击中*/

var ztk=document.getElementById(myid);dt=ztk.style.marginTop;dl=ztk.style.marginLeft;

dt=parseInt(dt);dl=parseInt(dl);

var zidanob=document.getElementsByClassName('zidan');

if(zidanob.length!=0){

for(i=0;i

var zt=zidanob[i].style.marginTop;

var zl=zidanob[i].style.marginLeft;

zt=parseInt(zt);zl=parseInt(zl);

if(zt>dt && ztdl && zl

zidanob[i].style.display='none';//隐藏子弹

zidanob[i].className='';//当子弹碰撞后删除子弹的class以防止下次继续击中敌方坦克

rezidan(myid);//删除被击中坦克

clearInterval(setz); //删除被击中坦克的时间函数

fensu();//记录分数

}

}

}

/**被击中*/

var clasz=ztk.className;

var oArr = clasz.split(" ");

var fwz;//每次执行这段代码FWZ就清空,fwz是方向判断变量

if(clasz){//判断是否是创建坦克后第一次移动

if(oArr[0]=='qinr'){//持续向右移动50次

if(parseInt(oArr[1])<50){

var lz=ztk.style.marginLeft;

lz=parseInt(lz);

if(lz

ztk.style.marginLeft=(lz+2)+'px';

}else{

fwz=ran();//撞墙重新选定方位

}

var clsaa=parseInt(oArr[1])+1;

ztk.className='qinr '+clsaa;

}else{

fwz=ran();//重新选定方位

}

}

if(oArr[0]=='qinl'){//持续向左移动50次

if(parseInt(oArr[1])<50){

var lz=ztk.style.marginLeft;

lz=parseInt(lz);

if(lz>0){

ztk.style.marginLeft=(lz-2)+'px';

}else{

fwz=ran();//撞墙重新选定方位

}

var clsaa=parseInt(oArr[1])+1;

ztk.className='qinl '+clsaa;

}else{

fwz=ran();//重新选定方位

}

}

if(oArr[0]=='qint'){//持续向上移动50次

if(parseInt(oArr[1])<50){

var lz=ztk.style.marginTop;

lz=parseInt(lz);

if(lz>0){

ztk.style.marginTop=(lz-2)+'px';

}else{

fwz=ran();//撞墙重新选定方位

}

var clsaa=parseInt(oArr[1])+1;

ztk.className='qint '+clsaa;

}else{

fwz=ran();//重新选定方位

}

}

if(oArr[0]=='qinf'){//持续向下移动50次

if(parseInt(oArr[1])<50){

var lz=ztk.style.marginTop;

lz=parseInt(lz);

if(lz

ztk.style.marginTop=(lz+2)+'px';

}else{

fwz=ran();//撞墙重新选定方位

}

var clsaa=parseInt(oArr[1])+1;

ztk.className='qinf '+clsaa;

}else{

fwz=ran();//重新选定方位

}

}

}else{

fwz=ran();//方位函数

}

if(fwz==2){//方位值为2就执行向右移动

var lz=ztk.style.marginLeft;

lz=parseInt(lz);

ztk.style.marginLeft=(lz+2)+'px';

ztk.className='qinr 1';

}

if(fwz==3){//方位值为3就执行向左移动

var lz=ztk.style.marginLeft;

lz=parseInt(lz);

ztk.style.marginLeft=(lz-2)+'px';

ztk.className='qinl 1';

}

if(fwz==1){//方位值为1就执行向上移动

var lz=ztk.style.marginTop;

lz=parseInt(lz);

ztk.style.marginTop=(lz-2)+'px';

ztk.className='qint 1';

}

if(fwz==4){//方位值为4就执行向下移动

var lz=ztk.style.marginTop;

lz=parseInt(lz);

ztk.style.marginTop=(lz+2)+'px';

ztk.className='qinf 1';

}

},50);

}

function fensu(){//记分函数

var ob=document.getElementById('fs');

var s=ob.innerText;

s=parseInt(s);

s=s+1;

ob.innerText=s;

}

rew.zip

( 33.16 KB 下载：9 次 )

本文原创发布php中文网，转载请注明出处，感谢您的尊重！