第2课 编写程序——屏幕初始化

如果把编写软件比喻为烹制一道菜肴，那么用户界面上的元素就相当于制作这道菜肴的全部食材；当材料备齐之后，就可以考虑进入烹制过程了。就软件而言，当用户界面设计完成之后，就可以开始编写代码了。

我们很自然地会问，从哪里开始呢？无论是对于初学者，还是对于有经验的程序员，都无法回避这个问题。通常的做法是，沿着游戏的时间顺序来编写程序。但是对于初学者来说，也可以从最简单的功能做起，例如，先设置按钮的背面图案，然后针对这个按钮，当点击它时，让按钮显示正面图案；然后再考虑第二个按钮，当点击第二个显示背面图案的按钮时，如何处理可能出现的两种情况：两张卡片的图案相同或不同。这里我们采用通常的做法，首先来编写屏幕初始化程序，在这段程序中，最终要将8对（16张）不同的图案分配给16个按钮。

【注：这个功能的实现依赖于两项关键技术——列表操作以及随机数的使用。这里假设你已经了解了App Inventor中关于列表及随机数的知识】

1、创建按钮列表

首先我们引入一个新的概念——组件对象。我们可以在编程视图中，随意点击一个项目中的组件，打开该组件的代码块抽屉，你会发现，在代码块的最后一行，总有一个与该组件同名的代码块，这个代码块代表了这个组件本身，我们称之为组件对象，对于按钮来说，就是按钮对象。如图1- 4所示，红色线条圈住的就是表格布局对象。你可以把组件对象看作是一类特殊的数据（比如由键值对组成的列表），它里面包含了该组件的所有属性值。

图1- 4 组件对象在为了能够在程序运行过程中，读取或改写任意一个按钮的属性，我们需要利用按钮对象类数据。将所有按钮对象放置到一个列表变量中，这样就可以依据列表项的索引值，随时找到任何一个按钮，并读写它的属性值。

首先声明一个全局变量按钮列表，并编写一个创建按钮列表过程，在该过程中，完成列表项的设置，然后在屏幕初始化程序中调用该过程。如图1- 5所示。这个列表的神奇之处稍后你就能有所体会。

图1- 5 创建按钮列表这里要问一个问题：为什么我们要在屏幕初始化程序中来创建按钮列表，而不是在声明按钮列表时，直接利用按钮对象对变量做初始化呢？像图1- 6所示的那样。

图1- 6 不能将组件直接设置为变量的值原因是这样的：在屏幕初始化过程中，程序首先要创建项目中的所有组件和全局变量，但是，由于组件和变量的生成顺序无法确定，因此在声明全局变量（按钮列表）时，无法确认组件（按钮）是否已经创建完成，因此App Inventor不允许使用组件对象对全局变量进行初始化。图1-6中的红色三角形代表“警告”，“警告”意味着程序中存在严重的错误。

2、让按钮显示背面图案

我们可以在设计视图中将每个按钮的图像属性设置为“back.png”，这样当游戏被打开时，16个按钮会默认显示背面图案（安卓机器人）。但你试想一下，当第一轮游戏结束，准备开始下一轮游戏时，如何将16个按钮上的正面图案全部改为背面图案呢？也就是说，如何在程序运行过程中设置每个按钮的图像属性呢？当然，你可以逐个地设置，这需要16行代码，那么有没有更为简便的方法呢？当然，App Inventor提供了一组“任意组件”代码，可以用来动态地读取或改写任何一个组件的属性。如图1- 7所示。

图1- 7 App Inventor提供的“任意组件”代码在编程视图的代码块面板中，将内置块和Screen1折叠起来，就可以看到最后一组任意组件类代码块，项目中添加的所有组件类型都会在这里出现。点击其中的任意按钮项，将打开与按钮类组件相关的代码块抽屉，其中有两种颜色的块：浅绿和深绿，浅绿色块用于读取某个按钮组件的某一项属性（如图像属性），深绿色块用于设置某个按钮组件的某一项属性。

“组件对象列表+循环+任意组件”是解决上述问题的钥匙！代码如图1- 8所示，测试结果如图1- 9所示。

图1- 8 列表+循环+任意组件——设置每个按钮的图形属性图1- 9 按钮显示背面图案这里我们需要提醒一下，屏幕初始化后，按钮的排列顺序如图1- 10所示。

图1- 10 按钮的排列顺序

3、创建图片列表

声明一个全局变量图片列表，用来保存所有正面图案的图片文件名，如图1- 11所示。

图1- 11 初始化图片列表此处，我们在声明全局变量图片列表的同时，创建了该列表，与之前按钮列表的创建相比较，我们可以更加深入地理解普通数据与组件对象类数据之间的区别。

4、为按钮指定正面图案

首先需要说明一下，这个步骤并不是游戏开发过程中所需要的，这里只是为了让读者了解如何设置按钮的正面图案，因此，这里显示的图片是按照固定顺序排列的。我们设置按钮1和按钮9具有相同的正面图案，同样，按钮2和按钮10具有相同的正面图案，以此类推。与设置背面图案相同的是，这里也要使用“组件对象列表+循环+任意组件”这把钥匙；不同的是，图像属性的值来自于另一个列表变量——图片列表。设置正面图案的代码如图1- 12所示，其测试结果如图1- 13所示。

图1- 12设置卡片的正面图案图1- 13设置卡片的正面图案为了让屏幕初始化程序看起来简洁，提高代码的可读性，我们创建一个初始化正面图案过程，并在屏幕初始化程序中调用该过程，如图1- 14所示。尽管这个过程不是游戏程序中必须的，但我们还是自始至终地保持一种良好的开发习惯——将一段具有特定功能的代码封装为过程，以使程序从整体上变得简洁，且易于阅读。

图1- 14 创建初始化正面图案过程，并在屏幕初始化程序中调用该过程

5、随机显示正面图案

在图1- 13中，卡片的图案是有规律排列的，如果卡片一直是这样排列，那么游戏将毫无乐趣可言。游戏的乐趣在于其多变性，就像我们玩儿扑克牌游戏，每次手中拿到的牌都是不一样的，这种不可预知的变化才使得游戏充满乐趣和挑战。几乎所有的编程语言，都有生成随机数的功能，App Inventor也不例外。我们来看看如何利用App Inventor的列表及随机数功能来实现类似洗牌的操作。

洗牌原理叙述如下：

1. 需要两个列表，A和B，开始时，列表A按顺序放置了8对(16个)图案，列表B为空；
2. 从A中随机选出一个列表项X，添加到列表B中，并从A中删除列表项X；
3. 从A中剩余的所有列表项中随机选出一个列表项Y添加到B中，再从A中删除Y；
4. 重复第3步直到列表A为空，此时列表B中随机排列了8对(16个)图案；
5. 分别将这16个图案设置为按钮1～16的图像属性。

根据上述原理，我们首先来设计列表A。由于列表A最终要被删除掉所有的列表项而成为空列表，因此不必使用全局变量来保存它。我们创建一个随机显示图案过程，在该过程中用临时变量图案列表来充当列表A，并用双倍的图片列表来填充图案列表（列表A）。其次考虑列表B。声明一个全局变量随机图案列表来充当列表B，并设置其初始值为空列表。如图1- 15所示。

图1- 15 定义随机显示图案过程对照上述的洗牌原理，我们可以理解图1- 15中每一行代码的作用。也许你会问，为什么要设置一个随机列表，它似乎与图案的显示无关。如果只是让16个按钮随机显示16个图案，那么列表B（随机列表）的确是多余的，你可以试试看，即使删除过程中与随机列表相关的代码，也不会影响图案的随机显示。但是不要忘记，这个过程只是为了向读者展示如何为按钮随机分配正面图案，真正的游戏中并不会在游戏一开始就向玩家展示所有正面图案。随机列表的作用要到后面的程序中才能体现出来。

图1- 16 让卡片随机显示图案好了，到此为止，我们已经实现了用16个按钮随机显示16个图案的功能，不过在游戏开始时，我们只需要所有按钮显示背面图案。我们将图1- 15中的代码稍作修改，得到的新代码如图1- 17所示。注意，在游戏中我们不需要一次性地随机显示正面图案，因此随机显示图案的过程名称显得有些不够贴切，我们将过程名改为随机分配图案。

图1- 17 修改后的随机分配图案过程及屏幕初始化程序上述代码有两点需要强调，①为了保持屏幕初始化程序的简洁，我们定义了初始化背面图案过程，并在屏幕初始化程序中调用该过程；②虽然删除了随机分配图案过程中设置按钮图像属性的代码，但要记住，按钮列表中的列表项与随机列表中的列表项存着一一对应的关系，在后来翻开卡片显示图案，以及判断两个卡片图案是否相同时，这是唯一的线索。表1- 4描述了图1- 16中按钮列表与随机列表之间列表项的对应关系。

表1- 4 图1- 16中按钮列表与图案随机列表的对应关系 

我们现在已经实现了16个按钮的随机图案设置，并在程序开始运行时，只显示背面图案，下面将针对每个按钮设计它们被点击后程序的行为。