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]) 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]) 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]) 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]) 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 次 )