游戏是最具魅力的部分，无论是玩游戏，还是做游戏。最近红极一时的“愤怒小鸟”，根据开发者Rovio公司称，第一年下载量达50万次，同时每天运行游戏的人时数超过一百万小时（甚至有人说要把它拍成故事片！）。在App Inventor的世界里，虽然不能确保你能取得同样的成功，但我们可以帮助你创建自己的游戏，包括我们即将创建的“瓢虫快跑”，里面的瓢虫既要吃到蚜虫，同时又要避免被青蛙吃掉。

作品描述

在这个游戏中，采用第一人称视角，玩家扮演游戏中的瓢虫，通过控制设备的倾斜幅度来控制角色的移动。与第三章的打地鼠游戏相比，这是一种不同的游戏体验，这里的玩家置身游戏之中，而打地鼠中的玩家是置身游戏之外。

图5-1 瓢虫快跑游戏的用户界面

如图5-1所示的“瓢虫快跑 ”应用，具体功能如下：

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

• 用屏幕上的指示条来显示瓢虫的生命值，生命值会随时间减少，当生命值为零时，瓢虫会因饥饿而死亡；

• 瓢虫追逐并吃掉蚜虫来提高生命值，抵御饥饿；

• 瓢虫要尽量躲避青蛙，当瓢虫与青蛙发生碰撞时，瓢虫死亡。

学习要点

在开始学习本章之前，我们假设你已经学完了第3章打地鼠，并熟悉了过程创建、求随机数、如果…则…否则块，并熟悉了下列组件：画布、精灵、音效播放器以及计时器。

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

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

• 使用方向传感器组件检测设备的倾斜，并借此来控制精灵的移动；

• 改变精灵所显示的图片；

• 在画布组件上画线；

• 用计时器组件控制多个事件；

• 用变量来记录数值（瓢虫的生命值）；

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

• 使用“并且”块。

设计组件

在应用中，使用一个画布组件作为三个精灵组件的容器。三个精灵组件分别代表瓢虫、蚜虫和青蛙，画布就是它们的竞技场。需要为每个精灵配一张图，其中瓢虫要配两张图（一张是活瓢虫，另一张是死瓢虫），此外，还要为青蛙配一个音效播放器组件，来产生蛙鸣。方向传感器组件用于测量设备的倾斜幅度，并以此为来控制瓢虫的移动；计时器组件用来改变蚜虫的运动方向；另外还有一个显示瓢虫生命值的画布组件；一个重新开始按钮，当瓢虫饿死或被吃掉时，用来重新开始游戏。表5-1提供了本应用中使用的全部组件列表。

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

准备开始

首先下载项目中的素材文件：

• http://appinventor.org/bookFiles/LadybugChase/ladybug.png

• http://appinventor.org/bookFiles/LadybugChase/aphid.png

• http://appinventor.org/bookFiles/LadybugChase/dead_ladybug.png

• http://appinventor.org/bookFiles/LadybugChase/frog.png

• http://appinventor.org/bookFiles/LadybugChase/frog.wav

以上是瓢虫、死瓢虫、蚜虫及青蛙的图片，以及蛙鸣的声音文件，将文件下载到你的电脑，稍后在新创建的项目中上传这些文件。

访问App Inventor网站，创建一个新项目，名称为“瓢虫快跑”，将屏幕的标题属性也设置为“瓢虫快跑”，然后准备好测试设备，连接AI伴侣。

设置第一批组件

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

• 在设计视图中创建一个画布，命名为竞技场，并设置其宽度为“充满”，高度为300像素；

• 在竞技场上放置一个精灵，命名为瓢虫，并设置其图片属性为活的瓢虫图片。不必在意它的x、y属性，这取决于精灵在画布上的位置。

精灵是一种可以自主移动的组件，你可能已经注意到，它们有三个与运动相关的属性：间隔、方向及速度，在本程序中，我们会用到这些属性；

• 间隔：用于设定精灵自主移动的时间间隔，在本游戏中将其设置为10毫秒（在第三章打地鼠应用中，用精灵组件的“移动到指定位置”功能实现对运动的控制）；

• 方向：指示精灵移动的方向，单位是角度。例如：0表示向右，90表示向上，180表示向左，等等。暂时保留它的默认值（0），稍后将在编程视图中用程序改变它；

• 速度：指定精灵在每个时间间隔内移动的距离（单位为像素），我们将在编程视图中设置具体的速度值。

瓢虫的运动由方向传感器来控制，通过检测设备的倾斜幅度，来决定运动的方向及速度；计时器与方向传感器配合使用，来决定瓢虫对设备方向改变的敏感度。计时器的计时间隔为10毫秒（每秒100次），每隔10毫秒，检测一次设备的倾斜幅度，并相应地改变瓢虫的运动方向及速度 。我们将在设计视图中做如下设置：

1. 添加方向传感器组件，它将出现在“不可见组件”区域；

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

图5-2 在设计视图中添加组件

如果测试使用的是安卓设备而非模拟器，你需要关闭设备屏幕的自动旋转功能，并将Screen1的屏幕方向属性设置为竖屏。

为组件添加行为

移动瓢虫

切换到编程视图，创建名为移动瓢虫的过程，并在计时器1的计时事件中调用该过程，如图5-3所示。尝试不打开代码块抽屉，直接在工作区输入块的名字（如“计时器1”）来生成块。（请注意，乘以100的乘号需要输入星号（*），但数学抽屉中显示的是乘号（×）。）你也可以单击右键选择菜单中的添加注释，但这不是必须的。

在移动瓢虫过程里用到了方向传感器的两个最有用的属性：

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

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

幅度乘以100的含义是：瓢虫每隔一个时间间隔，沿着某个特定的方向，移动一定的距离，距离的范围在0到100像素之间（其中的100我们称之为速度因子，用于调节速度的大小。——译者注）。时间间隔为此前在设计视图中设定的10毫秒。

在实时测试过程中，虽然瓢虫可以在测试设备上移动，但与打包下载到设备上的运行效果相比，瓢虫的速度要么太慢，要么太快。感受一下瓢虫的移动效果，如果太慢，可以增加速度因子（如将100改为120）；相反，则减小速度因子（如改为80）。

图5-3 瓢虫在画布上移动

显示生命值

利用第二个画布组件绘制红色指示条，来显示瓢虫的生命值，线条高度为1个像素，宽度为瓢虫的生命值，取值范围从200（健康）到0（死亡）。

添加组件

在设计视图中，在竞技场下方创建一个新的画布组件，命名为生命值指示条；设置其宽度属性为“充满”，高度属性为1个像素。

创建变量：生命值

在编程视图中，声明一个初始值为200的全局变量来记录瓢虫的生命值，如图5-4所示。（还记得吧，在第2章油漆桶中，第一次使用变量画笔宽度）以下是具体步骤：

1. 在编程视图中，从变量抽屉中拖出一个声明全局变量块，将“我的变量”改为“生命值”；

2. 创建一个数字块200（在工作区直接输入数字200或拖出数学抽屉中的0块），并将其填充在声明全局变量块的插槽中，如图5-4所示。

图5-4 设置瓢虫的生命值

一旦定义了某个变量，就可以对变量的值进行读取操作及改写操作：将鼠标悬停在变量名上，将显示出两个代码块：变量块及设变量块，如图5-5所示。

图5-5 读取、改写瓢虫的生命值

显示生命值

我们要在变量生命值与红色线条之间建立关联，使线条长度（像素）与变量生命值相等。为此创建如下两组类似的代码块：

1. 在生命值指示条（第二块画布）上绘制一条红线，起点坐标为(0, 0)，终点为(生命值, 0)，以显示当前的生命值；

2. 在生命值指示条上绘制一条白线，起点坐标为(0, 0)，终点为(生命值指示条的宽度, 0)，以便在绘制新的生命值指示条之前，清除当前生命值指示条上的红色。

不过，最好能创建一个过程，可以使用任意的颜色，绘制任意长度的线条。为此，需要为过程添加两个参数：长度和颜色，当过程被调用时，我们只需给出这两个参数的值即可。还记得在打地鼠一章中，为了随机移动地鼠，需要为内置的随机整数块提供两个参数——最大值及最小值，这里即将创建的过程也需要两个参数——颜色及长度。我们将过程命名为“绘制线条”，下面是创建该过程的具体步骤：

1. 从过程抽屉中拖出一个“定义过程…执行”块，而非“定义过程…返回”块，因为这个过程没有返回值；

2. 点击过程名（“我的过程” ），改为“绘制线条”；

3. 点击过程块左上角的蓝色方块，将打开一个添加参数的面板，如图5-6中的左图所示；

4. 从参数面板的左边，将参数x块拖入到右边的输入项块中，将x修改为“长度”，这意味着为过程添加了一个名为“长度”的参数；

5. 重复步骤4：拖入第二块参数x块，放在“长度”参数的下面，并将其命名为“颜色”，如图5-6右侧所示；

6. 点击蓝色方块，关闭添加参数的面板；

7. 按照图5-7所示，为该过程添加的其余的块：将鼠标悬停在过程定义块的长度及颜色参数上，可以获得两个块：参数块及设参数块。

图5-6 定义过程图5-7 定义绘制线条过程

现在，你已经掌握了创建自定义过程的方法，让我们再写一个显示生命值的过程，两次调用绘制线条过程：第一次用来擦除旧线（覆盖整个画布宽度的白线），第二次用来显示新的生命值，如图5-8所示。

图5-8 定义显示生命值过程

显示生命值过程由以下四行指令组成：

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

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

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

4. 画一条长度（像素）等于生命值的线。

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

瓢虫因饥饿而死

与前几章中的应用不同的是，本游戏设置了结束环节：如果瓢虫吃不到足够的蚜虫，或者被青蛙吃掉，则游戏结束。此时我们希望瓢虫不再移动（设置瓢虫的启用属性为假），并将活瓢虫图片换成死瓢虫（将瓢虫的图片属性设置为此前上传的图片文件dead_ladybug.png）。创建一个名为游戏结束的过程，来实现上述目标。如图5-9所示。

图5-9 定义游戏结束过程

再按图5-10所示向“移动瓢虫”过程添加红框内的代码（在计时器1的计时事件处理程序中，每隔10毫秒调用一次该过程。）：

• 让瓢虫的生命值递减（生命值 = 生命值 – 1）；

• 显示新的生命值（调用显示生命值过程）；

• 如果生命值为0，则调用游戏结束过程。

图5-10 修改移动瓢虫过程

测试：在设备上测试这段程序，并查看生命值是否随时间减少，并最终导致瓢虫死亡。**

添加蚜虫

下面来添加蚜虫，即让蚜虫在竞技场上移动。如果瓢虫撞上蚜虫（视同“吃”掉它），则瓢虫的生命值升高，而蚜虫消失，稍后会再次出现。（在用户看来，这完全是另一只蚜虫，但实际上是同一个精灵组件。）

添加一个精灵组件

添加蚜虫首先要回到设计视图，创建另一个精灵，要确保它不落在瓢虫上，将其命名为蚜虫，其属性设置如下：

• 图片：设置为已上传的蚜虫图像文件；

• 间隔：设置为10，即：像瓢虫一样，每10毫秒移动一次；

• 速度：设置为2，因此蚜虫移动不会太快，以便让瓢虫能捕捉到它。不必在意它的x、y属性（只要不是在瓢虫上）或方向属性，这些可以在编程视图中加以设置。

控制蚜虫

实验发现，蚜虫每隔50毫秒（计时器1发生五次计时事件）改变一次方向的效果最好。可以通过添加第二个计时器组件，并设定其计时间隔为50毫秒来实现这一效果。但是，我们希望能够尝试不同的方法，也可以借此机会学习如何在游戏中使用随机小数。在数学抽屉中的取随机小数块，每次调用它时，都会得到一个0到1之间的随机数（0≤随机数＜1，是游戏类应用中被广泛使用的技术，大大增加了游戏的趣味性。——译者注），利用随机数创建蚜虫移动过程，并在计时器1的计时事件处理程序中调用它，代码如图5-11所示。

块的作用

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

图5-11 在计时事件中调用移动蚜虫过程

瓢虫吃掉蚜虫

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

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

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

• 让蚜虫消失（设置其可见属性为假）；

• 让蚜虫停止移动（设置其启用属性为假）；

• 让蚜虫移动到屏幕上任意位置（这与打地鼠中移动地鼠的方法相同）。

请对照图5-12检查你的代码块。你也可以设想可能发生的其他事情，并自行添加相应的代码，比如播放一段音效。

图5-12 吃掉蚜虫过程

块的作用

每次调用吃掉蚜虫过程，变量生命值增加50，这缓解了瓢虫的饥饿。然后，设置蚜虫的可见及启用属性均为假，看上去像是消失了。最后，随机生成x、y坐标，并“让蚜虫移动到指定位置”，这样，蚜虫会在一个新位置再次出现（如果留在原地，它一出现就会立即被吃掉）。

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

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

图5-13 瓢虫与蚜虫之间的碰撞检测

块的作用

当瓢虫与其他精灵发生碰撞时，将触发瓢虫的被触碰事件，触碰事件携带的参数“其他精灵”，指向任何与瓢虫发生碰撞的精灵。此时，只有蚜虫可以碰撞，但稍后会有青蛙加入进来。我们采用保守的编程方式，即在调用吃掉蚜虫过程之前，要确认碰撞的对象就是蚜虫；此外还要确认蚜虫可见，否则，在蚜虫被吃掉之后到重新出现之前的短暂时间里，还会与瓢虫再次碰撞。如果缺少这项判断，隐形的蚜虫会被再次吃掉，并引起生命值的再次增加，这会让用户感到费解。

提示：保守编程是一种避免错误的编程方式，当程序被修改时，仍然保证可以正常工作。在图5-13中，对“其他精灵=蚜虫”的判断并不是绝对必要的，因为此时瓢虫可碰撞的唯一对象就是蚜虫，但这一判断可以防止后续程序的错误：当添加另一个精灵（青蛙）时，如果忘记了修改瓢虫的碰撞事件处理程序，程序就会出错。通常来说，程序员修复bug的时间要多于写新代码的时间，所以多花一点时间尝试保守型编程是非常值得的。

蚜虫的回归

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

图5-14 让蚜虫复活

块的作用

蚜虫移动过程变得有些复杂，让我们再仔细地研读一下代码：

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

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

因为计时器1的计时事件每隔10毫秒调用一次移动蚜虫过程，而当蚜虫隐形后，只有1/20（5％）的机会恢复可见，因此蚜虫平均重现的时间是200毫秒（1/5秒）。

添加重新开始按钮

在测试蚜虫被吃掉的新功能时，你可能已经注意到，游戏的确需要一个重新启动按钮（作者大概指的是在测试过程中，瓢虫会因为饥饿而死亡，导致游戏无法继续下去，因此需要让游戏重新开始。——译者注）。（在创建应用过程中，将应用分解成小的功能模块，完成一块就测试一块，这种开发模式大有裨益。在测试过程中，经常会发现一些被忽略了的事情，一边做一边测一边改，比起整个应用完成之后再回来做修改，要容易得多。）回到设计视图，拖出一个按钮组件，放在生命值指示条下方，改名为“重新开始按钮”，并设置其显示文本属性为“重新启动”。

在编程视图中，创建重新开始按钮的点击事件处理程序，代码如图5-15所示：

1. 设生命值为200；

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

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

图5-15 重新开始按钮的点击事件处理程序

添加青蛙

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

让青蛙追捕瓢虫

首先回到设计视图，在竞技场上添加第三个精灵组件，将其命名为“青蛙”，设置其图片属性为frog.png，间隔属性为10，速度属性为1，让它的移动速度慢于其他两个角色。

图5-16 显示了新创建的移动青蛙过程，并在计时器1的计时事件中调用该过程。

图5-16 创建并调用移动青蛙过程

块的作用

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

让青蛙吃掉瓢虫

现在需要修改瓢虫触碰事件处理程序，如果瓢虫与青蛙碰撞，则生命值及其指示条都将变为0，且游戏结束，如图5-17所示。

图5-17 修改碰撞检测程序

块的作用

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

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

2. 显示生命值过程被调用，以清除此前的生命值指示条（重新绘制空白线）；

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

瓢虫回归

在重新开始按钮的点击事件中，已经用程序将死瓢虫图片替换成了活瓢虫的图片。现在，需要添加代码将瓢虫随机地移动到某个位置。（想想看，在新游戏开始时，如果没有移动瓢虫，会发生什么？瓢虫与青蛙的位置关系如何？）图5-18显示了游戏重新开始时用来移动瓢虫的代码块。

图5-18 瓢虫复活

块的功能

两个版本的点击事件处理程序之间，唯一的差别就是后者调用了“让瓢虫移动到指定位置”指令（及其位置参数x、y坐标）。指令中调用了两次内置的随机整数块，分别用于生成合理的x、y坐标。虽然没有任何设置来防止瓢虫与蚜虫、瓢虫与青蛙在位置上的重叠，但几率起到了决定性作用。

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

添加音效

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

1. 在设计视图中添加一个音效播放器组件。设置其源文件属性为已上传的声音文件frog.wav；

   • 在吃掉蚜虫过程中添加“让音效播放器1振动”块，参数为100毫秒，以便在蚜虫被吃掉时，设备产生振动；

   • 在瓢虫的触碰事件处理程序中，调用音效播放器1的播放功能，代码位置在调用游戏结束之前，以便当青蛙吃掉瓢虫时发出叫声。

2. 进入编程视图，做如下操作：

完整的应用：瓢虫快跑

图5-19 中显示了瓢虫快跑中全部代码的最终版本。

图5-19 瓢虫快跑中的全部代码

改进

设想对游戏做如下改进，让游戏更具特色：

• 现在，当游戏结束时，青蛙和蚜虫还在移动，这中状况与精灵组件的启用属性有关：在游戏结束过程里将启用属性设置为假，并在重新开始按钮的点击事件中重新将其设置为真；

• 设置并显示一个分数，来表示瓢虫的存活时间。可以用标签组件来显示该分数，并在计时器1的计时事件中让分数递增；

• 将生命值指示条的高度属性设为2，以便使生命值的显示更加明显，并在绘制线条过程里画两条并列的线（或者将画笔宽度设为2个像素——译者注）。（这就是使用过程而非复制代码的好处：当你想擦除或重新绘制指示条时，只要在一处修改代码，就可以改变画笔的宽度、颜色或位置。）

• 添加背景图和更多音效来渲染气氛，比如用动物的声音或预警声来提示瓢虫生命值的降低；

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

• 从合理性的角度来看，被青蛙吃掉的瓢虫应该消失。改变游戏规则：如果瓢虫被吃，则隐形；如果是饿死，则显示死瓢虫图；

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

小结

现在，已经有两个游戏被你收入囊中（假设你已经学习了打地鼠一章），你应该知道如何创建自己的游戏了，这是许多新手或热爱编程者的目标！本章所学的具体内容如下：

• 可以创建多个精灵组件（瓢虫，蚜虫和青蛙），并能检测到它们之间的碰撞；

• 用方向传感器可以检测设备的倾斜，而测得的值可以用于控制精灵（或任何你想象到的角色）的移动；

• 单一的计时器组件可以控制多个发生频率相同的事件（如改变瓢虫和青蛙的方向），也可以控制多个发生频率不同的事件（用随机数来改变事件的发生频率）。举例来说，如果你想在一个计时周期中，有大约1/4（25%）的时间里会发生某个性为，只要将该行为的代码放在“如果…则”块中，并设定条件为随机数＜0.25即可；

• 一个应用中可以使用多个画布组件，我们的例子中使用了两个，一个用作游戏场地，另一个用于显示变量值的变化（而不是用标签来显示文字）；

• 在用户自定义过程里可以使用参数来控制其行为（例如，在绘制线条过程里，使用了“颜色”及“长度”参数），这极大地扩展了过程的适用性。

--end--

声明：本文章由网友投稿作为教育分享用途，如有侵权原作者可通过邮件及时和我们联系删除：freemanzk@qq.com