第 5 章　瓢虫快跑

游戏是移动应用中最令人兴奋的部分，无论是玩游戏，还是做游戏。最近红极一时“愤怒的小鸟”，根据开发者Rovio公司称，第一年下载量达50万次，同时每天运行的人时数超过一百万小时。（甚至有人说要把它拍成故事片！）我们可无法保证电影的成功，但可以让您用App Inventor创建自己的游戏“瓢虫快跑”，里面的瓢虫要吃蚜虫，同时要避免被青蛙吃掉。

应用描述

如图5-1所示的“瓢虫快跑”应用，用户可以：

• 通过倾斜设备来控制瓢虫移动；

• 查看屏幕上的能量指示条，能量会随时间减少，并引起瓢虫的饥饿；

• 让瓢虫追逐并吃掉蚜虫来获得能量，抵御饥饿；

• 帮助瓢虫躲避青蛙，因为青蛙吃瓢虫。

图 5-1　瓢虫快跑游戏手机截屏

学习要点

在开始探索本章之前，我们假设你已经完成了第3章MoleMash的学习，并熟悉了过程创建、随机数生成、Ifelse块以及ImageSprite、Canvas、Sound和Clock组件。

本章在复习MoleMash以及前几章内容的基础上，主要介绍以下内容：

• 使用多个ImageSprite组件，并检测它们之间的碰撞；

• 使用OrientationSensor（方向传感器）组件检测设备的倾斜，并用它来控制ImageSprite；

• 改变ImageSprite的显示图片；

• 在Canvas组件上画线；

• 用Clock组件控制多个事件；

• 用变量来记录数值（瓢虫的能量水平）；

• 创建和使用带参数的过程；

• 使用and块。

设计组件

在应用中，使用一个Canvas组件作为三个ImageSprite组件的活动场地，三个ImageSprite组件分别代表瓢虫、蚜虫和青蛙，此外，还要为青蛙配一个声音组件。OrientationSensor（方向传感器）通过测量设备的倾斜来移动瓢虫，Clock组件用来改变蚜虫的运动方向。另有一个显示瓢虫能量水平的Canvas组件；一个重新启动按钮，当瓢虫饿死或被吃掉时，用来重新启动游戏。表5-1提供了本应用中使用的全部组件列表。

表5-1 瓢虫快跑游戏中的所有组件

准备开始

下载瓢虫、蚜虫、死瓢虫及青蛙的图像，此外还有青蛙的声音文件。

登陆App Inventor网站，建一个名为“LadybugChase”新项目，屏幕标题设置为“瓢虫快跑”。打开块编辑器并连接到测试设备，将下载的图片及声音文件上载（Upload file）到媒体面板。

如果使用设备而不是模拟器，你需要禁用“屏幕自动旋转”功能，否则当设备旋转时，会改变设备的显示方向。在大多数设备上，可以点击设置->显示，然后取消选中的“屏幕自动旋转”复选框即可。

活动的瓢虫

在这个“第一人称”的游戏中，瓢虫代表玩家，玩家通过倾斜手机来控制瓢虫的运动。与MoleMash不同，这里玩家被带入游戏，而不是在设备以外用手触碰。

添加组件

在前几章，我们一次性地创建了所有的组件，但这不是开发人员的习惯做法。相反，通常每次只创建一部分组件，编写相应的程序，并进行测试，然后在进入到下一部分。在本节中，我们先来创建瓢虫并控制它的运动。

• 在组件设计器中创建一个Canvas，命名为FieldCanvas，并设置其宽度为“Fill parent”，高度为300像素；

• 在FieldCanvas上放置一个ImageSprite，重命为Ladybug，并设置其Picture属性为活的瓢虫图片。不必在意它的x、y属性，这取决于ImageSprite被放在画布上的位置。

也许你已经注意到，ImageSprites还有Interval、Heading以及speed属性，而这些都是在本程序中要用到的：

• Interval属性：在本游戏中可以设置为10（毫秒），来设定ImageSprite自身的移动频率（而不是像MoleMash中那样，运动被MoveTo过程所控制）；

• Heading属性：指示ImageSprite将要移动的方向。例如：0表示向右，90表示向上，180表示向左，等等。现在就让它取默认值——向右，我们将在块编辑器中改变它；

• Speed属性：指定ImageSprite在每个时间间隔内移动的距离（单位为像素）。我们将在块编辑器中设置Speed属性。

瓢虫的运动由OrientationSensor通过检测设备的倾斜程度来进行控制；Clock组件用来每隔10毫秒（每秒100次）检测一次设备的方向，并相应地改变瓢虫的Heading（方向）属性 。我们将在块编辑器中做如下设置：

1. 添加OrientationSensor组件，它将出现在“不可见组件”区域；

2. 添加Clock组件，它也将出现在“不可见组件”区域，并设置其TimerInterval属性为10毫秒。对照图5-2检查添加的组件。

图 5-2　在组件设计器中为动画瓢虫设置用户界面

添加行为

切换到块编辑器，创建名为UpdateLadybug的过程（procedure）及Clock1.Timer块，如图5-3所示。尝试不使用抽屉，直接输入块的名字（如“when Clock1.Timer”）来生成块。（请注意，对数字100的乘法操作使用的是星号（*），但图中看不到。）虽然可以单击右键选择添加注释，但这不是必须的。

图 5-3　每隔10毫秒改变一次瓢虫的方向及速度

在UpdateLadybug过程里用到了两个OrientationSensor最有用的属性：

• Angle（角度）：表示设备倾斜的方向；

• Magnitude（幅度）：表示设备的倾斜程度，范围从0 （不倾斜）至1（最大倾斜）。

Magnitude乘以100是告诉瓢虫，在每个时间间隔（TimerInterval）内，在某个特定的方向，移动的距离在0到100像素之间。时间间隔为之前在组件设计器中设定的10毫秒。

虽然在连接设备上可以测试瓢虫的移动，但与打包下载到设备上的运行效果相比，瓢虫的速度要么太慢，要么太快。对于安装运行的应用，如果太慢，可以增加速度；相反，则减小速度。

显示能量水平

在第二个Canvas组件上用一个红色线条来显示瓢虫的能量水平。线条高度为1个像素，宽度为瓢虫的能量值，取值范围从200（健康）到0（死）。

添加组件

在组件设计器中，在FieldCanvas下方创建一个新的Canvas组件，命名为EnergyCanvas；设置Width属性为“Fill parent”，Height属性为1个像素。

创建变量：Energy

在块编辑器中，创建一个初始值为200的变量来记录瓢虫的能量水平。（还记得吧，在第2章PaintPot中，第一次使用变量dotSize）以下是具体步骤：

1. 在块编辑器中，拖出一个initialize global name to块，将name改为energy；

2. 如果energy块的右侧插槽内有其他块，删掉它：选中并按Delete键或直接拖到垃圾桶；

3. 创建一个数组块200（直接输入数字200或拖动Math抽屉中的0块），然后插入initialize global energy to块，如图5-4所示。

图 5-4　将变量energy初始化为200

图5-5中显示了当鼠标悬浮在初始化变量块的“energy”文本上时，呼出了全局变量energy的“get”及“set”块；

图 5-5　从初始化变量块中获得set及get块

画出能量条

我们要在变量energy与红色线条之间建立通信，使线条长度（像素）与能量值相等。为此创建如下两个类似的组块：

1. 在EnergyCanvas上从(0, 0)点到(energy, 0)点画一条红线，以显示当前的能量水平；

2. 在EnergyCanvas上从(0, 0)点到(EnergyCanvas.Width, 0)点画一条白线，在画新能量水平线之前，清除当前的能量水平线。（记得前面设置EnergyCanvas.Width为“Fill parent”。）

然而，最好能创建一个过程，能用任何颜色在EnergyCanvas上画任意长度的线。为此，需要定义两个参数：length（长度）和color（颜色），当程序被调用时，我们只需要指定参数值，就像在MoleMash一章中调用random integer内置过程一样。下面是创建DrawEnergyLine过程的步骤，如图5-6所示。

1. 进入Procedures抽屉，拖出一个to procedure块；

2. 点击过程名（可能是“procedure” ），改为“DrawEnergyLine”；

3. 点击过程块左上角的蓝色方块，呼出两个块：input及input x；

4. 将input x块插入到input块内，将x修改为color；

5. 重复步骤4：插入第二块input x并命名为“length”；

6. 按照图5-6所示，为该过程添加的其余的块：将鼠标悬停在to DrawEnergyLine块的参数color及length文本上，获得get color及get length块；或者从Variables抽屉中直接拖出get块，插入到to DrawEnergyLine内部的块中，点击下拉菜单选择color或length。

图 5-5a　为DrawEnergyLine过程添加输入(参数)

图 5-6　定义过程DrawEnergyLine

现在，你已经掌握了创建过程的窍门，让我们再写一个DisplayEnergy的过程，两次调用DrawEnergyLine过程：第一次用来擦除旧线（覆盖整个EnergyCanvas的白线），第二次用来显示新的能量线，如图5-7所示。

图 5-7　定义过程DisplayEnergy

DisplayEnergy过程由以下四行命令组成：

1. 设定画笔颜色为白色；

2. 画一条贯穿EnergyCanvas的横线（1个像素高）；

3. 设定画笔颜色为红色；

4. 画一条长度等于energy值的线。

　提示：将若干行代码规整到一个过程中，通过调用这个过程来取代逐行地执行这些代码，这个过程被称作重构，这种强大的技术使得程序更易于维护，也更可靠。在这种情况下，如果我们想改变能量线的高度或位置，我们只需对DrawEnergyLine过程做一次修改，而不必分两次来完成这一修改。

饥饿而死

不同于前几章的应用，本游戏设定了结束环节：如果瓢虫吃不到足够的蚜虫，或者被青蛙吃掉，则游戏结束。此时我们希望瓢虫不再移动（设置Ladybug.Enabled为false），并将活瓢虫图片换成死瓢虫（将Ladybug.Picture设置为已上传的图片文件名）。GameOver过程的创建如图5-8所示。

图 5-8　定义GameOver过程

再按图5-9所示向UpdateLadybug（由Clock.Timer每10毫秒调用一次）添加红框内的代码：

• 减少瓢虫的能量（energy = energy - 1）；

• 显示新的能量水平（call DisplayEnergy）；

• 如果energy值为0则游戏结束。

　测试：你可以在设备上测试这段代码，并验证能量水平随时间的减少，并最终导致瓢虫死亡。重启应用可以点击“Reset Connection->AI Companion”。

图 5-9　UpdateLadybug过程的第二个版本

添加蚜虫

下面来添加蚜虫，即让蚜虫在FieldCanvas上浮动。如果瓢虫撞上蚜虫（视同“吃”掉它），则瓢虫的能量水平升高，而蚜虫消失，且稍后会再次出现。（在用户看来，这完全是另一只蚜虫，但实际上是同一个ImageSprite组件。）

添加一个ImageSprite

添加蚜虫首先要回到组件设计器，创建另一个ImageSprite，要确保它不落在瓢虫上，命名为Aphid，其属性设置如下：

1. Picture属性：设置为已上传的蚜虫图像文件；

2. Interval属性：设置为10，即：像瓢虫一样，每10毫秒移动一次；

3. Speed属性：设置为2，因此蚜虫移动不会太快，以便让瓢虫能抓住它。

不必在意它的x、y属性（只要不是在瓢虫上）或title属性，这些可以在块编辑器中设置。

控制蚜虫

实验发现，蚜虫每隔50毫秒（Clock1跳动5次）改变一次方向的效果最好。可以通过创建第二个Clock组件，并设定其TimerInterval属性为50毫秒来实现这一效果。但是，我们希望能够尝试不同的技术：使用random fraction（随机分数）块，每次调用，它都将返回一个≥0但＜1的随机数。创建UpdateAphid过程，并用Clock1.Timer来调用它，如图5-10所示。

图 5-10　添加UpdateAphid过程

块的作用

定时器每次跳动（每秒100次）都将调用UpdateLadybug及UpdateAphid过程。UpdateAphid过程首先生成一个介于0到1之间的随机数，例如0.15，如果该数＜0.20（在20％的时间里），蚜虫将改变方向，改变的角度为0到360之间的随机数；如果该数≥0.20（在其余80％的时间里），蚜虫方向保持不变。

瓢虫吃掉蚜虫

下一步，当他们碰撞时，让瓢虫“吃掉”蚜虫。幸运的是，App Inventor提供了ImageSprite组件之间的碰撞检测。问题是：当瓢虫与蚜虫碰撞时，会发生哪些事情？在继续阅读之前，请你停下来想想这个问题。

为了处理瓢虫与蚜虫的碰撞，创建EatAphid过程，其具体步骤如下：

• 瓢虫的能量水平上升50，来模拟享受美食；

• 让蚜虫消失（设置其Visible属性为false）；

• 让蚜虫停止移动（设置其Enabled属性为false）；

• 让蚜虫移动到屏幕上任意位置（这与MoleMash中移动地鼠遵循了相同的编码方式）。

请对照图5-11检查您的块。如果你还能想到发生其他事情，比如音效，可以自行添加。

图 5-11　创建EatAphid过程

块的作用

每次调用EatAphid，变量energy增加50，缓解了瓢虫的饥饿。然后，蚜虫的Visible及Enabled属性都被设置为false，看上去像是消失了。最后，产生随机的x、y坐标，并调用Aphid.MoveTo，这样，蚜虫会在一个新位置再次出现（否则，它一出现便会被立即吃掉）。

瓢虫与蚜虫之间的碰撞检测

图5-12显示了在瓢虫与蚜虫之间做碰撞检测的代码。

图 5-12　检测并处理瓢虫与蚜虫之间的碰撞

块的作用

当瓢虫与另一个ImageSprite碰撞时，将调用Ladybug.CollidedWith，参数“other”指向任何与瓢虫发生相撞的ImageSprite。此时，只有蚜虫可以碰撞，但稍后会有青蛙加入进来。我们采用防御性编程方式，即在调用EatAphid之前，要确认碰撞的对象就是蚜虫；此外还要确认蚜虫可见，否则，蚜虫在被吃掉之后而重新出现之前，还会与瓢虫再次碰撞。如果缺少这项确认，隐形的蚜虫会被再次吃掉，并引起能量水平的再次增加，这会让用户感到费解。

　提示：防御性编程是一种避免错误的编程方式，当程序被修改时，仍然可以正常工作。在图5-12中，对other=Aphid的检查并不是绝对必要的，因为此时瓢虫可碰撞的唯一对象就是蚜虫，但检查可以防止后续程序的错误：当添加另一个ImageSprite（青蛙）时，如果忘记了修改Ladybug.CollidedWith，程序就会出错。通常来说，程序员修复bug的时间要多余写新代码的时间，所以多花一点时间尝试防御型编程是非常值得的。

蚜虫的回归

最终蚜虫要重新出现，按图5-13所示修改UpdateAphid：仅当蚜虫可见时，令其改变方向（改变一个不可见的蚜虫岂不是浪费时间。）；若蚜虫不可见（如刚刚被吃掉），将有1/20（5％）的机会重新出现，或者说会被再吃掉。

图 5-13　修改UpdateAphid使隐形蚜虫起死回生

块的功能

UpdateAphid变得有些复杂，让我们仔细推敲一下：

• 如果蚜虫可见（这应该是常态，除非刚刚被吃掉），UpdateAphid的行为没有变化，即有20%的几率改变方向；

• 如果蚜虫不可见（刚被吃掉），则执行“else”部分。首先生成一个随机分数，如果它＜0.05（在5％的时间里），蚜虫再次变得可见并且可用，即，有资格被再次吃掉。

因为Clock1.Timer每隔10毫秒调用一次UpdateAphid，而当蚜虫隐形后，只有1/20（5％）的机会恢复可见，因此蚜虫平均重现的时间是200毫秒（1/5秒）。

添加重新启动按钮

在测试蚜虫被吃的新功能时，你可能已经注意到，游戏的确需要一个重新启动按钮。（在创建应用过程中，将应用分解成小的功能模块，完成一块就测试一块，这种开发模式大有裨益。在测试过程中，经常会发现一些被忽略了事情，一边做一边测一边改，比起整个应用完成之后再回来做修改，要容易得多。）在组件设计器中，将Button组件添加在EnergyCanvas下方，改名为“ResetButton”，并设置其Text属性为“重新启动”。

在块编辑器中，创建当RestartButton被点击时的代码，如图5-14所示：

1. 能量水平设置回200；

2. 重新使蚜虫可见并且可用；

3. 重新使瓢虫可用，并将其图片改为活的瓢虫（除非你想要僵尸瓢虫！）。

图 5-14　按下“重新启动”按钮让游戏重新开始

添加青蛙

到目前为止，让瓢虫活着并不难，因此我们需要一个捕食者。就是说我们要添加一个奔向瓢虫的青蛙，如果发生碰撞，瓢虫被吃掉了，游戏结束。

让青蛙追捕瓢虫

首先回到组件设计器，在FieldCanvas上添加第三个ImageSprite组件Frog，设置其Picture属性为相应的图片，interval属性为10，Speed为1，让它的移动速度慢于其他生物。

图5-15显示了Clock1.Timer中调用了新创建的过程。

图 5-15　让青蛙向着瓢虫移动

块的功能

现在你应该可以熟练地使用随机分数来控制事件的发生几率了，这里，青蛙有10％的机会直接直奔向瓢虫。这里用到了三角函数，但别害怕，你不必明白其中的道理！App Inventor提供了大量的数学函数，也包括三角函数。本例中使用的ATAN2（反正切）块，返回值是一个角度，该角度由一组给定的x、y值相对应。（如果你熟悉三角函数，会发现求解ATAN2时所用的y值与你所期望的y值符号正好相反，即y的减法顺序是反的，这是因为在Android的画布上，向下是y坐标的增加方向，这与标准的x-y坐标系正相反。）

让青蛙吃掉瓢虫

现在需要修改碰撞代码，如果瓢虫与青蛙碰撞，能量水平以及能量线都将变为0，且游戏结束，如图5-16所示。

图 5-16　让青蛙吃掉瓢虫

块的功能

在第一个if（瓢虫与蚜虫的碰撞检测）块的基础上，添加了第二个if块，来检测瓢虫与青蛙的碰撞。如果瓢虫和青蛙碰撞，将发生三件事情：

1. 变量energy降为0，瓢虫失去生命力；

2. DisplayEnergy被调用，以清除此前的能量线（并绘制新的空白线）；

3. 调用前面写过的GameOver过程，以便让瓢虫停止移动，并将图片改为死瓢虫。

瓢虫回归

RestartButton.Click已经用程序将死瓢虫图片替换成了活的图片。现在，需要添加代码将瓢虫移动到任意位置。（想想看，在新游戏开始时，如果没有移动瓢虫，会发生什么？瓢虫与青蛙的位置关系如何？）图5-17显示了游戏重新启动时用来移动瓢虫的块。

图 5-17　ResetButton.Click的最终版本

块的功能

两个版本的RestartButton.Click之间，唯一的差别就是Ladybug.MoveTo块及其参数。调用了两次内置的随机整数函数，分别用于生成合法的x、y坐标。虽然没有任何设置来防止瓢虫与蚜虫、瓢虫与青蛙的位置上的重叠，但几率起到了决定性作用。

　测试：重新启动游戏，并确信瓢虫出现在一个新的任意位置。

添加音效

测试游戏时，你可能注意到：当蚜虫或瓢虫被吃掉时，缺少良好的反馈。要添加音效及触觉反馈，请执行以下操作：

1. 在组件设计器中添加一个Sound组件。设置其Source属性为已上传的声音文件；

2. 进入块编辑器，进行如下操作：

• 在EatAphid过程中添加Sound1.Vibrate块，参数为100毫秒，以便在蚜虫被吃掉时，设备产生振动；

• 在Ladybug.CollidedWith中调Sound1.Play，位置在调用GameOver之前，以便当青蛙吃掉瓢虫时发出叫声。

改进

下面这些想法目的是改进游戏，或者让游戏更个性化：

• 目前，当游戏结束时，青蛙和蚜虫还在移动，这与其Enabled属性有关：在GameOver中将其设置为false，并在RestartButton.Click中重新设置为true；

• 设置并显示一个分数，来表示瓢虫的存活时间。你可以用Label来显示一个数值，该数值在Clock1.Timer内不断递增；

• 将EnergyCanvas的Height属性增加为2，以便使能量条更加明显，并在DrawEnergyLine内画两条线，一个在另一个之上。（使用一个过程，而不是复制代码先擦除再重绘能量线，这样做的另一个好处是：如果你需要修改线的粗细、颜色或位置时，只需要修改一处的代码。）

• 添加背景图和更多音效来渲染气氛，比如用真声或预警声来提示瓢虫能量水平的降低；

• 让游戏随时间推移而变得越来越难，如增加青蛙的速度，或降低Interval属性值；

• 从技术上来说，被青蛙吃掉的瓢虫应该消失。改变游戏规则：如果瓢虫被吃，则隐形；如果是饿死，则显示死瓢虫图；

• 将瓢虫、蚜虫和青蛙的图片换成更适合你个人口味的图片，如霍比特人、半兽人以及邪恶的巫师；或者是反叛星际战斗机、能源舱及帝国战机。

小结

已经有两个游戏被你收入囊中（假设你学习了MoleMash），现在你该知道如何创建自己的游戏了，这是许多新程序员或有志者的目标！具体来说，您学习了：

• 可以创建多个ImageSprite组件（瓢虫，蚜虫和青蛙），并在它们之间做碰撞检测；

• 用OrientationSensor可以检测设备的倾斜，而测得的值可用于控制sprite（或你能想到的任何其他对象）的移动；

• 一个Clock组件可以控制多个发生频率相同（改变瓢虫和青蛙的方向），或通过使用random fraction块来控制频率不同的事件。例如，如果你想在一个周期中，有大约1/4（25%）的时间里会发生某事件，只要将它放在if块中，并设定条件为random fraction的结果＜0.25即可；

• 一个应用中可以使用多个Canvas组件，我们的例子中有两个，一个用于游戏场地，另一个用于变量的图形化显示（而不是用Label显示）；

• 用户自定义过程可以使用参数（如在DrawEnergyLine 中使用的“color”及“length”）来控制其行为，这极大地扩展了过程抽象的能力。

另一个游戏中常用的组件是Ball，与ImageSprite唯一不同的是，它的外观是一个被填充的圆形，而不是一张任意的图片。

资源下载

frog.png

ladybug.png

deadladybug.png

aphid.png

frog.wav

英汉对照

orientation: 方向

field: 场地

ladybug: 瓢虫

aphid: 蚜虫

frog: 青蛙

energy: 能量

restart: 重新开始

chase: 追逐,奔跑

upload: 上载,上传

file: 文件

interval: 间隔

heading: 前进方向

speed: 速度

timer: 计时器

updat: 更新

angle: 角度

magnitude: 幅度

delete: 删除

procedure: 过程

input: 输入

display: 显示

enable: 使有效

reset: 重置

visible: 可见的

eat: 吃

collide: 碰撞

with: 与...

else: 否则

fraction: 分数