[24- Pixi教學] 提示、重整按鈕功能實作

實作提示按鈕

新增檔案TipBtn.ts，內容如下：

import { ButtonBase } from "./ButtonBase";
import { eventEmitter } from "../Main";
import { GameFlowEvent } from "../core/Event";

export class TipBtn extends ButtonBase {
    constructor() {
        super('Button','Tip',50,287);
    }

    public trigger(){
        eventEmitter.emit(GameFlowEvent.TipsRequest);
    }
}

在GameBoard.ts裡的constructor監聽TipsRequest事件

eventEmitter.on(GameFlowEvent.TipsRequest,this.showTips.bind(this));

並新增所需要的方法

    private tipsPath:Path;
    showTips = ()=>{
        this.tipsPath = board.getFirstExistPath();
        let icon1 = this.getChildByName('icon_'+this.tipsPath.point1.x+"_"+this.tipsPath.point1.y) as GameIcon;
        icon1.select();//為可連線的方塊增加紅框提示玩家

        let icon2 = this.getChildByName('icon_'+this.tipsPath.point2.x+"_"+this.tipsPath.point2.y) as GameIcon;
        icon2.select();
        SoundMgr.play('Tips');
    }

因為若玩家此時選擇了其他的方塊，我們需要把提示的框消除掉以避免混淆

    createIcon = (id, x, y)=>{
        let icon = new GameIcon(id,x,y);
        this.addChild(icon);
        let iconClickHandler = ()=>{
            this.cancelTips();//在這時將提示的框消除
            if (this.selected) {
                //...
            }
        }
    }

並實作消除提示紅框的功能

    cancelTips=()=>{
        if(this.tipsPath == null){
            return;
        }
        let icon1 = this.getChildByName('icon_'+this.tipsPath.point1.x+"_"+this.tipsPath.point1.y) as GameIcon;
        if(icon1) icon1.unSelect();

        let icon2 = this.getChildByName('icon_'+this.tipsPath.point2.x+"_"+this.tipsPath.point2.y) as GameIcon;
        if(icon2) icon2.unSelect();
    }

實作重整按鈕

新增檔案ReloadBtn.ts，內容如下：

import { ButtonBase } from "./ButtonBase";
import { eventEmitter } from "../Main";
import { GameFlowEvent } from "../core/Event";
import { reloadTimes } from "./GameBoard";

export class ReloadBtn extends ButtonBase {
    constructor() {
        super('Button','Reflash',50,230);
        eventEmitter.on(GameFlowEvent.GameRoundStart,(()=>{
            this.enable = true;
        }).bind(this))
    }
    public trigger(){
        if(reloadTimes > 0){
            eventEmitter.emit(GameFlowEvent.ReloadBoardRequest);
        }
        if(reloadTimes == 0){
            this.enable = false;
        }
    }
}

在GameBoard.ts裡的constructor監聽ReloadBoardRequest事件

eventEmitter.on(GameFlowEvent.ReloadBoardRequest, this.reloadBoard.bind(this));

並實作所需的方法

    reloadBoard = ()=>{
        this.reloadTimes--;
        do{
            board.rearrangeBoard();
        }while(board.getFirstExistPath() == null)
        this.drawBoardIcon();
        SoundMgr.play('ReloadBoard');
    }

今日成果

線上demo：http://claire-chang.com/ironman2018/1108/
今日成果下載：ironman20181108