**这是小蚂蚁游戏开发公众号原创的第38篇。本篇主要内容包括使用微信小游戏开发工具动态的绘制一个网格，并通过使用变量来控制最终生成的网格的效果。
如果你没有任何的游戏开发经验，欢迎阅读我的“人人都能做游戏”系列教程，它会手把手的教你做出自己的第一个小游戏。
在“精致1010”游戏中，我们会使用网格作为底，然后在上方放置方块，类似于下面这样。
这一节我们就试着动态的创建一个10x10的网格。
首先，熟悉一下微信小游戏制作工具中的坐标系。
如图，蓝色线框中间的区域为游戏最终能够显示的区域，如果一个物体位于蓝色的线框外，那么最终在游戏界面中是不会显示的。红色的坐标轴，水平方向为x轴，竖直方向为y轴，中心点（0,0）位于显示区域的正中央。图中的白色的正方形线框的位置就是（0,0），即位于屏幕的正中央。以后，当你遇到一个物体位置为（500,500）时，你就应该知道它大概位于屏幕的右上方。
接下来，我们要画一个方格，方格的中间位置位于屏幕的正中央，把它放在坐标系里应该是这个样子。
我们将从左下角开始，一行一行的向上绘制，直到网格绘制结束。想要绘制网格，需要知道以下几项数据。
- 单个正方形格子的边长 n
- 网格的总行数 r
- 网格的总列数 c
这几项数据可以帮助我们计算出起点的位置以及每一个格子的位置。
如图，根据已知的数据，可以计算出起点的位置，然后根据起点的位置可以计算出网格中的每一个格子的位置。
下面开始进行绘制操作。
先在场景中导入一个小的正方形线框。
如图，导入了一个边长为64的正方形线框（线框的边为2个像素），如果你没有正方形的线框资源，可以使用下方的正方形64x64的线框。
(上方是一个白色线框图片（64x64），如果你的背景是白色的话，会看不到)
先将图片保存到电脑上，然后通过微信小游戏开发工具中的“上传素材”，将线框添加到自己的素材库中，然后就可以在开发工具中使用了。
接着，我们创建几个全局变量。
“单个格子边长”，“总行数”，“总列数”是上方提到的需要设置的3个数据，“起点X坐标”“起点Y坐标”用于存储计算出的起点位置。“行号”和“列号”用于循环遍历使用。
选择“线框方块”对象，为其增加如下的逻辑。
场景启动后，首先根据“总行数”“总列数”“单个格子的边长”三个变量计算出起点X和Y坐标，并存储在全局变量中，然后接着进行一个双层循环遍历依次创建网格中的每一个单元格。每个单元格被创建后，通过“起点坐标”，“行号”，“列号”和“格子边长”计算并设置自己的位置。
点击“预览场景”看一下结果。
如图，在屏幕的正中央创建了一个10x10的网格。仔细观察一下，网格内部的线要比网格四周的线粗。这是因为每个单元格的边框线是2个像素，我们使用64作为单个格子边长的话，两个格子拼接处的边框线就会变为4个像素，我们调整一个“单个格子边长”的全局变量，将其数值设置为62。这样两个格子的拼接处的边框线就会重叠，依旧保持2个像素。
修改“单个格子边长”的全局变量数值为62，再次点击“预览场景”看下效果。
可以看到所有的线都一样粗了，都是2个像素。
接着我们将“单个格子边长”设置为68，看一下。
看起来似乎也不错，组成的网格的每个格子看起来都是独立的。
你可以通过设置“总行数”“总列数”“单个格子边长”的数值，来看一下不同的数值下最终生成的网格的效果。
总结一下：
这一节我们学习了动态的创建一个网格，并且通过设置全局变量的数值来控制最终生成的网格的效果。
练一下：
当前的网格总是在屏幕的正中间显示（即中心点为(0,0)），试着使用全局变量来设置网格的中心点。通过设置中心点的位置，来控制最终网格在屏幕中的显示位置。
如果你对游戏开发感兴趣，欢迎关注我，如果你有对游戏开发感兴趣的朋友，也欢迎把这个系列文章推荐给他。
