前段时间羊了个羊伤风败俗互联网，只不过那个流程原本无从，但是不是火出来的，可能将科学研究本性各方面更多吧。

做为流程员，四天也撸了两个流程，袖珍”码了个码”！

一、模拟门牌号

https://www.coderutil.com/game/mlgm

二、源标识符浏览

点赞转贴责任编辑后朋友圈【929】方可浏览标识符和操作方式文件格式

三、控制技术栈

而已为的是同时实现所以要效用，不牵涉服务器端可视化，纯后段同时实现：H5、CSS3、JS、Jquery、layui

四、格斗游戏方法论

显然方法论：其本质上跟从前的我们玩的绍尼县乐方法论是较为相近的，有许多原素，选上3个能抵销，直至格斗游戏液晶大部份原素全数消解可报检；

羊了个羊：他的透过症结在只好有第二层共振、多于下面压着的原素被去掉下面的才可以点选。其它的也都是较为常规性的结构设计；

五、同时实现总体路子

我预备单从较为核心理念的这两个难题来展开撷取：第二层共振液晶结构设计与同时实现、随机原素分布、原素点选事件、操作方式结果校验！

5.1 第二层液晶的同时实现

这里我选用了一种简单的共振效用：固定5层共振，示意图：

5.2 随机原素分布

格斗游戏原素对象创建

首选我需要定义两个格斗游戏原素对象，GameItem: id、name、icon、color

格斗游戏原素个数以及初始化创建

OK，有了原素对象我预备先创建两个Array容器用来保存本局格斗游戏初始化生成的大部份原素：

这里遇到两个难题：需要生成多少个原素？需要几种原素？因为我们看到羊了个羊格斗游戏原素对象并不是填充满的，有很多空位。只好乎为的是简单，我自己固定定义了一种规则：

按照我现在个字的结构设计：8 * 8，7 * 7，6 * 6，5 * 5， 4 * 4，下来全数填满有 190个位置；然后我需要空出来许多位置，是不是空这里就有点玄幻了，我结构设计了这样的规则：

（8*8 – 12） + （7*7 – 10） + （6*6 – 8） + （5*5 – 6） + （4*4 – 4）共 150个原素，每三个一组的话有50队可消解的原素；

我这里一共结构设计了10种原素icon，在简单一点即，没中元素生成15个即150个；

好了，规则清晰了，能去初始化格斗游戏原素了,定义了两个items数组、initGameData()方法：

/*** * 格斗游戏网格 * 1、每层格子抽象为两个矩阵/数组, 共 4 层: [8, 8], [7, 7], [6, 6], [5, 5], [4, 4] * 2、每层初始化规则：（64 – 12） + （49 – 10） + （36 – 8） + （25 – 6） + （16 – 4）共 150个原素 50队 * 3、一共设置了10中图标原素，目前是写死的，固定规则：分别5组 10 * 5 * 3 = 150个 */ function GameGrid() { /*** * 实际原素个数 * @type {number} */ var size = 0; /** 初始化大部份元素 **/ var items = new Array(); /*** * 初始化格斗游戏数据 * @returns {any[]} */ this.initGameData =function() { var idx = 0; for (var i = 0; i < this.initSize(); i++) { idx = Math.floor(i / 15); varid = i;var name = idx; var icon = “/game/icon/”+(idx + 1)+“.png”; var color = colors[idx]; // 加入格斗游戏原素容器items.add(new GameItem(id, name, icon, color)); } console.log(“完成格斗游戏原素初始化.”) return items; } }

格斗游戏原素分布

目前为止，我已经拿到了两个items里面有150个格斗游戏原素的数组对象、还有页面上1 ～ 5 层div液晶；现在需要考虑是不是把格斗游戏原素放进去，并且随机、随机位置、随机空位置。

这里先对5个div从数据角度做个抽象：我们把每个div落点抽象为两个矩阵（二维数组），矩阵的值由0，1组成，1代表那个位置有原素、0代表是空位。

我们已最上层为例子来看：

创建5个矩阵、且需要按照我们的上述的规则随机生成5个0 1 矩阵，大小分别为 8 * 8，7 * 7，6 *6， 5*5，4*4:

/*** * 初始化格斗游戏网格 */ this.initGameGrid = function () { /*** * 初始化 1 – 5 层矩阵，每次初始化原素位置都是随机的 * *^* 这里X、Y、矩阵0数量直接写死吧，懒得定义了 */ matrix1 = this.initMatrix(8, 8, 12); matrix2 = this.initMatrix(7, 7, 10); matrix3 = this.initMatrix( 6, 6, 8); matrix4 =this.initMatrix(5, 5, 6); matrix5 = this.initMatrix(4, 4, 4); } /*** * 初始化两个 X * Y 的 0、1 矩阵：1代表有原素，0 无原素， *@param x x轴个数 * @param y y轴个数 * @param emptySize 空个数，即位置0的个数 */ this.initMatrix = function (x, y, emptySize) { // 初始化两个 X * Y 的值为1的矩阵 var matrix = new Array(); for (var i = 0; i < x; i++) { matrix[i] = new Array(); for (var j = 0; j < y; j++) { matrix[i][j] =1; } } // 随机生成emptySize个随机位置，设置值为0，代表没有原素 var validateArr = new Array(); // 娇艳重复的 for (var i = 0; i < emptySize; i++) {var randomArr = getRandom(x, y, validateArr); matrix[randomArr[0]][randomArr[1]] =0; } return matrix; }

原素矩阵落位

ok, 矩阵有了，原素也有了，能做原素填充了：只不过就是把items:Array中的150个原素依次顺序的分布到这5个矩阵当中即可。

这里有个小难题：现在的items：Array原素顺序每次还是固定的，即使矩阵0 1落位是随机的，但玩两把下来还是会发现规律，解决办法也很简单，在落位之前我们先对items顺序做一次打乱：

/*** * 打乱arr顺序 */ this.sort = function () { var length = this.size(), randomIndex, temp;while (length) { randomIndex = Math.floor(Math.random() * (length–)); temp = items[randomIndex]; items[randomIndex] = items[length]; items[length] = temp; } }/**。打乱原素随机位置 **/ this.sort();

到目前为止我们已经完成了液晶共振、随机格斗游戏原素以及格斗游戏原素的落位展示：

5.3 点选事件

那个操作方式的核心理念所在，我们需要同时实现：

1、点选原素将原素移动到底部选上区

2、原素消失后，需要判断被它压着的原素是否暴露出来了，及是否能点选

3、也就是下一步的校验：判断是否有能消解的，以及是否Game Over

点选事件这里不展开写了，我们只关心这里的两个症结难题：点选上层后需要校验下层是否暴露出来：

在不考虑特殊情况的前提下点选上层（x, y）,我们需要校验直接（注意：每次我们只需要关心直接下层方可）下层的（x,y）(x+1,y) (x, y+1), (x+1, y+1)

判断下层的四个原素是否完全暴露：

需要注意的是每个原素又可能将被上层的4个原素盖住（最大情况下）

到这里基本上就ok了，可能将有人会好奇你的点选不可点选是是不是同时实现的：

我就是给每个原素家里两个span蒙层，每次在点选原素的时候判断那个原素是否有span那个子原素

<div class=disable-click></div> .disable-click { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: black;opacity: 0.6; } $(“.grid-game-item”).on(click, function () { var disableClick = $(this).children(“.disable-click”).length > 0; if (disableClick) { // 不能点选 return; } /** 点选后的处理 **/ }

因为点选后的处理，包括上述的底层是否暴露能点选的标识符方法论较为多，所以就不贴了，感兴趣的兄弟能自己浏览源标识符查看：

https://www.coderutil.com/resource/view?resid=RESOURCE_1f801b03cbdd445795ce3c6800fe9002