嗨！大家好，我是小蚂蚁。
在正式开始讲具体类型的消除游戏之前，我们会先用几节讲一下所有消除游戏的共同特点。是的，所有的消除游戏都有着一些共性，了解了这些之后，你就会发现所有的消除游戏在你眼里都“差不多”。
试着看下面的 6 种不同类型的消除游戏的截图，找找它们的共同特点。
找到共同的特点了吗？没找到？别急着去向下看答案，花点儿时间再看一会儿，敏锐的观察力对于一个游戏开发者来讲很重要。
下面我们来揭晓答案，上图中的每个游戏都是按照固定的行列进行布局，有 7 行 7 列，有 10 行 10 列，有 20 行 10 列。这样的行列布局是不是特别的像一个网格（再看看左下角的 1010 游戏的网格）？这就是我们今天要讲的，所有消除游戏背后都有的那张看不见的“网格”。
严格来说现在有一类消除游戏是完全基于物理的，例如前段时间很火的【合成大西瓜】，这类消除游戏背后是不需要一张“网格”的，因为里面的图标位置是完全由物理设置的。
先理论
可以说网格状的布局是一个消除游戏的起点，在游戏开始之前，至少你要先把游戏布局设置好，之后所有的操作都是基于这个布局进行的。
假设，我们要制作一个消除游戏，它有着 6 行 6 列的布局，上方的这个 6x6 的网格，就是它背后的那张看不见的“网”。要实现这样的布局，我们应该从哪里着手呢？首先，我们需要先来了解一些简单的数学知识。
如图，我们为这张网格增加了一个坐标系，水平方向上的 x 轴，和垂直方向上的 y 轴。坐标轴的中点（0，0）刚好是整张网格的中心点。到现在为止，我们有了一些信息了，我们现象出了一个游戏的网格布局（当然是想象出来的，因为你还没有做出来呢），然后为这张网格设定了一个坐标系，接着，我们要做的就是将所有的元素按照这个网格布局一个一个的摆放到上面。
元素指的是消除游戏中的一个图标，在这个系列教程中，我们把消除游戏中可操作的图标称作元素。
通常，元素的大小是会提前知道的，例如你要做的消除游戏图标的大小是 100x100，在进行接下来的计算之前，让我们先梳理一下当前已经知道的一些条件。
元素的边长 100，通常消除游戏中的图标都是正方形，所以这里我们只需要记录一个元素的边长行数 6 行列数 6 列
好了，接下来我们将使用这 3 个已知的数据，来计算出网格左下角起点的位置。
如图，根据已知的三个条件，我们可以计算出网格左下角第一个格子的中点的位置。
x0 = 0-(列数/2)*边长+边长/2y0 = 0-(行数/2)*边长+边长/2
计算公式可以对照着上图看一下，应该能够看懂，还是看不懂的话，那就自己在纸上画一画，数一数。
这里我们为什么要选择左下角的第一个格子的位置当作起点位置呢？因为我们将会从左向右，从下向上，一行一行的逐个设置每个元素的位置，直到所有的元素都被安放在了正确的位置为止。
你当然也可以选择把左上角当作起点，然后从上向下开始设置，你也可以把右下角当作起点，从右向左
元素的边长 100行数 6 行列数 6 列网格起点位置 （x0,y0）
根据这些已知数据，我们就能够做一些更厉害的事情了，那就是可以计算出网格中任何一个指定行号和列号的格子的位置。
如图，我们为网格标注出了行号和列号，绿色的点代表网格中任意一个格子的位置（通过行号和列号我们可以标示出网格中任意一个格子的确切位置）。根据已知的条件，我们可以获得任意格子位置的计算公式：
xn = x0+(列号-1)*边长yn = y0+(行号-1)*边长
到此，所有的前提都已经具备了，下一步需要做的就是根据你所使用的编程语言或者游戏引擎，把所有的元素按照需要的网格布局挨个的放上去就可以了。
->计算起始点的位置x0,y0->循环(行数)次 ->循环(列数)次 ->创建元素 ->根据当前的行列，设置元素的位置xn,yn ->列循环结束->行循环结束
这是一段实现流程的描述，根据上方我们已知和推导出的前提条件，只需要使用两个循环，就可以一行一行的逐个创建并设置元素了。
再实践
接着，我们来看一下网格布局在微信小游戏制作工具中的具体实现吧！
首先，准备一些变量，这些变量根据名字理解即可。
接下来看一下创建网格布局的积木逻辑。
很简单，就是上方理论部分我们讲过的两个计算公式的应用。
最后，预览一下场景，让我们来欣赏一下创建元素的过程吧！
我特意在每个元素创建之间插入了一点儿时间间隔，这样就能看到如图中的一行一行的，从左到右，从下到上的创建过程了。
网格布局是一个消除游戏的起点，有了这个起点之后，我们才能够继续做出一些更神奇的事情。
作为一个游戏的开发者，你应该具备一双可以透视游戏表象的眼睛，看到那张玩家所看不到的消除游戏背后的网。再回过头来看看最上方的那张包含了各种类型的消除游戏的图片，你看到它们各自背后的那张“网格”了吗？
