首先思考安安抓蝴蝶的游戏规则。
(1)首先规定安安抓住蝴蝶9次为顺利完成任务，失败5次这次任务就失败了。
(2)为了反馈信息，需要在界面上解释规则，显示抓到蝴蝶的次数，以及用能量条的减少提示用户机会越来越少。
(3)为了提示用户是否点触到蝴蝶，抓没抓到需要不同的反馈，抓到蝴蝶挣扎振动，没抓到安安懊恼的“啊哦”一声。
(4)记录之前一次抓到的蝴蝶。
(5)为了游戏的趣味性，要求每次开始出现的蝴蝶不同，下一只要抓的蝴蝶样子和刚刚抓住的不同。
(6)另外为了给用户更加明确的失败和成功信息，两者的显示界面要不同。
让蝴蝶动起来
在第四章“安安爱画画”例子中讲解了如何让球形精灵按一定时间间隔在画布中随机位置出现。主要是通过“计时器”组件的定时触发的“计时”事件处理器来改变球形精灵所在的位置。这个思路同样也适合于本例，实现的代码如图5.3所示。图像精灵的横坐标取值范围是[1, 画布.宽度 –图像精灵蝴蝶.宽度]，纵坐标的取值范围是[1, 画布.高度 – 图像精灵蝴蝶.高度]。
写好这个代码就已经可以开始调试了，通过AI伴侣或者模拟器看看App运行的效果。这时蝴蝶会每隔0.5秒变换一下位置，瞬移到另外一个地点。仔细观察会发现蝴蝶的姿态每次出现都是一样的，不够生动。这里可以通过设置图像精灵的“方向”属性来改变蝴蝶出现的姿态。如果“方向”属性被设置为不同的角度，则蝴蝶的图像会旋转响应的度数，同时记住“旋转”属性需要勾选才会发生图像旋转。修改好的代码如图5.4所示。 
图5.4 会改变飞行姿态的蝴蝶
小结一下，要实现蝴蝶在画布中定时多姿态的移动，有三个要素：
1、通过改变图像精灵的“方向”属性来实现图像的旋转；
2、通过图像精灵的“移动到指定位置”方法实现位置改变；
3、通过计时器的“计时”事件处理器来定时执行上述动作。
让蝴蝶连续飞
目前蝴蝶已经能够移动了，但每次移动都是神出鬼没的瞬移，如果是用于“打地鼠”游戏感觉比较合适，因为地鼠是在不同洞口出现，移动过程在地下是看不见的。但蝴蝶是在天上飞的，飞行过程是一个连续的状态，只不过会不停改变飞行方向，导致抓蝴蝶并不容易。因此本例将采用另外一种方法来实现这个效果。
图像精灵或者球形精灵有两个属性可以用来实现连续移动的效果。一个是“速度”属性，缺省该属性值为0。当“速度”属性值设为大于0的数字时，精灵会自动移动。“速度”值越大则移动越快；一个是前面用过的“方向”属性，由“方向”值来确定移动的方向。“方向”属性实际表示的是精灵X轴正方向的夹角。如图5.5所示，当“方向”取值为0时，精灵往正东移动，90度时往正北，180度时往正西，270或者-90度往正南移动。“方向”取值范围可以是[0，360]，也可以是[-180，180]，这两种表示效果是相同的。 
利用这两个属性，让蝴蝶进行连续的方向随机移动要点如下：
1、设置图像精灵的“速度”属性值为大于0的数值，比如10；
2、在计时器的“计时”事件处理器中定时让图像精灵“方向”属性值发生改变。
修改后的代码如图5.6所示： 
这时代码反而更加简单了。图像精灵的“速度”可以在“计时”事件处理器中设置，也可以直接在组件设计时设置。
判断是否抓住蝴蝶
当玩家用手指触碰屏幕时，如果正好触摸到了飞行中的蝴蝶，则算抓到了一次蝴蝶，否则就算落空一次。显然，抓到和落空需要给玩家不同的反馈，如果抓到蝴蝶，则让手机震动一下，然后显示的已抓到蝴蝶数量需要加一；而如果落空了，则播放一个代表懊恼的音效“啊哦”声音，然后让代表生命值的血条长短缩短。因为是5次落空就游戏结束了，因此每次长度应该减少掉原来长度的1/5，这样正好落空5次血条长度就为0了。判断的规则如图5.7流程图所示。
首先需要定义2个变量，分别用来记录已经抓到蝴蝶的数量和玩家的生命值。这两个值分别初始化为0和100。定义如图5.8所示。
检测玩家手指是否触碰到画布的方法在第四章“安安爱画画”中曾使用过，就是画布的“被触碰”事件处理器。当手指触碰到画布时会激活该事件处理器。在本例中因为只有一个图像精灵，因此一旦参数“触摸任意精灵”为true时代表已经抓住了蝴蝶，否则就是落空了。具体实现代码如图5.9所示。如果“触摸任意精灵”为真，条件成立，则调用音效组件震动100毫米，给用户一个直观反馈，记录“已抓蝴蝶数量”增1并更新界面显示。否则就是落空，播放“啊哦”音效，生命值减少20，即1/5，更新能量条长度。因为能量条初始宽度为300，是生命值初始值100的3倍，因此能量条的宽度可以通过生命值乘上3来表示。 
在完成检测是否抓住蝴蝶后，将进一步完善规则。当成功9次后要转入成功界面，显示蝴蝶标本图像和本局游戏得分；当落空5次后要转入失败界面，提示玩家本局结束。
失败处理
失败界面比较简单，只需要把游戏界面的提示语句修改一下，变成“本局任务失败，要加油！”，让蝴蝶停止飞。实现这些功能只需在图5.9中落空部分的代码最后加上下列代码即可，判断生命值是否小于等于0，如果成立的话说明已经落空5次，应该进入失败界面。
测试运行修改完成的代码，发现落空5次后确实蝴蝶停飞，提示也改变了，但如果接着用手指去触碰画布，仍然会发出“啊哦”的音效。这种情况显然是不合适的，下一步改善需要当失败后让画布不再响应玩家触碰。
由于“画布”组件并不像“图像精灵”和“计时器”组件有“启用”属性，所以不能通过设置“启用”属性为false来禁止它工作。一种可行的解决方法是只要进入画布的“被触碰”事件处理器，先去判断一下“生命值”变量的值是否小于等于0，如果不成立，说明游戏还能接着玩，否则就应该是失败状态，不再对被触碰事件做出响应。修改后的代码如图5.11所示。 
成功处理
成功抓到9只蝴蝶以后将进入成功界面。这里需要做2件事情：一是计算游戏得分，二是调用成功的屏幕，并把计算出的得分显示出来。
计算游戏得分
设计游戏得分规则是设计一款游戏的重要组成部分，合理的计分机制可以激起玩家的征服欲望，希望打到高分。一般游戏的计分原则会考虑到以下几个方面：
1、消灭的对手强弱和多少。典型的如打飞机游戏，大小敌机的分值不同，当然难以程度也不一样；
2、拾取的奖励物资的品种和多少。比如打败妖怪爆出的各类宝物；
3、自身的损耗。比如通关时剩余的血量、弹药数量等；
4、通关的时间。完成任务的速度，一般越快得分越高。
还有很多其他方面，要根据具体游戏类型来设定。在“安安抓蝴蝶”这个游戏中，采取一种简单的计分规范，只考虑2个因素：游戏通关时间和剩余生命值。计分公式为：
得分 = （100 – 开始游戏的时间秒数 * 2） + 剩余生命值
为了计算开始游戏的时间，需要新增一个变量来计算，命名为“已用时间”并初始化为0，然后当“计时器”组件每次触发“计时”事件时“已用时间”变量的值加1，也相当于每0.5秒钟加1。同样，新建一个变量“游戏得分”来存放游戏得分，按上面的公式计算得分值。具体实现代码如图5.12所示。 
设计游戏成功屏幕
新建一个屏幕，命名为“Screen_Result”，拖放入需要的组件，并按表5.2设置组件属性。如图5.13所示。 
图5.13 游戏成功屏幕组件设计
在这个屏幕组件设计中并没有给每个组件都重新命名，比如标签1和标签2，用的就是系统自动产生的名字。给组件重命名的基本原则是：如果在逻辑设计中需要用到的组件，最好重命名，做到“见名知意”；而那些只是作为界面显示用的组件，可以不重命名。
调用Screen
在Screen1中调用Screen_Result和第四章中“安安爱画画”中的屏幕调用有所不同，需要传给给被调用的屏幕一个值。因此此处调用“控制”模组中的“打开屏幕并传值”方法。实现这些功能只需在图5.9中成功抓到蝴蝶部分的代码最后加上下列代码即可，先判断已抓蝴蝶数量是否大于等于9，如果成立的话说明已经完成任务，应该进入成功界面。 
在ScreenResult屏幕中接收Screen1传入的值是通过“控制”模组中的“获取初始值”方法来得到的。这样在Screen_Result的屏幕“初始化”事件处理器里通过“标签得分”显示出来。具体实现见图5.15。
另外，当在Screen_Result屏幕中点击“返回”按钮，将关闭本屏幕，返回Screen1。具体实现如图5.16。 
增加蝴蝶品种
为了增强游戏的趣味性，不要永远出现同一种蝴蝶，准备丰富蝴蝶的品种，总共提供9种蝴蝶。更换蝴蝶品种的时间点选在每成功抓到一只蝴蝶，就出来另一个品种。
九种蝴蝶并不需要拖放九个图像精灵到画布中，而是在需要出现另一种蝴蝶的时候更换一下图像精灵的图片即可。这九张蝴蝶图片类似于一个小集体，可以把它们编入一个小队并为这个小队取个名字，以后就可以通过小队的名字和各自在小队中的位次来找到每个成员。如表5.3所示，如果说要访问蝴蝶图像列表的第3项，那么内容就是3.png了。
App Inventor已经定义好了“列表”来便于开发人员使用。在逻辑设计中的“内置块”里有“列表”组件，提供了丰富的相关操作方法。在本例中，首先要定义一个“蝴蝶图像列表” 变量并将它初始化，里面包含9个单元项，如表5.3所示那样。创建列表可以只创建一个空列表，里面的单元项后期通过“添加列表项”等方法加入，也可以在创建时直接初始化所含的单元项，如图5.17所示。 
访问列表的某个单元项需要知道列表的名字和单元项的位置。为此可以定义一个“索引”变量，其初始化值为1，然后通过方法“选择列表…索引值为…的列表项”来访问具体的列表项内容。以后每抓到一只蝴蝶就让“索引”值加1，这样可以访问到下一种蝴蝶。注意：在App Inventor中的列表项位置索引是从1开始的，即排在最前面的第1项位置索引值为1。
还有一个细节也可以同时完成，每抓到一只蝴蝶，就把这只蝴蝶的形象放在屏幕下方展示，即把抓到的那张蝴蝶图片赋值给“图像_抓到的蝴蝶”组件的图片属性。如图5.18所示，在画布“被触碰”事件处理器中的更新显示已抓蝴蝶数量代码模块后加入后三句代码。 
运行出错，调试改错！
修改好代码后应该立即运行一下，测试有没有产生什么问题。果然，当抓到第9只蝴蝶时手机屏幕上会突然弹出一个出错信息，同时开发网站上也会弹出运行故障的信息，如图5.19所示。 
经分析，原来是列表访问越界错误。访问列表中的单元项需要提供正常范围内的位置索引。有效的位置索引取值范围为[1，列表长度]。列表长度就是该列表含有单元项的个数，空列表长度为0。
当玩家已经抓住9只蝴蝶时，这是“索引”变量的值经过加1后已经变成了10，然后通过“选择列表…索引值为…的列表项”方法去访问“蝴蝶图像列表”的10项，这样一来就超过了该列表的长度9，因此产生运行故障。
修复这个错误可以这么处理：当“索引”值增加后超过9了，那么就返回1，形成一个循环，永远只会在1到9之间取值。这个修改还有个好处，就是哪怕游戏规则改为抓到20只蝴蝶才赢，这个代码也不会越界了。修改后的带入如图5.20所示，加一句判断语句即可。
重新开始
当玩家在玩的过程中、通过后或者失败后，都可以选择重新开始。实现重新开始的关键就是让游戏的数据都恢复初始状态，比如已抓蝴蝶数量为0，生命值恢复到100等等，具体实现代码如图5.21。 