欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript用200行代碼制作打飛機(jī)小游戲?qū)嵗?/h1>
 更新時(shí)間：2017年06月21日 09:06:17   作者：baddog_  
本篇文章主要介紹了JavaScript用200行代碼制作打飛機(jī)小游戲?qū)嵗?，非常具有?shí)用價(jià)值，需要的朋友可以參考下

我去，我的圖片分?jǐn)?shù)被這個(gè)錄屏軟件的水印蓋上了，扎心。

這個(gè)程序的文件以及代碼全部上傳到了github

程序下載鏈接傳送門

這是自己第一次通過js寫的小游戲，那個(gè)時(shí)候?qū)ο蟮脑砀Y(jié)構(gòu)體的概念不是特別的清晰，所以沒用對(duì)象來寫，所以直接導(dǎo)致后期我對(duì)這個(gè)程序進(jìn)行修改的時(shí)候出現(xiàn)問題，太過于復(fù)雜了，我終于了解什么叫做牽一發(fā)動(dòng)全身了。所以這個(gè)程序教會(huì)我一定一定要用對(duì)象的思想處理以后的問題，尤其是這種帶屬性明顯的東西。

當(dāng)然你要問我圖片怎么來的我只能說都是我自己畫的所以這可是原創(chuàng)的原創(chuàng)。

代碼部分我是通過一個(gè)大的函數(shù)直接進(jìn)行所有的封裝，當(dāng)然寫這個(gè)的時(shí)候的我完完全全對(duì)jquery么有一丁點(diǎn)認(rèn)識(shí)，所以自己寫了漸隱漸現(xiàn)的函數(shù)。所以開始的代碼很簡單。

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();

  }

}

這就是開始接入的函數(shù)。漸隱漸現(xiàn)的函數(shù)是這個(gè)。

   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;
        }

      //移動(dòng)飛機(jī)
          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);
        //分?jǐn)?shù)圖片
          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();
            }
          }
        }

        //放在一起的移動(dòng)
          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);

      }
  }

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論