LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架

目录

一、项目介绍

近日，在闲余时间把编写果无数次的推箱子项目用laya-simpleFramework-FairyGUI框架再实现了一遍。一来想重温这个编写过不下五次的推箱子项目逻辑，温故而知新嘛；二来熟悉aya-simpleFramework-FairyGUI框架，学习一下别人优秀的架构思路，然后转化为自己的思维。[相关链接]LayaIDE实现推箱子 |C++实现推箱子

二、架构设计

1，LayaIDE采用的是2.9.0_beta版本 LayaIDE下载地址
2，FairyGUI采用的是2020.1.1版本 FGUI官网地址
3，Laya-SimpleFramework-FairyGUI项目 Git地址

三、思维导图

四、核心逻辑代码

/**
 * @desc 游戏核心逻辑
 */
export default class GameLogic {
   
    private static _instance: GameLogic;
    public static get Instance(): GameLogic {
   
        if (this._instance == null) {
   
            this._instance = new GameLogic();
        }
        return this._instance;
    }
    //是否移动
    private _moveFlag: boolean = false;
    public set MoveFlag(value) {
   
        this._moveFlag = value;
    }

    public get MoveFlag() {
   
        return this._moveFlag;
    }

    //节点存储数组
    public nodes: Array<any> = [];
    //上一步地图
    public oldMap = new Array<Array<any>>();
    //人物位置
    private posX = 0;
    private posY = 0;

    /**
     * @desc 绘制地图
     * @param rootNode  根节点
     * @param map       关卡地图数据
     * @param width     地图宽度
     * @param height    地图高度
     */
    public draw(rootNode: fgui.GComponent, map: any[][], width: number, height: number) {
   
        if (!map || map.length <= 0) return;
        //删除所有节点,初始化
        rootNode.removeChildren();

        for (var i = 0; i < width; i++) {
   
            for (var j = 0; j < height; j++) {
   
                switch (map[i][j]) {
   
                    //生成空地
                    case 0:
                        // var space = fgui.UIPackage.createObject("MainPack", "0").asImage;
                        // space.setXY(j * 50, i * 50);
                        // space.setSize(50, 50);
                        // rootNode.addChild(space);
                        // //生成的节点放入数组处理
                        // this.nodes.push(space);
                        break;
                    //生成墙壁
                    case 1:
                        var wall = fgui.UIPackage.createObject("MainPack", "1").asImage;
                        wall.setXY(j * GameDef.block_width, i * GameDef.block_width);
                        wall.setSize(GameDef.block_width, GameDef.block_width);
                        rootNode.addChild(wall);
                        //生成的节点放入数组处理
                        this.nodes.push(wall);
                        break;
                    //生成人物
                    case 2:
                        var man = fgui.UIPackage.createObject("MainPack", "2_" + GameDef.CurActor).asImage;
                        man.setXY(j * GameDef.block_width, i * GameDef.block_width);
                        man.