1.创建项目并资源导入

2.制作打地鼠界面

3.加载资源并显示打地鼠界面

在LayaAir中使用FairyGUI

http://www.fairygui.com/guide/laya/index.html

class MainPanel{
    private _view:fairygui.GComponent
    private _normalState:fairygui.GLoader;
    private _hitState:fairygui.GLoader;
    private mole:Mole;
    constructor()
    {
        this._view = fairygui.UIPackage.createObject("hitMole","back").asCom;
        this._view.setSize(fairygui.GRoot.inst.width,fairygui.GRoot.inst.height);
        fairygui.GRoot.inst.addChild(this._view);
        
        this._normalState = this._view.getChild("normal").asLoader;
        this._hitState = this._view.getChild("hit").asLoader;
        this.mole = new Mole(this._normalState,this._hitState,223);
        Laya.timer.loop(2000,this,this.onLoop);
    }
    onLoop():void{
        this.mole.show();
    }
}

4.地鼠到显示、停留、消失、受击

class Mole{
    private _normalState:fairygui.GLoader;  //正常状态图片
    private _hitState:fairygui.GLoader;     //受击状态图片
    private _downY:number;                  //地鼠显示状态到最高坐标Y值
    private _UpY:number;                    //地鼠消失之前到最低坐标Y值
    private isAction:boolean;               //当前地鼠是否已被激活
    private isShow:boolean;                 //地鼠是否处于显示状态
    private isHit:boolean;                  //地鼠是否处于被击状态

    constructor(normalState:fairygui.GLoader,hitState:fairygui.GLoader,dowmY:number){
        this._normalState = normalState;
        this._hitState = hitState;
        this._downY = dowmY;
        this._UpY = normalState.y;
        this.reset();
        this._normalState.on(Laya.Event.MOUSE_DOWN,this,this.hit);
    }

    //重置
    reset():void{
        this._normalState.visible = false;
        this._hitState.visible = false;
        this.isAction = false;
        this.isShow = false;
        this.isHit = false;
    }

    //显示
    show():void{
        if(this.isAction)return;
        this.isShow = true;
        this.isAction = true;
        this._normalState.y = this._downY;
        this._normalState.visible = true;
        Laya.Tween.to(this._normalState,{y:this._UpY},500,Laya.Ease.backOut,Laya.Handler.create(this,this.showComplete));
    }

    //停留
    showComplete():void{
        if(this.isShow && !this.isHit){
            Laya.timer.once(1500,this,this.hide);
        }
    }

    //消失
    hide():void{
        if(this.isShow && !this.isHit){
            this.isShow = false;
            Laya.Tween.to(this._normalState,{y:this._downY},300,Laya.Ease.backIn,Laya.Handler.create(this,this.reset));
            
            
        }
    }

    //打击
    hit():void{
        if(this.isShow && !this.isHit){
            this.isHit = true;
            this.isShow = false;
            Laya.timer.clear(this,this.hide);
            this._normalState.visible = false;
            this._hitState.visible = true;
            Laya.timer.once(500,this,this.reset);

        }
    }
}