LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架

• 目錄
• • 一、項目介紹
  • 二、架構(gòu)設(shè)計
  • 三、思維導(dǎo)圖
  • 四、核心邏輯代碼
  • 五、實現(xiàn)效果

目錄

一、項目介紹

近日，在閑余時間把編寫果無數(shù)次的推箱子項目用laya-simpleFramework-FairyGUI框架再實現(xiàn)了一遍。一來想重溫這個編寫過不下五次的推箱子項目邏輯，溫故而知新嘛；二來熟悉aya-simpleFramework-FairyGUI框架，學習一下別人優(yōu)秀的架構(gòu)思路，然后轉(zhuǎn)化為自己的思維。[相關(guān)鏈接]LayaIDE實現(xiàn)推箱子 |C++實現(xiàn)推箱子

二、架構(gòu)設(shè)計

1，LayaIDE采用的是2.9.0_beta版本 LayaIDE下載地址
2，FairyGUI采用的是2020.1.1版本 FGUI官網(wǎng)地址
3，Laya-SimpleFramework-FairyGUI項目 Git地址

三、思維導(dǎo)圖

四、核心邏輯代碼

/*** @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;}//節(jié)點存儲數(shù)組public nodes: Array<any> = [];//上一步地圖public oldMap = new Array<Array<any>>();//人物位置private posX = 0;private posY = 0;/*** @desc 繪制地圖* @param rootNode 根節(jié)點* @param map 關(guān)卡地圖數(shù)據(jù)* @param width 地圖寬度* @param height 地圖高度*/public draw(rootNode: fgui.GComponent, map: any[][], width: number, height: number) {if (!map || map.length <= 0) return;//刪除所有節(jié)點,初始化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);// //生成的節(jié)點放入數(shù)組處理// 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);//生成的節(jié)點放入數(shù)組處理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);//生成的節(jié)點放入數(shù)組處理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);//生成的節(jié)點放入數(shù)組處理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);//生成的節(jié)點放入數(shù)組處理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);//生成的節(jié)點放入數(shù)組處理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);//生成的節(jié)點放入數(shù)組處理this.nodes.push(box_end);break;default:break;}}}}/*** @desc 人物移動* @param dir 移動方向* @param map 關(guān)卡地圖數(shù)據(jù)* @param width 關(guān)卡地圖寬度* @param height 關(guān)卡地圖高度*/public move(dir: Dir, map: any[][], width: number, height: number) {if (!map || map.length <= 0) return;let offsetX = 0, offsetY = 0;//拷貝移動前的地圖數(shù)據(jù)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) {//前一格變?yōu)榭盏?終點map[this.posX][this.posY] -= 2;//下一格變?yōu)槿宋?/span>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]) {//前一格變?yōu)榭盏?終點map[this.posX][this.posY] -= 2;//下一格變?yōu)槿宋?/span>map[this.posX + offsetX][this.posY + offsetY] = 2;//下兩格變?yōu)橄渥?箱子 + 終點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) {//前一格變?yōu)榭盏?終點map[this.posX][this.posY] -= 2;//下一格變?yōu)槿宋?+ 終點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]) {//前一格變?yōu)榭盏?終點map[this.posX][this.posY] -= 2;//下一格變?yōu)槿宋?/span>map[this.posX + offsetX][this.posY + offsetY] = 6;//下兩格變?yōu)橄渥?箱子 + 終點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;//銷毀地圖數(shù)據(jù)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;}}//銷毀節(jié)點數(shù)據(jù)this.nodes.forEach(element => {element.dispose();});this.nodes.length = 0;map.length = 0;//銷毀的拷貝地圖數(shù)據(jù)this.oldMap.length = 0;} }

五、實現(xiàn)效果

1,FGUI實現(xiàn)效果

2. web環(huán)境實現(xiàn)效果

總結(jié)

以上是生活随笔為你收集整理的LayaIDE + FGUI + Laya-SimpleFramework-Fairygui框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。