[23- Pixi教學] 復原按鈕功能實作

堆疊與佇列

堆疊 (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