头像

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

来源:http://www.daimasucai.com/html5/49.html 代码素材管理员 2016-09-15浏览()

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

程序员,你不是一个人;网站开发QQ群:543107534  在线充值,或联系QQ 692521105直接充值

js坦克大战以实现炮弹击中目标消失并且记分
分类:首页>>网页特效>>html5 阅读次数:
查看演示 下载次数: 6

手机扫码访问:

下载资源 下载积分: 0

/**初始化*/

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

shell.innerHTML='<div class="qin39" id="shell_1" style="margin:0 0 0 0;width: 10px;height: 10px;background: #c6c6c6;"></div>';

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<(w-12)){

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

        }

    }


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

        l=shell_1.style.marginTop;

        l=parseInt(l);

        if(l<(h-12)){

           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+'<div class="zidan" id="'+myid+'" style="position:absolute;z-index: 3;margin:'+t+' 0 0 '+l+';width: 2px;height: 2px;background: red;"></div>';

    /**创建初始子弹*/

    

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

      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<w){ 

               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<h){ 

              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+'<div  id="'+myid+'" style="position:absolute;z-index: 0;margin:'+t+' 0 0 '+l+';width: 20px;height: 20px;background: blue;"></div>';

    /**创建坦克*/

    

       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<zidanob.length;i++){             

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

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

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

                if(zt>dt && zt<(dt+20) && zl>dl && zl<(dl+20) ){//击中                

                    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<w){

                         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<h){

                          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;

}


标签: js坦克大战
声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:http://www.daimasucai.com/html5/49.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>