layabox4:打地鼠（打擊得分/倒計時功能條製做）

1.實現遊戲的倒計時

• 編輯模式先導入進度條資源
• 資源工做流程->組件資源命名規則查看進度條的製做
• var:timeBar,value:1
• 回到代碼模式下（Game.js）

• var Game = (function(_super){
      function Game(){
          Game.super(this);
          this.moles = new Array;
          this.moleNum = 9;
          //初始化進度條
          this.timeBar.value = 1;
          for(var i=0;i<this.moleNum,++i){
              //獲取box對象
              this.box = this.getChilByName("item"+i);
              //實例化每個地鼠
              this.mole = new Mole(this.box.getChildByName("normal"),this.box.getChildByName("hit"),21);
              //把每個地鼠添加到地鼠數組中
              this.moles.push(this.mole);
          }
          //每兩秒中隨機播放地鼠
          Laya.timer.loop(1000,this,this.show);
      }
      //繼承父類
      Laya.class(Game,"Game",_super);
  
      //註冊類的原型
      _proto = Game.prototype;
      
      //實現每個方法
      _proto.show = function(){
          //讓進度條90秒後結束
          this.timeBar.value -= (1/90);
          if(this.timeBar.value<=0){
              //遊戲結束
              this.gameOver();
              return;
          }
          //隨機出現地鼠
          this.index = Math.floor(Math.random()*this.moleNum);
          //顯示地鼠
          this.moles[this.index].show();
      }
  
      _proto.gameOver = function(){
         //清楚定時器
         Laya.timer.clear(this,this.show);
         console.log("遊戲結束");
      }
  
      //返回當前類
      return Game;
  })(ui.GameUI)

   

2.顯示遊戲的得分（根據不一樣的地鼠加減分）

• 分數界面製做
• 把clip組件全選轉換爲一個box容器，var:scorceNumber,導出發佈
• 回到代碼模式Game.js

• var Game = (function(_super){
      function Game(){
          Game.super(this);
          this.moles = new Array;
          this.moleNum = 9;
          //初始化進度條
          this.timeBar.value = 1;
          //得分
          this.score = 0;
          //擊打地鼠的回調函數(執行域，回調函數，參數，屢次執行（true:默認，只執行一次）)
          this.hitCallBackHandler = Laya.Handler.create(this,this.setScore,null,false);
          for(var i=0;i<this.moleNum,++i){
              //獲取box對象
              this.box = this.getChilByName("item"+i);
              //實例化每個地鼠
              this.mole = new Mole(this.box.getChildByName("normal"),this.box.getChildByName("hit"),21,this.hitCallBackHandler);
              //把每個地鼠添加到地鼠數組中
              this.moles.push(this.mole);
          }
          //每兩秒中隨機播放地鼠
          Laya.timer.loop(1000,this,this.show);
      }
      //繼承父類
      Laya.class(Game,"Game",_super);
  
      //註冊類的原型
      _proto = Game.prototype;
      
      //實現每個方法
      _proto.show = function(){
          //讓進度條90秒後結束
          this.timeBar.value -= (1/90);
          if(this.timeBar.value<=0){
              //遊戲結束
              this.gameOver();
              return;
          }
          //隨機出現地鼠
          this.index = Math.floor(Math.random()*this.moleNum);
          //顯示地鼠
          this.moles[this.index].show();
      }
  
      _proto.gameOver = function(){
         //清楚定時器
         Laya.timer.clear(this,this.show);
         console.log("遊戲結束");
      }
  
      _proto.setScore = function(type){
          this.score += (type==1?-100:100);
          if(this.score <= 0){
              this.score = 0;
          }
          //跟新分數的界面
          this.updateScoreUI();
      }
  
      _proto.updateScoreUI(){
          this.data = {};
          this.temp = this.score;
          for(var i=9;i>=0;i++){
              this.data["item"+i] = {index:Math.floor(this.temp%10)};
              this.temp /=10;
          }
          this.scoreNums.dataSource = this.data;
      }
  
      //返回當前類
      return Game;
  })(ui.GameUI)

  /**
  知識點：代碼提示：刷新編輯器
  */
  var Mole = (function(){
      function Mole(normalState,hitState,downY,hitCallBackHandler){
          //正常狀態地鼠
          this.normalState = normalState;
          //受擊狀態地鼠
          this.hitState = hitState;
          //最低點的y座標 （到編輯界面中查找）
          this.downY = downY;
          //最高點的y座標 當前狀態的y座標
          this.upY = this.normalState.y;
          //打擊的回調通知函數
          this.hitCallBackHandler = hitCallBackHandler;
          //重至
          this.reset();
  
          //給常態圖添加點擊事件 第一個是事件 第二個是執行域 第三個執行的方法
          this.normalState.on(Laya.Event.CLICK,this,this.hit)
      };
      var _proto = Mole.prorotype;
  
      //重值
      _proto.reset = function(){
          //隱藏
          this.normalState.visible = false;
          this.hitState.visible = false;
          //激活狀態
          this.isActive = false;
          //顯示狀態
          this.isShow = false;
          //受擊狀態
          this.isHit = false;
      }
  
      //顯示
      _proto.show = function(){
          //若是是激活了不作任何事情
          if(this.isActive)return ;
          this.isActive = true;
          this.isShow = true;
          //添加地鼠類型 1:兔子 2：地鼠
          this.type = Math.random()<0.6?2:1;
          //根據不一樣的類型顯示不一樣的皮膚
          this.normalState.skin = "ui/mouse_normal_"+this.type+".png";
          this.hitState.skin = "ui/mouse_hit_"+this.type+".png";
  
          //顯示地鼠
          this.normalState.visible = true;
          //讓地鼠回到最低座標
          this.normalState.y = this.downY;
          //讓地鼠緩衝出來
          Laya.Tween.to(this.normalState,{y:this.upY},500,Laya.Ease.backOut,Laya.Handler.create(this,this.showComplete));
      }
  
      //停留
      _proto.showComplete = function(){
          if(this.isShow && !this.isHit){
              //讓地鼠停留2秒 第一個參數停留時間，第二個參數執行域，第三個是回調
              Laya.timer.once(2000,this,this.hide)
          }
      }
  
      //消失
      _proto.hide = function(){
          if(this.isShow && !this.isHit){
              this.isShow = false;
              Laya.Tween.to(this.normalState,{y:this.downY},300,Laya.Ease.backIn,Handler.create(this,this.reset));
          }
      }
      //受擊
      _proto.hit = function (){
          if(this.isShow && !this.isHit){
              this.isShow = false;
              this.isHit = true;
              //隱藏常態圖 顯示受擊圖
              this.normalState.visible = false;
              this.hitState.visible = true;
              //清楚可能未被到時間的停留定時記 第一個參數是執行域 第二個參數是清楚的定時器方法
              Laya.timer.clear(this,this.hide);
              //通知打擊回調函數
              this.hitCallBackHandler.runWith(this.type);
              //讓地鼠停留一會後消失
              Laya.timer.once(500,this,this.reset);
          }
      }
  
      return Mole;
  })();