LayaIDE實現推箱子游戲

一.項目簡介

在上次博客C++實現推箱子中採用的是VS2013編輯器 + exe命令窗口實現，界面實現不夠友好；在學習laya引擎後，就想着手用可視化編輯器改寫C++推箱子的實現，鞏固自己在laya學習方面的知識和邏輯思維能力。
[推送鏈接]C++實現推箱子

二.項目架構

.laya

   存放項目在開發運行中的一些配置文件

bin

	存放當前項目的輸出文件
	config:存放遊戲配置文件(推箱子地圖文件)
	js:存放bundle.js文件
	libs:存放項目用到的類庫文件	
	modules:存放場景文件
	prefabs:存放預製體文件
	res:存放圖集資源
	index.html：函數入口
	laya
	assets:存放UI場景中所需的組件圖片、音頻文件等資源、
	pages:存放IDE中的場景、動畫、預設等配置文件

.laya:LayaAirIDE UI項目配置文件
libs

	目錄爲項目庫目錄，目錄下有LayaAir.d.ts、layaAir.minigame.d.ts、union.d.ts、wx.d.ts.

src

   項目源代碼目錄(ui目錄屬於IDE自動生成的)

   config:存放遊戲配置
   controller:遊戲Controller類，存放掛載在界面上的腳本
   logics:存放遊戲核心邏輯
   ui：ui目錄屬於IDE自動生成的
   utils:存放工具文件
   view:存放界面文件
   GameConfig.ts：項目配置文件,IDE自動生成
   Main.ts:項目入口文件

Example.laya

	LayaAirIDE項目的工程配置文件，文件內記錄了當前項目的項目名稱、使用的類庫版號等。

tsconfig.json

	存放着IDE的編譯配置信息，勿刪。

Src目錄詳解

config:遊戲配置
   GameConfigs.ts                     			——遊戲數據配置
   PanelConfig.ts                      			—— UI面板配置
controller:遊戲Controller類，存放掛載在界面上的腳本
game:存放遊戲核心邏輯
   GameLogic.ts                                 —— 包含初始化、繪製、移動，更新、判斷結束、銷燬等邏輯
   GameMap.ts                                   —— 獲取遊戲地圖數據
manager:管理文件
   UIManager.ts                                	——界面管理
utils:工具文件
   CommonUtils.ts                          		——公用工具
   LogUtils.ts                                  ——日誌工具
view:存放界面文件
game
 	GameView.ts                               	 ——遊戲界面
gameEnd
	GameEndView.ts                          	 ——結算頁面
hall
 	HallView.ts                                  ——大廳頁面

 ui：ui目錄屬於IDE自動生成的
 GameConfig.ts：項目配置文件,IDE自動生成
 Main.ts:項目入口文件

三.思維導圖

四.代碼塊

//GameConfigs.ts
/**
 * @desc 方向枚舉
 */
export enum Dir {
    NONE = 0,
    UP = 1,
    DOWN = 2,
    LEFT = 3,
    RIGHT = 4,
}

/**
 * @desc 遊戲配置
 */
export default class GameConfigs {

    //當前關卡
    public static _curLevel: number = 1;

    public static set CurLevel(value) {
        this._curLevel = value;
    }

    public static get CurLevel() {
        return this._curLevel;
    }

    //當前關卡步數
    private static _curStep: number = 0;

    public static set CurStep(value) {
        this._curStep = value;
    }

    public static get CurStep() {
        return this._curStep;
    }
    //地圖單塊實際長度
    public static readonly block_width = 50;

}

//PanelConfig.ts
/**
 * @desc 面板配置
 */
export default class PanelConfig {

    //場景類型
    //首頁場景
    public static readonly SCENE_HALL = "pushBox/hall/HallScene.scene";
    //遊戲場景
    public static readonly SCENE_GAME = "pushBox/game/GameScene.scene";
    //結算頁場景
    public static readonly SCENE_GAMEEND = "pushBox/gameEnd/GameEndScene.scene";
}

//GameLofic 遊戲核心邏輯:初始化、繪製、移動、判斷結束、銷燬等等

import GameConfigs, { Dir } from "../config/GameConfigs";

/**
 * @desc 遊戲核心邏輯
 */
export default class GameLogic {
    //0 - 空地
    public prefab_space: Laya.Prefab;
    public space: Laya.Image;
    //1 - 牆壁
    public prefab_wall: Laya.Prefab;
    public wall: Laya.Image;
    //2 - 人物
    public prefab_man: Laya.Prefab;
    public man: Laya.Image;
    //3 - 箱子
    public prefab_box: Laya.Prefab;
    public box: Laya.Image;
    //4- 終點
    public prefab_end: Laya.Prefab;
    public end: Laya.Image;
    //6 - 終點+人物
    public prefab_peopleEnd: Laya.Prefab;
    public peopleEnd: Laya.Image;
    //7 - 終點+箱子
    public prefab_boxEnd: Laya.Prefab;
    public boxEnd: Laya.Image;

    public nodes: Array<any> = [];

    //人物位置
    private posX: number = 0;
    private posY: number = 0;

    //人物是否移動位置
    private _moveFalg: boolean = false;

    public set MoveFalg(value) {
        this._moveFalg = value;
    }

    public get MoveFalg() {
        return this._moveFalg;
    }

    private static _instance: GameLogic;
    public static get instance(): GameLogic {
        if (this._instance == null) {
            this._instance = new GameLogic();
        }
        return this._instance;
    }

    /**
     * @desc 預製體初始化
     * @param space 
     * @param wall 
     * @param man 
     * @param box 
     * @param peopleEnd 
     * @param peopleBox 
     */
    public init(space, wall, man, box, end, peopleEnd, boxEnd) {
        this.prefab_space = space;
        this.prefab_wall = wall;
        this.prefab_man = man
        this.prefab_box = box;
        this.prefab_end = end;
        this.prefab_peopleEnd = peopleEnd;
        this.prefab_boxEnd = boxEnd;
    }

    /**
     * @desc 繪製地圖
     * @param node
     * @param map 
     * @param width 
     * @param height 
     */
    public draw(node, map, width, height) {
        if (!map || map.length < 0) return;

        //刪除所有預製體
        node.removeChildren();

        let self = this;
        for (var i = 0; i < width; i++) {
            for (var j = 0; j < height; j++) {
                switch (map[i][j]) {
                    //生成空地
                    case 0:
                        self.space = Laya.Pool.getItemByCreateFun("space", self.prefab_space.create, self.prefab_space);
                        self.space.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.space);
                        //生成的節點放入數組處理
                        self.nodes.push(self.space);
                        break;
                    //生成牆壁
                    case 1:
                        self.wall = Laya.Pool.getItemByCreateFun("wall", self.prefab_wall.create, self.prefab_wall);
                        self.wall.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.wall);
                        //生成的節點放入數組處理
                        self.nodes.push(self.wall);
                        break;
                    //生成人物
                    case 2:
                        self.man = Laya.Pool.getItemByCreateFun("man", self.prefab_man.create, self.prefab_man);
                        self.man.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.man);
                        //生成的節點放入數組處理
                        self.nodes.push(self.man);
                        break;
                    //生成箱子
                    case 3:
                        self.box = Laya.Pool.getItemByCreateFun("box", self.prefab_box.create, self.prefab_box);
                        self.box.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.box);
                        //生成的節點放入數組處理
                        self.nodes.push(self.box);
                        break;
                    //生成終點
                    case 4:
                        self.end = Laya.Pool.getItemByCreateFun("end", self.prefab_end.create, self.prefab_end);
                        self.end.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.end);
                        //生成的節點放入數組處理
                        self.nodes.push(self.end);
                        break;
                    //生成終點 + 人
                    case 6:
                        self.peopleEnd = Laya.Pool.getItemByCreateFun("peopleEnd", self.prefab_peopleEnd.create, self.prefab_peopleEnd);
                        self.peopleEnd.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.peopleEnd);
                        //生成的節點放入數組處理
                        self.nodes.push(self.peopleEnd);
                        break;
                    //生成終點 + 箱子
                    case 7:
                        self.boxEnd = Laya.Pool.getItemByCreateFun("boxEnd", self.prefab_boxEnd.create, self.prefab_boxEnd);
                        self.boxEnd.pos(j * GameConfigs.block_width, i * GameConfigs.block_width);
                        node.addChild(self.boxEnd);
                        //生成的節點放入數組處理
                        self.nodes.push(self.boxEnd);
                        break;
                    default:
                        break;
                }
            }
        }
    }

    /**
     * @desc 人物移動
     * @param dir
     * @param map 
     * @param width 
     * @param height 
     */
    public move(dir, map, width, height) {
        if (!map || map.length < 0) return;

        let self = this;
        let offsetX = 0, offsetY = 0;
        switch (dir) {
            //向上移動
            case Dir.UP:
                offsetX = -1;
                offsetY = 0;

                //更新map
                self.MoveFalg = self.push(map, width, height, offsetX, offsetY);
                break;
            //向下移動
            case Dir.DOWN:
                offsetX = 1;
                offsetY = 0;

                //更新map
                self.MoveFalg = self.push(map, width, height, offsetX, offsetY);
                break;
            //向左移動
            case Dir.LEFT:
                offsetX = 0;
                offsetY = -1;

                //更新map
                self.MoveFalg = self.push(map, width, height, offsetX, offsetY);
                break;
            //向右移動
            case Dir.RIGHT:
                offsetX = 0;
                offsetY = 1;

                //更新map
                self.MoveFalg = self.push(map, width, height, offsetX, offsetY);
                break;
            default:
                break;
        }
    }

    /**
     * @desc 找到人物座標
     * @param map 
     * @param width 
     * @param height 
     */
    public getPosition(map, width, height) {
        let self = this;

        for (var i = 0; i < width; i++) {
            for (var j = 0; j < height; j++) {
                if (2 == map[i][j] || 6 == map[i][j]) {
                    self.posX = i;
                    self.posY = j;
                }
            }
        }
    }

    /**
     * @desc 更新遊戲
     * @param map 
     * @param width 
     * @param height 
     * @param offsetX 
     * @param offsetY 
     */
    public push(map, width, height, offsetX, offsetY): boolean {
        let self = this;

        self.getPosition(map, width, height);
        //人物移動前方是空地
        if (map[self.posX + offsetX][self.posY + offsetY] == 0) {
            //前一格變爲空地/終點
            map[self.posX][self.posY] -= 2;
            //下一格變爲人物
            map[self.posX + offsetX][self.posY + offsetY] = 2;

            //更新人物位置
            self.posX += offsetX;
            self.posY += offsetY;
        }
        //人物移動前方是箱子
        else if (map[self.posX + offsetX][self.posY + offsetY] == 3) {
            //人物移動前兩格是空地/終點
            if (0 == map[self.posX + offsetX * 2][self.posY + offsetY * 2]
                || 4 == map[self.posX + offsetX * 2][self.posY + offsetY * 2]) {
                //前一格變爲空地/終點
                map[self.posX][self.posY] -= 2;
                //下一格變爲人物
                map[self.posX + offsetX][self.posY + offsetY] = 2;
                //下兩格變爲箱子/箱子 + 終點
                map[self.posX + offsetX * 2][self.posY + offsetY * 2] += 3;

                //更新人物位置
                self.posX += offsetX;
                self.posY += offsetY;
            }
        }
        //人物移動前方是終點
        else if (map[self.posX + offsetX][self.posY + offsetY] == 4) {
            //前一格變爲空地/終點
            map[self.posX][self.posY] -= 2;
            //下一格變爲人物 + 終點
            map[self.posX + offsetX][self.posY + offsetY] = 6;

            //更新人物位置
            self.posX += offsetX;
            self.posY += offsetY;
        }
        //人物移動前方是終點 + 箱子
        else if (map[self.posX + offsetX][self.posY + offsetY] == 7) {
            //人物移動前兩格是空地/終點
            if (0 == map[self.posX + offsetX * 2][self.posY + offsetY * 2]
                || 4 == map[self.posX + offsetX * 2][self.posY + offsetY * 2]) {
                //前一格變爲空地/終點
                map[self.posX][self.posY] -= 2;
                //下一格變爲人物
                map[self.posX + offsetX][self.posY + offsetY] = 6;
                //下兩格變爲箱子/箱子 + 終點
                map[self.posX + offsetX * 2][self.posY + offsetY * 2] += 3;

                //更新人物位置
                self.posX += offsetX;
                self.posY += offsetY;
            }
        } else {
            return false;
        }

        return true;
    }

    /**
     * @desc 判斷遊戲勝利條件
     * @param map 
     * @param width 
     * @param height 
     */
    public juide(map, width, height) {
        for (var i = 0; i < width; i++) {
            for (var j = 0; j < height; j++) {
                if (map[i][j] == 4 || map[i][j] == 6) {
                    return 0;
                }
            }
        }

        return 1;
    }

    /**
     * @desc 銷燬
     * @param map 
     * @param width 
     * @param height 
     */
    public destroy(map, width, height) {
        let self = this;

        //銷燬的地圖數據
        for (var i = 0; i < width; i++) {
            for (var j = 0; j < height; j++) {
                if (map.length > 0) map[i][j] = 0;
            }
        }
        map.length = 0;

        //銷燬節點數據
        self.nodes.forEach(element => {
            element.removeSelf();
            Laya.Pool.recover(element.name, element);
        });
    }
}

import LogUtil from "../utils/LogUtils";

/**
 * @desc 獲取遊戲地圖信息
 */
export default class GameMap {
    private static mapInfo: Array<any> = [];

    /**
     * @desc 獲取地圖信息
     */
    public static get MapInfo() {
        let self = this;

        self.mapInfo = Laya.loader.getRes("pushBox/config/map.json");
        return self.mapInfo;
    }

    /**
     * @desc 獲取地圖信息長度
     */
    public static get MapInfoLength() {
        let self = this;

        return self.mapInfo.length;
    }

    /**
     * @desc 獲取關卡地圖數據
     * @param mapId 
     */
    public static getMap(mapId): Array<any> {
        let self = this;

        try {
            for (var i = 0; i < self.mapInfo.length; i++) {
                if (self.mapInfo[i].mapId == mapId) {
                    return self.mapInfo[i].map;
                }
            }
        } catch (e) {
            LogUtil.error('Amumu GameMap error', e);
        }
    }

    /**
     * @desc 獲取mapId
     * @param level
     */
    public static getMapId(level): number {
        if (level > 0) return 10000 + level;
    }

    /**
     * @desc 獲取mapWidth
     * @param mapId 
     */
    public static getMapWidth(mapId): number {
        let self = this;

        if (!self.mapInfo) return;
        mapId = JSON.parse(mapId);

        let width: string = "";
        for (var i = 0; i < self.mapInfo.length; i++) {
            if (self.mapInfo[i].mapId == mapId) {
                width = self.mapInfo[i].mapWidth;
                break;
            }
        }
        return parseInt(width);
    }

    /**
     * @desc 獲取mapHeight
     * @param mapId 
     */
    public static getMapHeight(mapId): number {
        let self = this;

        if (!self.mapInfo) return;
        mapId = JSON.parse(mapId);

        let height: string = "";
        for (var i = 0; i < self.mapInfo.length; i++) {
            if (self.mapInfo[i].mapId == mapId) {
                height = self.mapInfo[i].mapHeight;
                break;
            }
        }
        return parseInt(height);
    }
}

/**
 * @desc UI界面管理
 */
export default class UIManager {

    private static _instance: UIManager;
    public static get instance(): UIManager {
        if (this._instance == null) {
            this._instance = new UIManager();
        }
        return this._instance;
    }

    /**
     * @desc 打開場景
     * @param name 
     */
    public openScene(name: string) {
        if (!name || name == "") return;

        Laya.Scene.open(name);
    }

    /**
   * @desc 關閉場景
   * @param name 
   */
    public closeScene(name: string) {
        if (!name || name == "") return;

        Laya.Scene.close(name);
    }

    /**
     * @desc 打開彈框
     * @param name 
     */
    public openDialog(name: string) {
        if (!name || name == "") return;

        Laya.Scene.open(name);
    }

    /**
    * @desc 關閉彈框
    * @param name 
    */
    public closeDialog(name: string) {
        if (!name || name == "") return;

        Laya.Scene.close(name);
    }

}

/**
 * @desc 公用工具類
 */
export default class CommonUtils {
    /**
     * @desc 存儲指定鍵名和鍵值
     * @param key 
     * @param value 
     */
    public static localSetItem(key, value) {
        Laya.LocalStorage.setItem(key, value);
    }

    /**
     * @desc 獲取指定鍵值
     * @param key 
     * @param value 
    */
    public static localGetItem(key) {
        return Laya.LocalStorage.getItem(key);
    }

    /**
     * @desc 存儲指定鍵名和鍵值(Object類型)
     * @param key 
     * @param value 
     */
    public static localSetJSON(key, value) {
        Laya.LocalStorage.setJSON(key, value);
    }

    /**
     * @desc 獲取指定鍵值(Object類型)
     * @param key 
     */
    public static localGetJSON(key) {
        return Laya.LocalStorage.getJSON(key);
    }

    /**
    * @desc 轉化時間格式
    * @param time 
    */
    public static getFormatTime(time: number): string {
        if (time < 0) return;
        var strTime;
        let minute = Math.floor(time / 60);
        let second = time % 60;
        if (minute < 10) {
            if (second < 10) {
                strTime = "0" + minute + ":" + "0" + second;
            }
            else {
                strTime = "0" + minute + ":" + second;
            }
        }
        else {
            if (second < 10) {
                strTime = minute + ":" + "0" + second;
            }
            else {
                strTime = minute + ":" + second;
            }
        }
        return strTime;
    }

    /**
	 * @desc    獲得隨機整數值
	 * @param	min
	 * @param	max(不包含)
	 * @return  number 
	 */
    public static rangeInt(min: number, max: number): number {
        return Math.floor(Math.random() * (max - min) + min);
    }

    /**
     * @desc  轉化爲百分比形式
     * @param num 
     */
    public static formatPercentage(num: number): string {
        if (num == null || num < 0) return;
        return Math.floor(num * 100) + "%";
    }

    /**
     * @desc 轉化爲以千爲單位的格式
     * @param num 
     */
    public static formatThousand(num: number): string {
        if (num == null || num < 0) return;
        return num < 1000 ? "" + Math.floor(num) : Math.floor(num / 1000) + Math.floor(num % 1000 / 100) / 10 + "k";
    }
};

/**
 * @desc 打印日誌工具
 */
export default class LogUtil {
    private static _hasLog: boolean = false;

    /**
     * @desc 設置是否打印日誌
     */
    public static set HasLog(value) {
        let self = this;

        self._hasLog = value;
    }

    /**
     * @desc 獲取是否打印日誌
     */
    public static get HasLog() {
        let self = this;

        return self._hasLog;
    }

    /**
     * @desc 打印log
     * @param message 
     * @param optionalParams 
     */
    public static log(message, ...optionalParams) {
        let self = this;

        if (self.HasLog) {
            console.log(message, optionalParams);
        }
    }

    /**
    * @desc 打印error
    * @param message 
    * @param optionalParams 
    */
    public static error(message, ...optionalParams) {
        let self = this;

        if (self.HasLog) {
            console.error(message, optionalParams);
        }
    }

    /**
     * @desc 打印info
     * @param message 
     * @param optionalParams 
     */
    public static info(message, ...optionalParams) {
        let self = this;

        if (self.HasLog) {
            console.info(message, optionalParams);
        }
    }

    /**
     * @desc 打印debug
     * @param message 
     * @param optionalParams 
     */
    public static debug(message, ...optionalParams) {
        let self = this;

        if (self.HasLog) {
            console.debug(message, optionalParams);
        }
    }
}

import { ui } from "../../../../ui/layaMaxUI";

import GameSceneUI = ui.pushBox.game.GameSceneUI;
import GameLogic from "../../game/GameLogic";
import GameConfigs, { Dir } from "../../config/GameConfigs";
import UIManager from "../../manager/UIManager";
import GameMap from "../../game/GameMap";
import LogUtil from "../../utils/LogUtils";
import PanelConfig from "../../config/PanelConfig";

/**
 * @desc 遊戲界面
 */
export default class GameView extends GameSceneUI {
    //0 - 空地
    public prefab_space: Laya.Prefab;
    //1 - 牆壁
    public prefab_wall: Laya.Prefab;
    //2 - 人物
    public prefab_man: Laya.Prefab;
    //2 - 女性
    public prefab_women: Laya.Prefab;
    //3 - 箱子
    public prefab_box: Laya.Prefab;
    //4- 終點
    public prefab_end: Laya.Prefab;
    //6 - 終點+人物
    public prefab_peopleEnd: Laya.Prefab;
    //7 - 終點+箱子
    public prefab_boxEnd: Laya.Prefab;

    //地圖數據
    public map = new Array<Array<any>>();
    public mapWidth = 0;
    public mapHeight = 0;

    public static instance: GameView;

    constructor() {
        super();
        let self = this;

        //加載預製體資源
        Laya.loader.create([
            "prefab/box.json",
            "prefab/boxEnd.json",
            "prefab/end.json",
            "prefab/man.json",
            "prefab/peopleEnd.json",
            "prefab/space.json",
            "prefab/wall.json",
            "prefab/women.json",
        ], Laya.Handler.create(self, self.complete));
    }

    public onEnable() {
        GameView.instance = this;
        let self = this;
        //註冊按鈕點擊事件
        self.btn_up.on(Laya.Event.CLICK, self, self.on_dir_button_click);
        self.btn_down.on(Laya.Event.CLICK, self, self.on_dir_button_click);
        self.btn_left.on(Laya.Event.CLICK, self, self.on_dir_button_click);
        self.btn_right.on(Laya.Event.CLICK, self, self.on_dir_button_click);
    }

    public onDisable() {
        let self = this;

        //取消按鈕點擊事件
        self.btn_up.off(Laya.Event.CLICK, self, self.on_dir_button_click);
        self.btn_down.off(Laya.Event.CLICK, self, self.on_dir_button_click);
        self.btn_left.off(Laya.Event.CLICK, self, self.on_dir_button_click);
        self.btn_right.off(Laya.Event.CLICK, self, self.on_dir_button_click);

        self.destroy();
    }

    /**
     * @desc 加載資源完成
     */
    public complete() {
        let self = this;

        self.prefab_box = Laya.loader.getRes("prefab/box.json");
        self.prefab_boxEnd = Laya.loader.getRes("prefab/boxEnd.json");
        self.prefab_end = Laya.loader.getRes("prefab/end.json");
        self.prefab_man = Laya.loader.getRes("prefab/man.json");
        self.prefab_peopleEnd = Laya.loader.getRes("prefab/peopleEnd.json");
        self.prefab_space = Laya.loader.getRes("prefab/space.json");
        self.prefab_wall = Laya.loader.getRes("prefab/wall.json");
        self.prefab_women = Laya.loader.getRes("prefab/women.json");

        self.init();
    }

    /**
     * @desc 初始化
     */
    public init() {
        let self = this;
        //關卡數據初始化
        var mapId = GameMap.getMapId(GameConfigs.CurLevel);
        var map = GameMap.getMap(mapId);

        self.mapWidth = GameMap.getMapWidth(mapId);
        self.mapHeight = GameMap.getMapHeight(mapId);
        //拷貝地圖數據
        for (var i = 0; i < self.mapWidth; i++) {
            self.map.push([]);
            for (var j = 0; j < self.mapHeight; j++) {
                self.map[i].push([]);
                self.map[i][j] = map[i][j];
            }
        }
        LogUtil.error("Amumu GameView mapInfo", self.map, self.mapWidth, self.mapHeight);
        //預製體初始化
        GameLogic.instance.init(self.prefab_space, self.prefab_wall, self.prefab_man, self.prefab_box,
            self.prefab_end, self.prefab_peopleEnd, self.prefab_boxEnd);

        GameLogic.instance.draw(self.box_game, self.map, self.mapWidth, self.mapHeight);
    }

    /**
     * @desc 監聽點擊方向鍵事件
     * @param evt 
     */
    public on_dir_button_click(evt: Laya.Event) {
        let self = this;
        switch (evt.target) {
            case self.btn_up:
                GameLogic.instance.move(Dir.UP, self.map, self.mapWidth, self.mapHeight);
                break;
            case self.btn_down:
                GameLogic.instance.move(Dir.DOWN, self.map, self.mapWidth, self.mapHeight);
                break;
            case self.btn_left:
                GameLogic.instance.move(Dir.LEFT, self.map, self.mapWidth, self.mapHeight);
                break;
            case self.btn_right:
                GameLogic.instance.move(Dir.RIGHT, self.map, self.mapWidth, self.mapHeight);
                break;
            default:
                break;
        }
        //更新地圖界面
        GameLogic.instance.draw(self.box_game, self.map, self.mapWidth, self.mapHeight);
        if (GameLogic.instance.MoveFalg) self.updateStep(1);

        //判斷勝利條件
        var isOver = GameLogic.instance.juide(self.map, self.mapWidth, self.mapHeight);
        self.gameOver(isOver);
    }

    /**
     * @desc 更新當前關卡步數
     * @param value 
     */
    public updateStep(value) {
        let self = this;

        GameConfigs.CurStep += value;
        self.lab_step.text = "" + GameConfigs.CurStep;
    }

    /**
     * @desc 遊戲結束
     * @param isOver 
     */
    public gameOver(isOver) {
        let self = this;

        if (isOver) {
            UIManager.instance.closeScene(PanelConfig.SCENE_GAME);
            UIManager.instance.openScene(PanelConfig.SCENE_GAMEEND);
            //步數置零
            GameConfigs.CurStep = 0;
        }
    }

    /**
     * @desc 銷燬
     */
    public destroy() {
        let self = this;

        GameLogic.instance.destroy(self.map, self.mapWidth, self.mapHeight);
    }
}

import { ui } from "../../../../ui/layaMaxUI"

import GameEndUI = ui.pushBox.gameEnd.GameEndSceneUI;
import UIManager from "../../manager/UIManager";
import GameConfigs from "../../config/GameConfigs";
import GameMap from "../../game/GameMap";
import LogUtil from "../../utils/LogUtils";
import PanelConfig from "../../config/PanelConfig";

/**
 * @desc 結算頁界面
 */
export default class GameEndView extends GameEndUI {

    public static instance: GameEndView;

    constructor() {
        super();
        let self = this;
        GameEndView.instance = self;

    }

    public onEnable() {
        let self = this;

        //註冊按鈕點擊響應事件
        self.btn_restart.on(Laya.Event.CLICK, self, self.on_button_click);
        self.btn_next.on(Laya.Event.CLICK, self, self.on_button_click);
    }

    public onDisable() {
        let self = this;

        //註銷按鈕點擊響應事件
        self.btn_restart.off(Laya.Event.CLICK, self, self.on_button_click);
        self.btn_next.off(Laya.Event.CLICK, self, self.on_button_click);
    }

    /**
     * @desc 按鈕點擊響應事件
     * @param evt 
     */
    public on_button_click(evt: Laya.Event) {
        let self = this;

        switch (evt.target) {
            case self.btn_restart:

                self.gameStart();
                break;
            case self.btn_next:

                self.gameNext();
                break;
            default:
                break;
        }
    }

    /**
     * @desc 遊戲開始
     */
    public gameStart() {
        let self = this;

        //獲取地圖數據
        var map = Laya.Loader.getRes("pushBox/config/map.json");

        LogUtil.error("Amumu GameEndView mapInfo", map, GameMap.MapInfo, GameMap.MapInfoLength);

        UIManager.instance.closeScene(PanelConfig.SCENE_GAMEEND);
        UIManager.instance.openScene(PanelConfig.SCENE_GAME);
    }

    /**
     * @desc 進入下一關
     */
    public gameNext() {
        let self = this;

        if (GameConfigs.CurLevel < GameMap.MapInfoLength) GameConfigs.CurLevel += 1;

        UIManager.instance.closeScene(PanelConfig.SCENE_GAMEEND);
        UIManager.instance.openScene(PanelConfig.SCENE_GAME);
    }
}

import { ui } from "../../../../ui/layaMaxUI"

import HallUI = ui.pushBox.hall.HallSceneUI;
import UIManager from "../../manager/UIManager";
import GameConfigs from "../../config/GameConfigs";
import GameMap from "../../game/GameMap";
import LogUtil from "../../utils/LogUtils";
import PanelConfig from "../../config/PanelConfig";

/**
 * @desc 首頁界面
 */
export default class HallView extends HallUI {

    public static instance: HallView;

    constructor() {
        super();
        let self = this;
        HallView.instance = self;

        //加載地圖數據
        Laya.loader.create([
            "pushBox/config/map.json",
        ], Laya.Handler.create(self, self.complete));
    }

    public complete() {
        //獲取地圖數據
        // var map = Laya.Loader.getRes("pushBox/config/map.json");
        // GameMap.Ma = map;
        // GameMap.mapInfoLength = GameMap.mapInfo.length;
        LogUtil.error("Amumu HallView mapInfo", GameMap.MapInfo, GameMap.MapInfoLength);

    }

    public onEnable() {
        let self = this;

        //註冊點擊按鈕響應事件
        self.btn_start.on(Laya.Event.CLICK, self, self.on_button_click);
    }

    public onDisable() {
        let self = this;

        //註銷點擊按鈕響應事件
        self.btn_start.off(Laya.Event.CLICK, self, self.on_button_click);
    }

    /**
     * @desc 按鈕點擊響應事件
     * @param evt 
     */
    public on_button_click(evt: Laya.Event) {
        let self = this;
        switch (evt.target) {
            case self.btn_start:
                UIManager.instance.openScene(PanelConfig.SCENE_GAME);
                break;
            default:
                break;
        }
    }
}   

五.實現效果

大廳頁面

遊戲頁面

結算頁面