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;
        }
    }
}   

五.实现效果

大厅页面

游戏页面

结算页面