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='';//当子弹碰撞后删除子弹的class以防止下次继续击中敌方坦克<br>                     rezidan(myid);//删除被击中坦克<br>                     clearInterval(setz);  //删除被击中坦克的时间函数<br>                     fensu();//记录分数<br>                 }                    <br>             }<br>             }<br>            /**被击中*/          <br>               var clasz=ztk.className;<br>               var oArr = clasz.split(" ");<br>               var fwz;//每次执行这段代码FWZ就清空,fwz是方向判断变量<br>               <br>               <br>               if(clasz){//判断是否是创建坦克后第一次移动<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'; <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'; <br>                        }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 次 )