App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网

App Inventor编程开发集锦-目录

App Inventor编程开发集锦是App Inventor编程教程的延伸,通过PBL项目制的实战案例,讲解App I…

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

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

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

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

1、创建按钮列表

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 4 组件对象
在为了能够在程序运行过程中,读取或改写任意一个按钮的属性,我们需要利用按钮对象类数据。将所有按钮对象放置到一个列表变量中,这样就可以依据列表项的索引值,随时找到任何一个按钮,并读写它的属性值。

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 5 创建按钮列表
这里要问一个问题:为什么我们要在屏幕初始化程序中来创建按钮列表,而不是在声明按钮列表时,直接利用按钮对象对变量做初始化呢?像图1- 6所示的那样。

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

2、让按钮显示背面图案

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 7 App Inventor提供的“任意组件”代码
在编程视图的代码块面板中,将内置块和Screen1折叠起来,就可以看到最后一组任意组件类代码块,项目中添加的所有组件类型都会在这里出现。点击其中的任意按钮项,将打开与按钮类组件相关的代码块抽屉,其中有两种颜色的块:浅绿和深绿,浅绿色块用于读取某个按钮组件的某一项属性(如图像属性),深绿色块用于设置某个按钮组件的某一项属性。

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 8 列表+循环+任意组件——设置每个按钮的图形属性
App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 9 按钮显示背面图案
这里我们需要提醒一下,屏幕初始化后,按钮的排列顺序如图1- 10所示。

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 10 按钮的排列顺序

3、创建图片列表

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 11 初始化图片列表
此处,我们在声明全局变量图片列表的同时,创建了该列表,与之前按钮列表的创建相比较,我们可以更加深入地理解普通数据与组件对象类数据之间的区别。

4、为按钮指定正面图案

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

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图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所示。

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

App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网
图1- 16 让卡片随机显示图案
好了,到此为止,我们已经实现了用16个按钮随机显示16个图案的功能,不过在游戏开始时,我们只需要所有按钮显示背面图案。我们将图1- 15中的代码稍作修改,得到的新代码如图1- 17所示。注意,在游戏中我们不需要一次性地随机显示正面图案,因此随机显示图案的过程名称显得有些不够贴切,我们将过程名改为随机分配图案。

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

表1- 4 图1- 16中按钮列表与图案随机列表的对应关系 App Inventor编程开发集锦1-水果配对-第2课-屏幕初始化-少儿编程教育网

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