花5个小时撸了一个码了个码，源码文档开源

　　最近羊了个羊爆火网络，其实这个程序本来不难，但是怎么火起来的，可能研究人性方面更多吧。
　　作为程序员，三天也撸了一个程序，号称码了个码！一、演示地址
　　https：www。coderutil。comgamemlgm
　　二、源代码下载
　　点赞转发本文后私信【929】即可下载代码和操作文档三、技术栈
　　只是为了实现那么要效果，不涉及服务端交互，纯前段实现：H5、CSS3、JS、Jquery、layui四、游戏逻辑
　　根本逻辑：本质上跟以前的大家玩的消消乐逻辑是比较相似的，有一些元素，选中3个可以抵消，直到游戏面板所有元素全部消除可通关；
　　羊了个羊：他的通过难点在于是有多层叠加、只有上面压着的元素被拿掉下面的才可以点击。其他的也都是比较常规的设计；五、实现整体思路
　　我准备单从比较核心的这几个问题来进行分享：多层叠加面板设计与实现、随机元素分布、元素点击事件、操作结果校验！
　　5。1多层面板的实现
　　这里我选用了一种简单的叠加效果：固定5层叠加，示意图：
　　5。2随机元素分布
　　游戏元素对象创建
　　首选我需要定义一个游戏元素对象，GameItem：id、name、icon、color
　　游戏元素个数以及初始化创建
　　OK，有了元素对象我准备先创建一个Array容器用来保存本局游戏初始化生成的所有元素：
　　这里遇到一个问题：需要生成多少个元素？需要几种元素？因为我们看到羊了个羊游戏元素对象并不是填充满的，有很多空位。于是乎为了简单，我自己固定定义了一种规则：
　　按照我现在个字的设计：88，77，66，55，44，下来全部填满有190个位置；然后我需要空出来一些位置，怎么空这里就有点玄幻了，我设计了这样的规则：（8812）（7710）（668）（556）（444）共150个元素，每三个一组的话有50队可消除的元素；
　　我这里一共设计了10种元素icon，在简单一点即，没中元素生成15个即150个；
　　好了，规则清晰了，可以去初始化游戏元素了，定义了一个items数组、initGameData（）方法：游戏网格1、每层格子抽象为一个矩阵数组，共4层：〔8，8〕，〔7，7〕，〔6，6〕，〔5，5〕，〔4，4〕2、每层初始化规则：（6412）（4910）（368）（256）（164）共150个元素50队3、一共设置了10中图标元素，目前是写死的，固定规则：分别5组1053150个functionGameGrid（）｛实际元素个数type｛number｝varsize0；初始化所有元素varitemsnewArray（）；初始化游戏数据returns｛any〔〕｝this。initGameDatafunction（）｛varidx0；for（vari0；ithis。initSize（）；i）｛idxMath。floor（i15）；varidi；varnameidx；varicongameicon（idx1）。png；varcolorcolors〔idx〕；加入游戏元素容器items。add（newGameItem（id，name，icon，color））；｝console。log（完成游戏元素初始化。）returnitems；｝｝
　　游戏元素分布
　　目前为止，我已经拿到了一个items里面有150个游戏元素的数组对象、还有页面上1～5层p面板；现在需要考虑怎么把游戏元素放进去，并且随机、随机位置、随机空位置。
　　这里先对5个p从数据角度做个抽象：我们把每个p落点抽象为一个矩阵（二维数组），矩阵的值由0，1组成，1代表这个位置有元素、0代表是空位。
　　我们已最上层为例子来看：
　　创建5个矩阵、且需要按照我们的上述的规则随机生成5个01矩阵，大小分别为88，77，66，55，44：初始化游戏网格this。initGameGridfunction（）｛初始化15层矩阵，每次初始化元素位置都是随机的这里X、Y、矩阵0数量直接写死吧，懒得定义了matrix1this。initMatrix（8，8，12）；matrix2this。initMatrix（7，7，10）；matrix3this。initMatrix（6，6，8）；matrix4this。initMatrix（5，5，6）；matrix5this。initMatrix（4，4，4）；｝初始化一个XY的0、1矩阵：1代表有元素，0无元素，paramxx轴个数paramyy轴个数paramemptySize空个数，即位置0的个数this。initMatrixfunction（x，y，emptySize）｛初始化一个XY的值为1的矩阵varmatrixnewArray（）；for（vari0；ix；i）｛matrix〔i〕newArray（）；for（varj0；jy；j）｛matrix〔i〕〔j〕1；｝｝随机生成emptySize个随机位置，设置值为0，代表没有元素varvalidateArrnewArray（）；娇艳重复的for（vari0；iemptySize；i）｛varrandomArrgetRandom（x，y，validateArr）；matrix〔randomArr〔0〕〕〔randomArr〔1〕〕0；｝returnmatrix；｝
　　元素矩阵落位
　　ok，矩阵有了，元素也有了，可以做元素填充了：其实就是把items：Array中的150个元素依次顺序的分布到这5个矩阵当中即可。
　　这里有个小问题：现在的items：Array元素顺序每次还是固定的，即使矩阵01落位是随机的，但是玩两把下来还是会发现规律，解决办法也很简单，在落位之前我们先对items顺序做一次打乱：打乱arr顺序this。sortfunction（）｛varlengththis。size（），randomIndex，temp；while（length）｛randomIndexMath。floor（Math。random（）（length））；tempitems〔randomIndex〕；items〔randomIndex〕items〔length〕；items〔length〕temp；｝｝。打乱元素随机位置this。sort（）；
　　到目前为止我们已经完成了面板叠加、随机游戏元素以及游戏元素的落位展示：
　　5。3点击事件
　　这个操作的核心所在，我们需要实现：
　　1、点击元素将元素移动到底部选中区
　　2、元素消失后，需要判断被它压着的元素是否暴露出来了，及是否可以点击
　　3、也就是下一步的校验：判断是否有可以消除的，以及是否GameOver
　　点击事件这里不展开写了，我们只关心这里的一个难点问题：点击上层后需要校验下层是否暴露出来：
　　思路，需要两步：第一步获取需要校验的底层元素、娇艳底层元素是否完全暴露。
　　点击上层元素（x，y），获取可能被它盖住的底层元素：
　　在不考虑特殊情况的前提下点击上层（x，y），我们需要校验直接（注意：每次我们只需要关心直接下层即可）下层的（x，y）（x1，y）（x，y1），（x1，y1）
　　判断下层的四个元素是否完全暴露：
　　需要注意的是每个元素又可能被上层的4个元素盖住（最大情况下）
　　到这里基本上就ok了，可能有人会好奇你的点击不可点击是怎么实现的：
　　我就是给每个元素家里一个span蒙层，每次在点击元素的时候判断这个元素是否有span这个子元素。disableclick｛position：absolute；left：0px；top：0px；width：100；height：100；backgroundcolor：black；opacity：0。6；｝（。gridgameitem）。on（click，function（）｛vardisableClick（this）。children（。disableclick）。length0；if（disableClick）｛不能点击return；｝点击后的处理｝
　　因为点击后的处理，包括上述的底层是否暴露可以点击的代码逻辑比较多，所以就不贴了，感兴趣的兄弟可以自己下载源代码查看：
　　https：www。coderutil。comresourceview？residRESOURCE1f801b03cbdd445795ce3c6800fe9002
　　5。4操作校验
　　操作校验主要有三个校验：
　　1、是否可以消除：校验选中的元素是否可以消除：根据元素的name属性来判断
　　2、校验GameOver：满足7个不满足消除条件
　　3、游戏通关：面板内所有元素都消除干净