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

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

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

程序下载链接传送门

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

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

代码部分我是通过一个大的函数直接进行所有的封装，当然写这个的时候的我完完全全对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);

      }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。