實作提示按鈕

新增檔案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