所有消除游戏背后那张看不见的网格

观察一下上方的这一系列各种各样的消除游戏的图片，它们都有着这样的一个共同点，就是都是按照行列进行布局，有 7 行 7 列，有 10 行 10 列的。这样的行列布局是不是特别的像一个“网格”？这就是我们今天要讲的，所有消除游戏背后都有的那张看不见的“网格”。

严格来说现在有一类消除游戏是完全基于物理的，例如前段时间很火的【合成大西瓜】，这类消除游戏背后是不需要一张“网格”的，因为它们的位置是基于游戏中的物理来设置的。

可以说网格状的布局是一个消除游戏的起点，在游戏开始之前，至少你要先把游戏布局设置好，之后所有的操作都是基于这个布局进行的。

假设，我们要制作一个消除游戏，它有着 6 行 6 列的布局，上方的这个 6x6 的网格，就是它背后的那张看不见的“网”。要实现这样的布局，我们应该从哪里着手呢？首先，我们需要先来了解一些简单的数学知识。

如图，我们为这张网格增加了一个坐标系，水平方向上的 x 轴，和垂直方向上的 y 轴。坐标轴的中点（0，0）刚好是整张网格的中心点。到现在为止，我们有了一些信息了，我们想像出了一个游戏的网格布局（当然是想象出来的，因为你还没有做出来呢），然后为这张网格设定了一个坐标系，接着，我们要做的就是将所有的元素按照这个网格布局一个一个的摆放到上面。

元素指的是消除游戏中的一个图标，在这个系列教程中，我们把消除游戏中可操作的图标称作元素。

通常，元素的大小是会提前知道的，例如你要做的消除游戏图标的大小是 100x100，在进行接下来的计算之前，让我们先梳理一下当前已经知道的一些条件。

元素的大小 100x100，通常消除游戏中的图标都是正方形，所以这里我们只需要记录一个元素的边长 100

行数 6 行

列数 6 列

好了，接下来我们将使用这 3 个已知的数据，来计算出网格左下角的起点的位置。

如图，根据已知的三个条件，我们可以计算出网格左下角第一个格子的中点的位置。

x₀ = 0-(列数/2)*边长+边长/2

y₀ = 0-(行数/2)*边长+边长/2

计算公式可以对照着上图看一下，应该能够看懂，还是看不懂的话，那你有必要去补一下初中的数学知识了。

这里我们为什么要选择左下角的第一个格子的位置当作起点位置呢？因为我们将会从左向右，从下向上，一行一行的逐个设置每个元素的位置，直到所有的元素都被安放在了正确的位置为止。

你当然也可以选择把左上角当作起点，然后从上向下开始设置，你也可以把右下角当作起点，从右向左开始设置，起点的设置可以完全根据你的个人喜好，选择左下角为起点是因为比较符合我们观察事物的习惯。

到目前为止，我们已知的数据又多了一项。

元素的边长 100

行数 6 行

列数 6 列

网格起点位置 （x₀,y₀）

根据这些已知数据，我们其实就能够做一些更厉害的事情了，那就是我们可以计算出网格中任何一个指定行号和列号的格子的位置。

如图，我们为网格标注出了行号和列号，绿色的点代表网格中任意一个格子的位置（通过行号和列号可以标示出网格中任意一个格子的位置）。根据已知的条件，我们可以获得任意格子位置的计算公式。

x_n = x₀+(列号-1)*边长

y_n = y₀+(行号-1)*边长

到此，所有的前提都已经具备了，下一步需要做的就是根据你所使用的编程语言或者游戏引擎，把所有的元素按照需要的网格布局挨个的放上去就可以了。

• 这是一段实现流程的描述，根据上方我们已知和推导出的前提条件，只需要使用两个循环，就可以一行一行的逐个创建并设置元素了。

->计算起始点的位置x0,y0
->循环(行数)次
  ->循环(列数)次
    ->创建元素
    ->根据当前的行列，设置元素的位置xn,yn
  ->列循环结束
->行循环结束

什么？还想要具体的代码实现？你不会懒到只差临门一脚了，也要别人帮你踹一下的地步吧？相信我，如果你还想能学到点儿东西的话，就自己动手实现一下吧！复制黏贴是机器干的活。

最后，让我们来欣赏一下创建元素的过程吧！

*我特意在每个元素创建之间插入了一点儿时间间隔，这样就能看到如图中的一行一行的，从左到右，从下到上的创建过程了。

网格布局是一个消除游戏的起点，有了这个起点之后，我们才能够继续做出一些更神奇的事情。

作为一个游戏的开发者，你应该具备一双可以透视游戏表象的眼睛，看到那张玩家所看不到的消除游戏背后的网。现在，再回过头来看看最上方的那张包含了各种类型的消除游戏的图片，你看到它们各自背后的那张“网格”了吗？

这是一个消除游戏系列文章的第一篇，很可能将是全网最全的消除游戏系列教程，所以，关注公众号追一下子吧！