2.2.2　将图片块显示出来

最后显示图片块。既然列表已经被随机打乱次序，只需要从列表中依次取出各个图片块并显示即可。然而还有一个问题。就是目前还没有为图片块设置坐标。在创建图片块的时候，在Actor()方法中仅仅传入了图片文件名，而没有传入坐标值。在这种情况下，Pgzero会自动地将每个图片块的坐标设置为（0,0），如果直接显示，可以看到所有图片块都会“挤”在窗口的左上角。

为了让图片能够显示在正确的位置，需要为每个图片块设置坐标。当然，你可以逐个设置8张图片，但既然循环语句可以自动操作，我们又何必浪费时间亲手去做呢？实际上，可以使用计数循环语句，从列表中依次取出每个图片块并为其设置坐标即可。

那么各个图片块的坐标又分别设为多少呢？由于我们的拼图是由9张图片块组成的3×3的网格，因此程序窗口也可以相应地划分为9个方格，一个方格中显示一个图片块。每个方格的位置可以用一对数值（i，j）来表示，其中i代表方格所在列的编号，而j表示方格所在行的编号。各图片块所在方格的位置编号如图2.2所示（注意行和列的编号都是从0开始的）。

这样一来，每个图片块的坐标便可以通过其所在的方格编号来确定，只需要将图片块的大小乘上相应的列号或行号即可。于是可以编写如下代码为所有图片块设置坐标：

图2.2　图片块方格的位置编号

在循环运行过程中，循环变量i的值从0增加到7，i的每个取值都对应着列表pics中的一个图片块pics[i]，同时该图片块的坐标也可通过i求得。由于拼图中总共有3列图片块，因此可用i对3进行“取余”运算，得到pics[i]所在方格的列号，而用i对3进行“取整”运算来得到行号。接着分别将列号和行号乘上图片块的尺寸SIZE，便可算出pics[i]的左边界和上边界的位置，并分别赋值给pics[i]的left和top属性。

最后修改draw()函数，在其中加入遍历循环语句，依次调用每个图片块的draw()方法进行显示。修改后的draw()函数代码如下所示：

现在运行一下游戏，可以看到如图2.3所示的效果，其中各个图片块的位置是随机确定的。多运行几次，看看是否每一次显示的画面都不相同。

图2.3　打乱图片块的效果