Layabox引擎開發H5打地鼠遊戲（三）

第三節 編輯遊戲界面、實作地鼠的随機出現

1. 編輯UI界面，給每個樹洞添加地鼠
2. 随機從某個樹洞中出現地鼠

3. 随機不同類型的地鼠

   代碼及相關資源下載下傳

編輯UI界面，給每個樹洞添加地鼠

将var的值移動到name的值

即

選中box，再點選重複複制

點選确定，再将圖檔拉到合适的位置，并進行地圖每個洞的草坪的圖檔替換

替換方法：1、直接将圖檔拖動到對應的位置

2、根據圖檔的名字手動修改

完成

記得完成後導出（F12）

随機從某個樹洞中出現地鼠

Game.js

var Game=(function(_super){
   function Game(){
       this.moles=new Array;
       this.moleNum =;
       Game.super(this);
       for(var i=;i<this.moleNum;i++){
           this.box=this.getChildByName("item"+i);
           this.mole=new Mole(this.box.getChildByName("normal"),this.box.getChildByName("hit"),);
           this.moles.push(this.mole);
       }
      // this.mole=new Mole(this.normal,this.hit,22);

       Laya.timer.loop(,this,this.isShow);
   }
   //注冊類
   Laya.class(Game,"Game",_super);
   var _proto=Game.prototype;
   _proto.isShow=function(){
    // this.mole.show();
        this.index=Math.floor(Math.random()*this.moleNum);
        this.moles[this.index].show();
   }
   return Game;
})(ui.GameUI);
           

運作

成功

随機不同類型的地鼠

在Mole.js的_proto.show修改代碼如下：

_proto.show=function(){
          if(this.isVctive) return;
          this.isVctive=true;
          this.isShow=true;
          this.type=Math.random()<?:;
          this.normalState.skin="comp/mouse_normal_"+this.type+".png";
          this.hitState.skin="comp/mouse_hit_"+this.type+".png";
          this.normalState.y=this.downY;
          this.normalState.visible=true;
        //  this.hitState.visible=false;
          Laya.Tween.to(this.normalState,{y:this.upY},,Laya.Ease.backOut,Laya.Handler.create(this,this.showComplete))
    }
           

注意這裡的圖檔路徑檔案名是這個：

運作 成功顯示

Layabox引擎開發H5打地鼠遊戲（二）地鼠的顯示、停留、消失、受擊