layabox3:打地鼠編輯遊戲界面/實現地鼠的隨機出現

1.編輯UI界面，給每一個樹洞添加地鼠資源

• 導入地鼠資源和遮罩圖資源
• 把var:normal 改成 name:normal,var:hit 改成：name:hit
• 快速複製每個box
• 生成的box命名規則是item0----item8，調整地鼠位置，替換每個遮罩的皮膚（拖動ui皮膚到skin）
• 導出界面，回到代碼模式

2.隨機從某個樹洞中出現地鼠(修改Game.js)

var Game = (function(_super){
    function Game(){
        Game.super(this);
        this.moles = new Array;
        this.moleNum = 9;
        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(2000,this,this.show);
    }
    //繼承父類
    Laya.class(Game,"Game",_super);

    //註冊類的原型
    _proto = Game.prototype;
    
    //實現每個方法
    _proto.show = function(){
        //隨機出現地鼠
        this.index = Math.floor(Math.random()*this.moleNum);
        //顯示地鼠
        this.moles[this.index].show();
    }

    //返回當前類
    return Game;
})(ui.GameUI)

 

3.隨機不一樣類型的地鼠(修改Mole.js)

/**
知識點：代碼提示：刷新編輯器
*/
var Mole = (function(){
    function Mole(normalState,hitState,downY){
        //正常狀態地鼠
        this.normalState = normalState;
        //受擊狀態地鼠
        this.hitState = hitState;
        //最低點的y座標 （到編輯界面中查找）
        this.downY = downY;
        //最高點的y座標 當前狀態的y座標
        this.upY = this.normalState.y;
        //重至
        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);
            //讓地鼠停留一會後消失
            Laya.timer.once(500,this,this.reset);
        }
    }

    return Mole;
})();