4.2　第二步：渲染多个方块

只绘制一个方块肯定不行，这连最简单的游戏都算不上。与玩家所要达成的游戏目标相关的那些代码将放在后续步骤中完成，而我们现在仍处于基本的图形渲染环节，所以在当前这一步里还需要再绘制一些内容才行。首先清理代码并创建几个变量，以供本步骤中的函数使用。请把程序清单4.8中的粗体代码加入html文件。

程序清单4.8　声明创建方块所需的变量

这段代码没有太过特别之处。只是为一些变量赋值而已。squareSide表示正方形的边长。max_rgb_color_value表示将要传递给随机数生成器的参数，生成器会据此产生0~255之间的数值。gray对象表示一种颜色，而此颜色是通过easel.js的Graphics对象所取得的。我们将用这种颜色来绘制方块的边线。

接下来，把程序清单4.9中的粗体代码加入init()函数，这些代码放在程序清单4.8那段代码后面。

程序清单4.9　声明init()函数所用到的变量

这段代码也声明了一些稍后要用到的变量，并为其赋值。rows与columns表示将要绘制的方块共有多少行、多少列。根据现在所用的值来看，将会画出36个方块来。squarePadding表示方块间隔。接下来把上一步里绘制方块所用的代码删掉。由于本步骤绘制方块的过程相对比较复杂，所以我们放在后面来讲。

如果你原来较少接触编程的话，那么可能会问，为何不把这些数值直接内联在调用函数的代码里，而要把它们单独用变量来表示呢？这么做是为了使代码便于管理。等到代码多起来之后，开发者就很难记清每个数值的含义了，而像这样把数值声明成变量，则可使稍后阅读代码的人很快就能理解其意图。这样复用变量还有个好处，那就是修改起来更为方便，若想修改某数值，只需改动声明变量时所赋的那个值即可。你可能还会问，为什么有些变量声明在函数外面，而有些却声明在里面呢？这是因为，声明在函数外面的那些变量，脚本中的所有函数都能使用，而声明在函数里面的那些变量，则仅能在本函数内使用。

提示

编写JavaScript程序时，可能会为了提升执行速度而写出一些结构不那么清晰的代码，在编写游戏这种对性能要求很高的程序时，更需要权衡这一问题。有种非常流行的JavaScript优化技术：在开发阶段采用程序员更易读懂的代码风格来编程（使用表意清晰的变量名与函数名、加入适当空格以美化格式、撰写注释，等等），而在发布产品时则制作一份“极简版”（minified version），其中的代码虽然看上去非常难懂，但由于文件很小，所以浏览器下载起来比较快，而且执行效率也比较高。

接下来该调整drawSquare函数了，请把程序清单4.10中的粗体代码加入其中。

程序清单4.10　drawSquare函数

此函数改动不大，我们只是用早前声明的那些变量作为参数来调用其他几个函数而已。

randomColor函数也有改动，新版代码使用了早前所定义的max_rgb_color_value变量（参见程序清单4.11）。

程序清单4.11　修改后的randomColor函数

本步骤所做的最后一处修改，是为init()函数增加for循环。请将程序清单4.12中的粗体代码加到init函数中。

程序清单4.12　完整的init()函数，其中加入了渲染方块所需的代码

如果你还不熟悉for循环的用法，那么此处有好几个地方要学。第一行粗体代码首先创建了名为i的变量，用以充当计数器。然后是分号，分号后面的i<rows*columns意思是：只要i比待显示的方块总数要小，那就一直往下循环。该行代码的最后一部分（也就是第二个分号后面的内容）意思是说，每轮循环执行完之后，就递增i的值。

计算方块x坐标的办法是：将单个方块的总宽度（squareSide+squarePadding）乘以当前方块在该行中的列号。你如果没有见过%操作符，那就将其理解为第一个操作数除以第二个操作数之后的余数。计算方块y坐标的办法是：把循环计数器与总列数相除，并对商取整，用单个方块的总高度（也是squareSide+squarePadding）与刚才说的整数相乘。

若本节代码实现无误，则会在浏览器中看到如图4.3所示的画面。

图4.3　绘制好的多个方块