堆疊與佇列

堆疊 (Stack)

• 加入(push)與刪除(pop)於同一端
• 具有後進先出(LIFO, Last-in-First-out)或先進後出(FILO, First-in-Last-out)性質的有序串列
• 例子：疊盤子、發牌、走迷宮

佇列 (Queue)

• 加入(enqueue)與刪除(dequeue)於不同端(front & rear)
• 先進先出(FIFO, First-in-First-out)
• 例子：排隊買票、坐公車

實作復原功能

復原功能比較像是走迷宮，一定是先從最後一步開始復原，因此這邊我們採用堆疊的方式。堆疊最簡單的實作方式就是使用array，並用pop以及push來塞入、取出資料。

首先先創建一個類別名為RevertBtn.ts

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

export class RevertBtn extends ButtonBase {

    constructor() {
        super('Button','Revert',50,345);
    }
    public trigger(){
        eventEmitter.emit(GameFlowEvent.RevertBackRequest);
    }
}

接著在GameScene.ts加入RevertBtn這個按鈕

export class GameScene {
    
    public static draw(){
        //加入背景
        application.stage.addChild(PIXI.Sprite.from(Loader.resources["background"].texture));
        //加入按鈕
        application.stage.addChild(new SoundBtn());
        application.stage.addChild(new RevertBtn());
        //加入連連看牌面
        application.stage.addChild(new GameBoard());
        application.stage.addChild(LinkedLine.instance);
        //角色動畫
        application.stage.addChild(new Character());
    }
}

然後去GameBoard.ts註冊GameFlowEvent.RevertBackRequest這個事件

constructor() {
    super();
    this.createNewGame();
    this.x = 175;
    this.y = 20;

    eventEmitter.on(GameFlowEvent.RevertBackRequest,this.revertBoard.bind(this));
}

並新增revertBoard的方法

revertBoard = ()=>{
    let value = this.valueHistory.pop();
    let path = this.pathHistory.pop();
    if(value != null && path != null){
        board.board[path.point1.x][path.point1.y] = value;
        board.board[path.point2.x][path.point2.y] = value;

        this.drawBoardIcon();
        SoundMgr.play('Back');
    }
}ack');
    }
}

然後在每次成功連線時，將成功連線的方塊的值和位置存進陣列裡

createIcon = (id, x, y)=>{
    let icon = new GameIcon(id,x,y);
    this.addChild(icon);
    let iconClickHandler = ()=>{
        if (this.selected) {
            let selectCorrect = false;
            this.select2 = new Point(x, y);
            this.iconSelected(this.select2);
            setTimeout(()=>{
                if (board.hasSameValue(this.select1, this.select2)) {
                    if (! (this.select1.x == x && this.select1.y == y) ) {
                        let path = new Path(this.select1, this.select2, board);
                        if(path.canLinkInLine()){
                            this.pathHistory.push(path);//存入選擇的點
                            this.valueHistory.push(board.getValue(this.select1));//存入消掉的符號id
                            LinkedLine.instance.drawPath(path);
                            this.clearIcon(this.select1);
                            this.clearIcon(this.select2);
                            eventEmitter.emit(GameFlowEvent.LinkedLineSuccess);
                            selectCorrect = true;
                            //判斷還有沒有路走
                            if(board.gameRoundEnd()){
                                alert("恭喜完成遊戲!");
                                this.createNewGame();
                            }else if(board.getFirstExistPath() == null){
                                this.reloadTimes--;
                                board.rearrangeBoard();
                            }
                        }
                    }
                }
                if(selectCorrect){
                    SoundMgr.play('Sound_select_crrect');
                }else{
                    SoundMgr.play('Sound_select_error');
                    this.iconUnSelected(this.select1);
                    this.iconUnSelected(this.select2);
                }
                this.selected = false;
            },0);

        } else {
            this.select1 = new Point(x, y);
            this.iconSelected(this.select1);
            this.selected = true;
            SoundMgr.play('Sound_select_1');

        }
    };
icon.on("click", iconClickHandler);
icon.on("tap", iconClickHandler);
}

今日成果

線上展示：http://claire-chang.com/ironman2018/1107
今日成果下載： ironman20181107