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.setSize(GameDef.block_width, GameDef.block_width);rootNode.addChild(man);//生成的节点放入数组处理this.nodes.push(man);break;//生成箱子case 3:var box = fgui.UIPackage.createObject("MainPack", "3").asImage;box.setXY(j * GameDef.block_width, i * GameDef.block_width);box.setSize(GameDef.block_width, GameDef.block_width);rootNode.addChild(box);//生成的节点放入数组处理this.nodes.push(box);break;//生成终点case 4:var end = fgui.UIPackage.createObject("MainPack", "4").asImage;end.setXY(j * GameDef.block_width, i * GameDef.block_width);end.setSize(GameDef.block_width, GameDef.block_width);rootNode.addChild(end);//生成的节点放入数组处理this.nodes.push(end);break;//生成终点 + 人case 6:var people_end = fgui.UIPackage.createObject("MainPack", "6").asImage;people_end.setXY(j * GameDef.block_width, i * GameDef.block_width);people_end.setSize(GameDef.block_width, GameDef.block_width);rootNode.addChild(people_end);//生成的节点放入数组处理this.nodes.push(people_end);break;//生成终点 + 箱子case 7:var box_end = fgui.UIPackage.createObject("MainPack", "7").asImage;box_end.setXY(j * GameDef.block_width, i * GameDef.block_width);box_end.setSize(GameDef.block_width, GameDef.block_width);rootNode.addChild(box_end);//生成的节点放入数组处理this.nodes.push(box_end);break;default:break;}}}}/*** @desc 人物移动* @param dir    移动方向* @param map    关卡地图数据* @param width  关卡地图宽度* @param height 关卡地图高度*/public move(dir: Dir, map: any[][], width: number, height: number) {if (!map || map.length <= 0) return;let offsetX = 0, offsetY = 0;//拷贝移动前的地图数据for (var i = 0; i < width; i++) {this.oldMap.push([]);for (var j = 0; j < height; j++) {this.oldMap[i].push([]);this.oldMap[i][j] = map[i][j];}}switch (dir) {//向上移动case Dir.UP:offsetX = -1;offsetY = 0;//更新mapthis.MoveFlag = this.push(map, width, height, offsetX, offsetY);break;//向下移动case Dir.DOWN:offsetX = 1;offsetY = 0;//更新mapthis.MoveFlag = this.push(map, width, height, offsetX, offsetY);break;//向左移动case Dir.LEFT:offsetX = 0;offsetY = -1;//更新mapthis.MoveFlag = this.push(map, width, height, offsetX, offsetY);break;//向右移动case Dir.RIGHT:offsetX = 0;offsetY = 1;//更新mapthis.MoveFlag = this.push(map, width, height, offsetX, offsetY);break;default:break;}}/*** @desc 找到人物坐标* @param map * @param width * @param height */public getPosition(map, width, height) {if (!map || map.length <= 0) return;for (var i = 0; i < width; i++) {for (var j = 0; j < height; j++) {if (2 == map[i][j] || 6 == map[i][j]) {this.posX = i;this.posY = j;}}}}/*** @desc 更新游戏* @param map * @param width * @param height * @param offsetX * @param offsetY */public push(map: any[][], width: number, height: number, offsetX: number, offsetY: number): boolean {if (!map || map.length <= 0) return;this.getPosition(map, width, height);//人物移动前方是空地if (map[this.posX + offsetX][this.posY + offsetY] == 0) {//前一格变为空地/终点map[this.posX][this.posY] -= 2;//下一格变为人物map[this.posX + offsetX][this.posY + offsetY] = 2;//更新人物位置this.posX += offsetX;this.posY += offsetY;}//人物移动前方是箱子else if (map[this.posX + offsetX][this.posY + offsetY] == 3) {//人物移动前两格是空地/终点if (0 == map[this.posX + offsetX * 2][this.posY + offsetY * 2]|| 4 == map[this.posX + offsetX * 2][this.posY + offsetY * 2]) {//前一格变为空地/终点map[this.posX][this.posY] -= 2;//下一格变为人物map[this.posX + offsetX][this.posY + offsetY] = 2;//下两格变为箱子/箱子 + 终点map[this.posX + offsetX * 2][this.posY + offsetY * 2] += 3;//更新人物位置this.posX += offsetX;this.posY += offsetY;}}//人物移动前方是终点else if (map[this.posX + offsetX][this.posY + offsetY] == 4) {//前一格变为空地/终点map[this.posX][this.posY] -= 2;//下一格变为人物 + 终点map[this.posX + offsetX][this.posY + offsetY] = 6;//更新人物位置this.posX += offsetX;this.posY += offsetY;}//人物移动前方是终点 + 箱子else if (map[this.posX + offsetX][this.posY + offsetY] == 7) {//人物移动前两格是空地/终点if (0 == map[this.posX + offsetX * 2][this.posY + offsetY * 2]|| 4 == map[this.posX + offsetX * 2][this.posY + offsetY * 2]) {//前一格变为空地/终点map[this.posX][this.posY] -= 2;//下一格变为人物map[this.posX + offsetX][this.posY + offsetY] = 6;//下两格变为箱子/箱子 + 终点map[this.posX + offsetX * 2][this.posY + offsetY * 2] += 3;//更新人物位置this.posX += offsetX;this.posY += offsetY;}} else {return false;}return true;}/*** @desc 判断游戏胜利条件* @param map * @param width * @param height */public juide(map: any[][], width: number, height: number) {if (!map || map.length <= 0) return;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 withdraw(map, width, height) {if ((!map || map.length <= 0) || (this.oldMap || this.oldMap.length <= 0)) return;for (var i = 0; i < width; i++) {for (var j = 0; j < height; j++) {map[i][j] = this.oldMap[i][j];}}//修改移动标志this.MoveFlag = false;}/*** @desc 销毁* @param map * @param width * @param height */public destroy(map: any[][], width: number, height: number) {if (!map || map.length <= 0) return;let self = this;//销毁地图数据for (var i = 0; i < width; i++) {for (var j = 0; j < height; j++) {map[i][j] = 0;if (this.oldMap.length > 0) this.oldMap[i][j] = 0;}}//销毁节点数据this.nodes.forEach(element => {element.dispose();});this.nodes.length = 0;map.length = 0;//销毁的拷贝地图数据this.oldMap.length = 0;}
}

五、实现效果

1,FGUI实现效果

2. web环境实现效果

LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架相关推荐

FGUI+Laya Air 游戏架构之stage分层架构
先提前说明,此架构是幼麟棋牌框架的作者@麒麟子大神教给笔者的,麒麟子大佬给了一套基于FGUI+Laya Air写的棋牌大厅界面子工程学习,奎斯花了一段时间从代码中学习并初步总结了出了分层游戏架构的基本 ...
laya使用fairygui入门教程
下载laya的sdk 把FairyGUI-layabox-master\source\bin里的fairygui.js放到laya项目里的bin\libs里 index.js再引入下引入的顺序不要变 ...
laya开发游戏框架--UIMgr
1.laya内置了场景.页面.弹窗管理器,非常实用,但是目前没有针对场景的唯一性给方案,所以我们自己简单封装一下.场景之间的信息交互可以通过事件系统. 2.场景UI打开和关闭问题解决了,接下来我们解决 ...
有关 Unity UIElements 和 UIToolkit
https://docs.unity3d.com/Manual/UIElements.html 一.UIElements 简介 Unity UIElements:https://blog.unity. ...
【Unity自己写框架】FairyGUI UI框架（一）
笔者之前沉迷游戏无法自拔,但是现在之前玩的游戏也不太爱玩了,发现下班到睡觉之前有2-3个小时空闲,仿佛发现了一笔宝贵的财富不能浪费. 笔者从事手游工作也有两年的时间了,主要做的是逻辑和SDK方面的工作 ...
Laya FairyGui系列一 FairyGui接入
[公开课 | Unity进阶 | FGUI]国内强大的UI编辑器-FairyGUI 一,什么是FairyGui FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器,使用习惯与Adobe系列 ...
[FairyGUI][Unity]加载FGUI打包成AB包的资源
参考资料3 将发布后的文件打包为两个AssetBundle,即定义文件和资源各打包为一个bundle(desc_bundle+res_bundle).这样做的好处是一般UI的更新都是修改元件位置什么的 ...
[FairyGUI][Unity]FGUI资源打包AssetBundle
参考资料3 将发布后的文件打包为两个AssetBundle,即定义文件和资源各打包为一个bundle(desc_bundle+res_bundle).这样做的好处是一般UI的更新都是修改元件位置什么的 ...
FGUI，UGUI在ET框架上的使用以及区别
这两天把FGUI差不多学完了,今天看了点ET框架,发现如何在ET上使用FGUI的文档很少很少.就自己根据初见大佬的ET4.0的斗地主,他的一篇在ET上如何使用FGUI,和同事自己写好的一些界面,了解了 ...
Laya：基于Prefab的简单UI框架。
UI框架的功能: 方便快捷的对UI界面进行管理:如快速打开与关闭一个界面,防止相同界面多开等等. 核心代码有2个脚本,一个UIMgr,一个UIBase. UIMgr的功能是管理UI界面. UIBase ...

LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架

LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架

目录

一、项目介绍

二、架构设计

三、思维导图

四、核心逻辑代码

五、实现效果

LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架相关推荐

最新文章

热门文章