关键字：消除游戏教程，消除游戏制作，代码制作，小白学习，学习游戏，零代码开发，微信小游戏制作工具
嗨！大家好，我是小蚂蚁。
在正式开始讲具体类型的消除游戏之前，我们会先用几节讲一下所有消除游戏的共同特点。是的，所有的消除游戏都有着一些共性，了解了这些之后，你就会发现所有的消除游戏在你眼里都“差不多”。
试着看下面的 6 种不同类型的消除游戏的截图，找找它们的共同特点。
找到共同的特点了吗？没找到？别急着去向下看答案，花点儿时间再看一会儿，敏锐的观察力对于一个游戏开发者来讲很重要。
下面我们来揭晓答案，上图中的每个游戏都是按照固定的行列进行布局，有 7 行 7 列，有 10 行 10 列，有 20 行 10 列。这样的行列布局是不是特别的像一个网格（再看看左下角的 1010 游戏的网格）？这就是我们今天要讲的，所有消除游戏背后都有的那张看不见的“网格”。
严格来说现在有一类消除游戏是完全基于物理的，例如前段时间很火的【合成大西瓜】，这类消除游戏背后是不需要一张“网格”的，因为里面的图标位置是完全由物理设置的。
先理论
可以说网格状的布局是一个消除游戏的起点，在游戏开始之前，至少你要先把游戏布局设置好，之后所有的操作都是基于这个布局进行的。
假设，我们要制作一个消除游戏，它有着 6 行 6 列的布局，上方的这个 6x6 的网格，就是它背后的那张看不见的“网”。要实现这样的布局，我们应该从哪里着手呢？首先，我们需要先来了解一些简单的数学知识。
如图，我们为这张网格增加了一个坐标系，水平方向上的 x 轴，和垂直方向上的 y 轴。坐标轴的中点（0，0）刚好是整张网格的中心点。到现在为止，我们有了一些信息了，我们现象出了一个游戏的网格布局（当然是想象出来的，因为你还没有做出来呢），然后为这张网格设定了一个坐标系，接着，我们要做的就是将所有的元素按照这个网格布局一个一个的摆放到上面。
元素指的是消除游戏中的一个图标，在这个系列教程中，我们把消除游戏中可操作的图标称作元素。
通常，元素的大小是会提前知道的，例如你要做的消除游戏图标的大小是 100x100，在进行接下来的计算之前，让我们先梳理一下当前已经知道的一些条件。
好了，接下来我们将使用这 3 个已知的数据，来计算出网格左下角起点的位置。
如图，根据已知的三个条件，我们可以计算出网格左下角第一个格子的中点的位置。
计算公式可以对照着上图看一下，应该能够看懂，还是看不懂的话，那就自己在纸上画一画，数一数。
这里我们为什么要选择左下角的第一个格子的位置当作起点位置呢？因为我们将会从左向右，从下向上，一行一行的逐个设置每个元素的位置，直到所有的元素都被安放在了正确的位置为止。
你当然也可以选择把左上角当作起点，然后从上向下开始设置，你也可以把右下角当作起点，从右向左开始设置，起点的设置有时根据个人的习惯，比如过我就比较习惯于从左下角开始。
到目前为止，我们已知的数据又多了一项。
根据这些已知数据，我们就能够做一些更厉害的事情了，那就是可以计算出网格中任何一个指定行号和列号的格子的位置。
如图，我们为网格标注出了行号和列号，绿色的点代表网格中任意一个格子的位置（通过行号和列号我们可以标示出网格中任意一个格子的确切位置）。根据已知的条件，我们可以获得任意格子位置的计算公式：
到此，所有的前提都已经具备了，下一步需要做的就是根据你所使用的编程语言或者游戏引擎，把所有的元素按照需要的网格布局挨个的放上去就可以了。
这是一段实现流程的描述，根据上方我们已知和推导出的前提条件，只需要使用两个循环，就可以一行一行的逐个创建并设置元素了。
再实践
接着，我们来看一下网格布局在微信小游戏制作工具中的具体实现吧！
首先，准备一些变量，这些变量根据名字理解即可。
接下来看一下创建网格布局的积木逻辑。
很简单，就是上方理论部分我们讲过的两个计算公式的应用。
最后，预览一下场景，让我们来欣赏一下创建元素的过程吧！
我特意在每个元素创建之间插入了一点儿时间间隔，这样就能看到如图中的一行一行的，从左到右，从下到上的创建过程了。
网格布局是一个消除游戏的起点，有了这个起点之后，我们才能够继续做出一些更神奇的事情。
作为一个游戏的开发者，你应该具备一双可以透视游戏表象的眼睛，看到那张玩家所看不到的消除游戏背后的网。再回过头来看看最上方的那张包含了各种类型的消除游戏的图片，你看到它们各自背后的那张“网格”了吗？
我是会做游戏也会教你做游戏的小蚂蚁，想学习做游戏的话，关注我的就对啦！
自己学习没氛围学不下去？遇到问题无人解答？缺少经验不知该如何前行？......欢迎加入小蚂蚁的游戏开发课，不只是一门课，而是围绕着新手学习做游戏有关的一整套服务。致力于帮助更多的人学会做游戏并做出自己的游戏，欢迎来跟一百多位同学一起学习做游戏。【点击这里】可了解课程服务详情。
这里是小蚂蚁的小游戏系列，闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装，点击下方的游戏卡片就可以直接玩啦！
也欢迎加个微信，交个朋友，朋友圈每日分享与做游戏有关的知识和内容，可以来围观。备注“学习做游戏”可免费领取学习做游戏的原创教程资料。接受付费咨询，不闲聊，望见谅。
