我去,我的图片分数被这个录屏软件的水印盖上了,扎心。

JavaScript用200行代码制作打飞机小游戏实例

这个程序的文件以及代码全部上传到了github

程序下载链接传送门

这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了。所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西。

当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创。

JavaScript用200行代码制作打飞机小游戏实例

代码部分我是通过一个大的函数直接进行所有的封装,当然写这个的时候的我完完全全对jquery么有一丁点认识,所以自己写了渐隐渐现的函数。所以开始的代码很简单。

window.onload = function(){
  var Base = new base();
  var start = document.getElementById('start');
  start.onclick = function(){
    Base.fadehide('start');
    getId('path').style.display='block';
    Base.fadeshow('path');
    Base.createBullteAndMovePlain();

  }

}

这就是开始接入的函数。渐隐渐现的函数是这个。

   this. fadehide = function (name){
      var   i = 1;
      var odiv = document.getElementById(name);
      function show(){  
        odiv.style.opacity = i;
        i-=0.1; 
         if(i<0){odiv.style.display = 'none';clearInterval(t);
         }
      }
       var t = setInterval(show,10);
       return this;
    }

    this.fadeshow = function (name){
      var i = 0;
      var odiv = document.getElementById(name);
      function show(){  
        odiv.style.opacity = i;
        i+=0.1; 
         if(i>1){clearInterval(t);}
      }
       var t = setInterval(show,100);  
      return this;
    }

剩下的代码,懒得解释了,里面有注释。

    //生成子弹
      this.createBullteAndMovePlain = function (){
      var arr= [];
      var bulletNum=[];
      var way = path.getElementsByClassName('way');
      var play =document.getElementById('bullet');
      var flag =0;
      var score=0;

      //获取按键
      document.onkeydown = function(evt){
        var ev = evt||event;
        //left keyCode is 39
        //right keyCode is 37
        switch(ev.keyCode){
          case 39:
          flag=(flag+1)%5;
          break;
          case 37:
          if(flag==0){
          flag=Math.abs(flag-4);
          }else if(flag>0){
            flag=(flag-1)%5;
          }
          break;
        }

      //移动飞机
          function movePlain (){
            var plain = document.getElementById('player');
            switch(flag){
            case 0:player.style.left='0px';break;
            case 1: player.style.left='100px';break;
            case 2: player.style.left='200px';break;
            case 3: player.style.left='300px';break;
            case 4:player.style.left='400px';break;

          }
          }
          movePlain();
      }


      function createBulltes(){


        //生成敌人
          var newenemy = document.createElement('img');
          newenemy.src = 'img/enemy.png';
          newenemy.style.position='absolute';
          newenemy.style.zIndex='5';
          var enemyTop=0;
          var sign=0;
          var randomNum = Math.random()*5;
          sign=Math.floor(randomNum);
          newenemy.style.top='0px';
          switch(sign){
            case 0:newenemy.style.left='0px';break;
              case 1: newenemy.style.left='100px';break;
              case 2: newenemy.style.left='200px';break;
              case 3: newenemy.style.left='300px';break;
              case 4:newenemy.style.left='400px';break;

          }way[0].appendChild(newenemy);
          arr.unshift(newenemy);
      //生成子弹    
          var bullet = document.getElementById('bullet');
          var newbullet = document.createElement('img');
          var plain = document.getElementById('player');
          newbullet.className='bullet';
          newbullet.style.position='absolute';
          newbullet.style.top='560px';  
          newbullet.src='img/bullet.png';
          newbullet.style.zIndex='4';      
          var bulletTop=0;


          switch(flag){
            case 0: newbullet.style.left='45px';player.style.left='0px';;break;
            case 1: newbullet.style.left='145px';player.style.left='100px';;break;
            case 2: newbullet.style.left='245px';player.style.left='200px';break;
            case 3: newbullet.style.left='345px';player.style.left='300px';break;
            case 4: newbullet.style.left='445px';player.style.left='400px';break;

          }way[2].appendChild(newbullet);
          bulletNum.unshift(newbullet);
        //分数图片
          function scoreup(score){
            var imgs = document.getElementsByClassName('score');
            var imgsnum=score.toString().split('');

            for(var i=0; i<imgsnum.length; i++){

              imgs[4-i].src='img/'+imgsnum[i]+'.png';  
            }

        }

        //判定触碰
        function decide(){
        for(var i = 0;i<arr.length; i++){
          for(var j=0; j<bulletNum.length; j++)
        if(arr[i].offsetLeft==(bulletNum[j].offsetLeft-45)&&((arr[i].offsetTop+98)>bulletNum[j].offsetTop-10&&(arr[i].offsetTop+98)<bulletNum[j].offsetTop+10)){
          score++;
          scoreup(score);
          arr[i].parentNode.removeChild(arr[i]);
            bulletNum[j].parentNode.removeChild(bulletNum[j]);    
            }
          }
          var player=document.getElementById('player');
          for(var i=0; arr.length; i++){
            if(arr[i].offsetLeft==player.offsetLeft&&(arr[i].offsetTop+70)==player.offsetTop){
              alert('game over');location.reload();
            }
          }
        }

        //放在一起的移动
          function bulletmove (){
                  bulletTop=newbullet.offsetTop;
                    enemyTop=newenemy.offsetTop;
                //    alert('buller:'+newbullet.offsetLeft);
                  //  alert(newenemy.offsetLeft);
                function move (){
                  bulletTop-=6;
                  enemyTop+=1;
                  newbullet.style.top=bulletTop+'px';
                  newenemy.style.top=enemyTop+'px';
                   decide();
                  if(bulletTop==0&&enemyTop==560){
                        newbullet.style.opacity='0';
                          newenemy.style.opacity='0';

                          clearInterval(t);
                          }else if(bulletTop==0){
                          newbullet.parentNode.removeChild(newbullet);  
                          bulletNum.pop();
                          }else if(enemyTop==560){
                          newenemy.parentNode.removeChild(newenemy);arr.pop();
                          }


                }

                    var t = setInterval(move,20);  
          }  
                bulletmove();

          }

          var s=setInterval(createBulltes,3000);

      }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?