• 代码素材首页
  • 欢迎您,游客!您可以选择 注册
    头像

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

    来源:http://school.sxbd100.com/html5/49.html 代码交流管理员 2016-09-15浏览(804)

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

    万博彩票下载最新版本员,你不是一个人;网站开发QQ群:136483411  在线充值,或联系QQ 304534221直接充值

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

    手机扫码访问:

    下载资源 下载积分: 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坦克大战
    声明:本文为原创文章,如需转载,请注明来源school.sxbd100.com并保留原文链接:http://school.sxbd100.com/html5/49.html
    如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
    alipay转账 alipay转账 扫扫加qq群

    评论(0)


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

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