LayaAir + FairyGUI + TypeScript HTML5打地鼠游戏-2

1.用FairyGUI编辑UI界面,给每个树洞添加地鼠,包括倒计时进度条,得分,地鼠头上的得分飘字效果还有小锤子.

建一个组件作为地鼠个体,里面有三个装载器,分别装载正常地鼠图片、被击地鼠图片和地鼠头上的得分效果.

 

倒计时进度条

得分的总分用位图字体

新建一个组件,来设置小锤子,并添加小锤子动效.

根据地鼠位置和遮盖物图层来给各个洞口放置地鼠装载器和遮盖物

2.最后用LayaAir引擎写TS代码实现随机从某个树洞中出现随机类型的地鼠,游戏倒计时、游戏得分、游戏的得分飘字和锤子锤击地鼠的效果.

class MainPanel{
    private _view:fairygui.GComponent
    private _coms:fairygui.GComponent;
    private _progressBar:fairygui.GProgressBar;
    private moles:Array<Mole>;
    private moleNum:number = 9;
    private score:number;
    private hammer:Hammer;

    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._progressBar = this._view.getChild("progressBar").asProgress;
        this._progressBar.value = 100;
        this.score = 0;
        
        //处理事件
        var hitCallBack:Laya.Handler = Laya.Handler.create(this,this.setScore,null,false);

        //设置各个洞口的地鼠
        this.moles = new Array<Mole>();
        for(var i:number = 0; i < this.moleNum; i++){
            this._coms = this._view.getChild("Mole"+i).asCom;
            var mole:Mole = new Mole(this._coms.getChild("normal").asLoader,
            this._coms.getChild("hit").asLoader,24,hitCallBack,
            this._coms.getChild("score1").asLoader);
            this.moles.push(mole);
        }

        this.hammer = new Hammer(this._view);
        this.hammer.start();
        this.hammer.addView();
        //定时器
        Laya.timer.loop(1000,this,this.onLoop); 
    }
    onLoop():void{
        this._progressBar.value -= 5; 
        if(this._progressBar.value <= 0){
            this.gameOver();
            return;
        }
        var index:number = Math.floor(Math.random()*this.moleNum);
        this.moles[index].show();
    }
    //游戏结束
    gameOver():void{
        Laya.timer.clear(this,this.onLoop);
        this.hammer.end();
        console.log("游戏结束");
    }
    //得分
    setScore(type:number):void{
        this.score += (type==1? 100:-100);
        if(this.score < 0)this.score = 0;
        this._view.getChild("score").text = ""+this.score;
    }
    
}

/**
 * 地鼠
 */
class Mole{
    private _normalState:fairygui.GLoader;  //正常状态图片
    private _hitState:fairygui.GLoader;     //受击状态图片
    private _score:fairygui.GLoader;        //得分图片
    private _downY:number;                  //地鼠显示状态到最高坐标Y值
    private _upY:number;                    //地鼠消失之前到最低坐标Y值
    private _scoreY:number                  //得分图片显示的最高坐标Y值
    private isAction:boolean;               //当前地鼠是否已被激活
    private isShow:boolean;                 //地鼠是否处于显示状态
    private isHit:boolean;                  //地鼠是否处于被击状态
    private type:number;                    //地鼠类型
    private hitCallBack:Laya.Handler;
    
    constructor(normalState:fairygui.GLoader,hitState:fairygui.GLoader,dowmY:number,hitCallBack:Laya.Handler,score:fairygui.GLoader){
        this._normalState = normalState;
        this._hitState = hitState;
        this._score = score;
        this._downY = dowmY;
        this._upY = normalState.y;
        this._scoreY = score.y;
        this.hitCallBack = hitCallBack;
        this.reset();
        this._normalState.on(Laya.Event.MOUSE_DOWN,this,this.hit);
    }

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

    //显示
    show():void{
        if(this.isAction)return;
        this.isShow = true;
        this.isAction = true;
        this.type = Math.random()>0.3?1:2;
        this._normalState.url = "img/mouse_normal_" + this.type + ".png";
        this._hitState.url = "img/mouse_hit_" + this.type + ".png";
        this._score.url = "img/score_" + this.type + ".png";
        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(2000,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;
            this.hitCallBack.runWith(this.type);
            Laya.timer.once(500,this,this.reset);
            this.showScore();
        }
    }

    //显示得分飘字
    showScore():void{
        this._score.visible = true;
        this._score.y = this._scoreY + 30;
        this._score.scaleX = 0;
        this._score.scaleY = 0;
        Laya.Tween.to(this._score,{y:this._scoreY,scaleX:1,scaleY:1},300,Laya.Ease.backOut);
    }
}

/**
 * 小锤子
 */
class Hammer {
    private _view:fairygui.GComponent;
    private _com:fairygui.GComponent;
    constructor(view:fairygui.GComponent){
        this._com = fairygui.UIPackage.createObject("hitMole","hammer").asCom;
        this._view = view;  
    }
    //把锤子组件添加到主视图上
    addView():void{
        this._view.addChild(this._com);
    }
    //使用
    start():void{
        //鼠标隐藏
        Laya.Mouse.hide();
        //添加舞台监听事件,监听鼠标按下
        Laya.stage.on(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
        //添加舞台监听事件,监听鼠标移动
        Laya.stage.on(Laya.Event.MOUSE_MOVE,this,this.onMouseMove);
    }
    //结束使用
    end():void{
        //鼠标显示
        Laya.Mouse.show();
        //锤子图片隐藏
        this._com.getChild("n0").asImage.visible = false;
        //关闭舞台监听事件
        Laya.stage.off(Laya.Event.MOUSE_DOWN,this,this.onMouseDown);
        Laya.stage.off(Laya.Event.MOUSE_MOVE,this,this.onMouseMove);
    }
    //鼠标点击，锤子锤下
    onMouseDown():void{
        //播放锤子动效
        this._com.getTransition("t0").play();
    }
    //锤子跟着鼠标移动
    onMouseMove():void{
        //设置组件跟随鼠标移动的位置
        this._com.setXY(Laya.stage.mouseX-this._com.width/2,Laya.stage.mouseY-this._com.height/2);
    }
}

效果