app inventor教程

App Iventor

入门案例教程

目录

1．注册帐号 ..................................................................................................................................... 2

1.1 利用App Inventor广州电教馆服务器注册 ................................................................. 2

1.2通过App Inventor离线版使用 ...................................................................................... 2

2．案例1 HelloAI ........................................................................................................................ 4

2.1 案例展示 ........................................................................................................................... 4

2.2 HelloAI组件设计 .......................................................................................................... 5

2.3 HelloAI的逻辑设计 ........................................................................................................ 7

2.4 App的调试与运行 .......................................................................................................... 10

3．案例2 点我 ............................................................................................................................ 13

3.1 案例展示 ......................................................................................................................... 13

3.2 点我组件设计 ................................................................................................................. 13

3.3 点我的逻辑设计 ............................................................................................................. 15

4．案例3 画板 ............................................................................................................................ 16

4.1 案例展示 ......................................................................................................................... 16

4.2 画板组件设计 ................................................................................................................. 17

4.3 画板的逻辑设计 ............................................................................................................. 18

5．案例4 捕捉皮卡丘 ................................................................................................................ 20

5.1 案例展示 ......................................................................................................................... 20

5.2 捕捉皮卡丘的组件设计 ................................................................................................. 20

5.3 捕捉皮卡丘的逻辑设计 ................................................................................................. 22

6．案例5 记事本 ........................................................................................................................ 26

6.1 案例展示 ......................................................................................................................... 26

6.2 记事本的组件设计 ......................................................................................................... 27

6.3 记事本的逻辑设计 ......................................................................................................... 27

7．案例6 计时器 ........................................................................................................................ 29

7.1 案例展示 ......................................................................................................................... 29

7.2 计时器的组件设计 ......................................................................................................... 29

7.3 计时器的逻辑设计 ......................................................................................................... 30

8．案例7 猜数字游戏 ................................................................................................................ 32

8.1 案例展示 ......................................................................................................................... 32

8.2 猜数字的组件设计 ......................................................................................................... 33

8.3 猜数字的逻辑设计 ......................................................................................................... 35

9．案例8 打蚊子 ........................................................................................................................ 37

9.1 案例展示 ......................................................................................................................... 37

9.2 打蚊子的组件设计 ......................................................................................................... 38

9.3 打蚊子的逻辑设计 ......................................................................................................... 40

1

1．注册帐号

1.1 利用App Inventor广州电教馆服务器注册

1) 安装google浏览器或者360极速浏览器或者火狐浏览器等（不支持ie）；

2) 登入网址：/login/，如图1.1所示：

图1.1 网站界面

3) 点击，申请一个帐号；

4) 注册完毕后登入app inventor，如图1.2所示：

图1.2 新建项目界面

1.2通过App Inventor离线版使用

1) 打开离线安装程序压缩包2) 双击打开安装程序，开始App Inventor离线版

；

3) 安装完毕，在桌面找到并打开AppInventor离线版，出现如下如图1.3。

2

图1.3 cmd运行界面

4) 查看本机IP地址，如图1.4所示。

图1.4 本机IP地址

5) 打开浏览器，在网址栏输入上一步所得到的本机IP地址+:8888（注意冒号:是英文输入）即可打开AppInventor登入界面。如本机IP地址为：192.168.2.105，则在网址栏输入192.168.2.105:8888打开AppInventor界面。

3

2．案例1 HelloAI

2.1 案例展示

HelloAI的使用流程如图2.1所示。

a) 主界面“来点我啊！”，点击绿色机器人；

b) 点击后，小机器人变大了；

c) 再次点击，机器人再次变化；

d) 第三次点击，机器人第三次变化造型；

e) 第四次点击，机器人造型变为超人；

f) 第五次点击，跳出提示栏“是否退出”。

（a）起始界面 （b）1次点击后

（c）2次点击后

（d）3次点击后 （e）4次点击后

图2.1 HelloAI使用流程

4

（f）5次点击后

2.2 HelloAI组件设计

1) 素材准备

通过以上案例展示，我们对“安安诞生记”的界面、交互和行为都有所了解。为了实现这个效果，需要准备一些素材：五张图片。

这些素材可以在本案例实验资源包中找到，你也可以将这些换成你自己感兴趣的素材。在App Inventor中，支持的图片文件格式有 .png、.gif和.jpg等；支持的音频文件格式有.arm、.mpg和.mp3等。

2) 界面设计

登入AppInventor后，点击新建项目，命名为：“HelloAI”。

a) 上传刚才准备好的素材，如图2.2所示。

图2.2 上传素材

b) 设置screen组件属性，在App Inventor中，每一个App都至少有一个Screen组件。在新建项目时就缺省建立了一个Screen1组件，这是后面应用开发的基础。在这个Screen1组件中需要根据需求设置相应属性值，这些属性将会影响到App的界面和交互效果。设置如表2-1及图2.3所示。

表2-1 屏幕组件属性

属性

应用说明

水平对齐

垂直对齐

背景颜色

背景图片

关屏动画

图标

解释

关于屏幕，可以用于注释

控制屏幕中的组件水平对齐方式

控制屏幕中的组件垂直对齐方式。仅当“允许滚动”属性为假时，才能设置。

屏幕的背景颜色

“背景颜色”为透明时，设置的背景图片才能显示

关闭屏时的动画效果

应用安装后的图标

修改值

默认

居中

默认

白色

默认

默认

5

图2.3 screen1属性设置

6

c) 加入其它组件，设置相应的属性，完成界面设计。

从“用户界面”组件中拖取一个“按钮”组件到Screen1中，重命名为“按钮1”设置“图像”为；再拖取“标签”组件到Screen1中，重命名为“来点”，并设置文本内容为“来点我啊！”。

重复上述步骤，并添加“对话框”组件，最终界面效果如图2.4所示。

图2.4 界面最终设计

为了达到每点击一次小机器人切换一次形象和文字的效果，我们将除了“按钮1”和标签“来点”之外的按钮和标签组件属性的“显示状态”都不勾选。

2.3 HelloAI的逻辑设计

对App进行行为编辑，需要点击开发网页右上角的“逻辑设计”按钮，切换到逻辑设计界面进行。通过前面的案例展示可知，当点击按钮时会触发一系列行为，其流程如图2.5所示。

7

停用“按钮1”，启用“按钮2”

再次点击，停用“按钮2”，启用“按钮3”

再次点击，停用“按钮3”，启用“按钮4”

再次点击，停用“按钮4”，启用“按钮5”

当“按钮5被点击”，跳出“提示框”，提示是否退出

是

判断是否退出

否

关闭应用

图2.5 软件运行流程

逻辑设计界面如图2.6所示。

图2.6 逻辑设计界面

逻辑设计界面的左侧为模块栏，除了内置的通用模块外，还有我们在组件设计界面的设置的模块逻辑语言。每个模块点开都有若干相应功能的图形化程序语8

句，通过搭建图形化程序语句实现软件功能。

点击“按钮1”实现的功能代码如图2.7所示。

图2.7 按钮1代码

其作用是使“按钮1”由显示变为隐藏，同时无法被点击；使“按钮2”由隐藏变为显示，同时可以被点击。使标签“来点”由显示变为隐藏，标签“要变身”由隐藏变为显示。

同理，“按钮2”、“按钮3”、“按钮4”的代码也可以做出来了，如图2.8所示。

图2.8 按钮2至4的代码

5”实现的功能与前四个按钮不太相同，当“按钮5”被点击，则整个程序运行结束，出现提示信息“是否退出”，其下有两个选项，如“2.1 案例展示”中的图2.1的（f）。当选择“否”，则回到“按钮1”界面，隐藏“按钮9

“按钮

5”；当选择“是”，则退出程序。其实现的代码如图2.9所示。

图2.9 按钮5的代码

2.4 App的调试与运行

AppINventor提供了3种调试的手段，其中的模拟器运行没能测试成功，这里就不多做介绍，主要调试手段是使用Android系统手机通过连接与电脑统一网络的WIFI，再使用AI伴侣进行连接调试，下面我们做详细介绍使用方法。

1) 在手机上安装AI伴侣，下载地址为：

/companions/；

2) 手机连接与电脑统一网络下的WIFI，并打开“MITAI2Companion”，界面如图2.10所示；

10

图2.10 MITAI2Companion界面

3) 在打开开发网页，如图2.11所示，点击“连接 - AI伴侣”。

图2.11 连接AI伴侣

4) 出现二维码，可以使用如图2.10所示scan QR code扫描。也可以直接在光标出输入如图2.12所示“Your code is：”后面对应的字符串。

图2.12 连接二维码

完成后手机上就会出现应用运行的界面了。

如果连接失败可能有以下几种原因：

11

1) 可能是安装的“AI伴侣”App版本太旧，可以通过升级或者下载安装最新版本的“AI伴侣”App解决。

2) 检查设备是否正常连网。

3) 电脑和移动设备可能连接的不是同一无线网络，需要保证电脑和移动设备连接的无线网络一致。

4) 所在地的网关协议不允许无线连接，这种情况下仍然可以通过模拟器或者USB接口连接手机进行应用的调试运行。

调试完成后，就可以打包成APK了，AI2提供可两种打包方式如图2.13所示。

图2.13 打包APK

1) 打包apk并显示二维码。这种方式会在服务器端打包生成好apk，并给出一个可供下载的二维码。用户可以直接扫码进行app的下载安装。这种方式不必把apk安装包下载到电脑上，对于调试比较方便，但这个二维码下载链接只有两个小时的有效期，过期就不能下载了。

2) 打包apk并下载到电脑。.当打包生成好apk后会把这个apk安装包下载到电脑上。用户可以通过其他方式安装到自己的手机。这种方式可以直接把apk文件分享给其他人，方便其他人安装。

12

3．案例2 点我

3.1 案例展示

“点我”的应用演示过程如图3.1所示。

a) 打开应用，显示熊猫的笑脸，标题栏成烂菜绿色；

b) 当熊猫被按压后，图片变为大笑的金馆长，同时发出“哈哈哈”的笑声，松手后，图片变回熊猫笑脸，同时笑声停止；

c) 当手机被摇晃，也会发出“哈哈哈”的笑声，同时手机发生震动。

（a）起始界面

图3.1 运行界面展示

（b）按压后界面

3.2 点我组件设计

1) 素材准备

通过以上案例展示，我们对界面、交互和行为都有所了解。为了实现这个效果，需要准备的素材为图片两张，笑声文件一个。

2) 界面设计

用自己的账号登录开发网站后，新建一个项目，命名为“haha”。把项目要用到的素材先上传到开发网站后，就可以开始设计用户界面了。

13

按照图3.2添加所有需要的组件，按照表3-1设置所有组件的属性。

图3.2 设计界面

表3-1 组件设置

组件

Screen

用途

存放组件的容器

命名

——

属性设置

AppName：点我

背景颜色：白色

标签 用来显示文字 标签1 字号：20

宽度：充满

文本：哈哈

文本对齐：居中

文本颜色：白色

按钮 用来相应按压屏幕行为 按钮1 高度：充满

宽度：充满

图像：

图像 用来显示图片，做按钮按压后切换的图

图像

音效

同上

当按钮被按压，播放“哈哈”的笑声

加速度传感器 用来感应当手机被晃动时，发出笑声

对话框

14

做退出提示 对话框1 ——

加速度传感器1 敏感度：适中

图像2

音效1

图片：

源文件：3

图像1 图片：

3.3 点我的逻辑设计

初始化Screen1，使标签1的背景颜色变为烂菜绿色，其代码如图3.3所示。

图3.3 Screen1初始化代码

合成颜色的代码从“颜色”模块中选取。

判断“按钮1”是否被按压及是否被松开的程序代码如图3.4所示。

图3.4 按钮1被按压与被松开的代码

判断手机是否被晃动是利用到了手机主板上内置的加速度传感器电路来实现的。当我们晃动手机时，手机的加速度从0变为非0的值，这时候加速度传感器就能感应到其加速度的变化，从而得到加速度数据。其实现的代码如图3.5所示。

图3.5 加速度传感器的代码

最后就是每一个程序都应该有的一按返回键提示是否退出的功能了，这个功能在上一个案例中已经介绍过了，我们可以改变“对话框”的内容来提高App的娱乐效果，其功能代码如图3.6所示。

图3.6 退出提示代码

15

4．案例3 画板

4.1 案例展示

（a）起始界面 （b）调整画笔大小

（c）调整颜色和画笔大小

（d）清除按钮，清除绘画笔迹

（e）选择图片，并在图片上绘画 （f）还原画布，将画布还原成白色背景

16

（g）拍照，并在照片上绘画

4.2 画板组件设计

画板的界面设计如图4.1所示。

图4.1 画板的界面设计

在界面设计时，为了是布局美观合理，我们需要使用“界面布局”组件，来实现界面排版的合理性。

组件的属性设置请自行探索。

17

4.3 画板的逻辑设计

在绘画时，有两种绘画的种类，一种是点，一种是线。点的大小由屏幕上显示的“滑动条”组件实现，在画布上画点的实现方法如下图4.2所示。

图4.2 在画布上画点代码

线是由无数个点组成的，所以想在手机上实现画出线条的效果，就是在画布上显示出你手指划过屏幕的每一个点。当然显示每一个点是不现实的，所以只要我们所显示的点的数量足够多，从整体上看，就是一条线条了。线条的粗细有屏幕上显示的“滑动条组件”实现，在画布上画出线条的代码如图4.3所示。

图4.3 在画布上画线代码

选择图像作画是通过调用手机相册中的图片来作为画布背景，从而在上面作画，其代码如图4.4所示。

图4.4 选择图像代码

现在每部手机上都有摄像功能，我们要利用这个功能就要通过“照相机”组件，我们通过拍照并调用其图像作为画布背景，并在上面绘画。其过程为先调用手机的摄像头硬件拍照，当拍照完成后，将图片设为画布背景。其功能代码如图4.5所示。

图4.5 摄像头代码

18

“画布”组件有一个代码为“清除画布”，其功能是清除画布上的笔迹，所以我们将“清除画布”的功能映射到名为“清除”的按钮组件，当我们对绘画内容不满意时，则使用这个按钮功能清除笔迹。但是这里有各问题是当我们将画布的背景设置为拍照内容或者相册里的图像时，我们就无法将画布的背景还原为白色，所以我们可以通过命为“还原画布”的按钮组件来实现将背景还原为白色的功能。其实现代码如果4.6所示。

图4.6 清除及还原画布的功能代码

19

5．案例4 捕捉皮卡丘

5.1 案例展示

本次案例我们将用到一个新的组件——图像精灵，其功能是可以在画布上实现图像运动的效果。利用“精灵”组件，我们可以用来设计一些简单的游戏。

捕捉皮卡丘的演示过程如图5.1所示。

（a）起始界面，点击开始游戏进入游戏

（b）游戏界面，皮卡丘随机在屏幕上出现，点击皮卡丘就能捕捉它了

（c）没捕捉到一只皮卡丘，界面

上方的“抓到”的数字就会加一;没错过一只，“逃走”的数字就会加一；点击重新开始，回到起始界面

图5.1 捕捉皮卡丘演示流程

5.2 捕捉皮卡丘的组件设计

1) 素材准备

本次案例准备了三个图片素材和两个音频素材，都在相应的素材包里。大家也可以换上自己喜欢的图片素材和音频素材。

2) 界面设计

本次案例的界面有两个，打开App时，起始界面显示，游戏界面隐藏；当点击开始后起始界面隐藏，效果如案例1。在ui元素排版中，因为Screen无法自由的将组件摆放至任意位置，所以为了达到我们想要的界面布局效果，我们在本案例中利用到了将“标签”组件设置为透明，然后来做一些位置上的补充，以达到我们想要的ui排版效果。

需要的组件和组件属性如图5.2及表5-1所示。

20

图5.2 组件设计界面

表5-1 组件属性

组件

Screen

用途

防止其他组件的容器

命名

——

属性设置

AppName：捕捉皮卡丘

背景图片

标题展示：不勾选

屏幕方向：锁定竖屏

标签 用来排版 排版1 背景颜色：透明

文本：编辑为合适排版的内容

文本颜色：透明

字号：调整为合适排版的大小

21

标签 用来排版 标签2 背景颜色：透明

文本颜色：透明

文本：编辑为合适排版的内容

字号：调整为合适排版的大小

表格布局 实现开始按钮处于屏幕居中位置 表格布局1

列数：3

行数：2

高度：30percent

宽度：70pecent

图像：

按钮 用于跳转至游戏界面 开始

垂直布局 标签与画布的垂直布局 垂直布局1

背景颜色：透明

显示状态：不勾选

背景颜色：透明 水平布局 实现标签与重开按钮水平排列 水平布局1

标签 显示“抓到” 抓到 背景颜色：透明

字号：24

文本：抓到：

标签 显示抓到数字 抓到数 背景颜色：透明

字号：24

文本：0

按钮 实现回到起始界面 重开 背景颜色：透明

字号：14

文本：重新开始

标签 显示“逃走” 逃走 背景颜色：逃走

字号：24

文本：逃走：

标签 显示逃走数 逃走数 背景颜色：透明

字号：24

文本：0

画布

图像精灵

容纳图像精灵

用于显示运动的皮卡丘

画布1

图像精灵1

背景图片：

高度：100像素

宽度：100像素

图片：

X坐标：50

Y坐标：50

音效

计时器

播放皮卡丘叫声

使图像精灵随机变换位置

音效1

计时器1

源文件：

启用计时：不勾选

计时间隔：1000

5.3 捕捉皮卡丘的逻辑设计

本案例的流程图如图5.3所示。

22

点击开始

跳转至游戏皮卡丘是否被触碰

抓到数加1，同时播放叫声，手机震动

没触碰到皮卡丘则逃走数加1

图5.3 捕捉皮卡丘基本流程图

首先实现的是图像精灵“皮卡丘”在界面上随机运动。这些“皮卡丘”的运动轨迹是跳跃式的，每个1秒就在变换一次位置，这个位置的地点都是随机的。为了实现这个效果，有两个主要的问题要解决：

1) 如何控制“皮卡丘”的出现位置；

2) 如何改变“皮卡丘”位置的行为规律性地定时出现？

在App Inventor 里面，针对绘图和动画应用，专门提供了3个组件：画布、图像精灵和球形精灵。画布是绘图和动画的基础，图像精灵和球形精灵只能放置在画布上才能工作。在画布里可以设置绘画的画笔颜色、线宽等属性，还提供多种绘画的方法（过程）供开发者调用，比如画圆、画线、画点、画字、保存等；另外还提供了多种事件的响应入口，比如被触碰、被划动、被拖动等，开发者可以在这些事情处理器中拼入响应模块，实现App的行为。

小球在画布中出现的位置是由其坐标决定的。画布的坐标系和直角坐标系不同，如图5.4（a）所示，画布坐标系的原点（0，0）在左上角，X坐标轴往右递增，Y坐标轴往下递增。小球的X坐标取值为其最左端离画布左边距的像素点，Y坐标为其最上方离画布上边距的像素点。如果小球的坐标为（0，0），则在画布中的位置如图5.4（b）所示。

23

（a） （b）

图5.4 画布坐标轴

小球的平面坐标值(x,y)决定了小球在画布上的平面位置。如果希望小球出现在画布上任意位置时都能保持完整，那么要注意小球不能有部分超出画布边界。这可以通过限制小球的坐标取值范围来实现。只要小球的X坐标的取值区间为[0,画布宽度-小球直径]，Y坐标的取值区间为[0,画布高度-小球直径]就能达到要求。同理，图像精灵亦是如此。

使“皮卡丘”在画布上随机运动，即在它们的坐标取值区间随机产生数字即可。代码如图5.5所示。

图5.5 皮卡丘随机移动的代码

这里我们运用到了一个“定义过程”的代码模块，这个模块实现的功能就是当代码模块里写好程序后，我们可以在任意其他代码模块中利用“定义过程”模块的名字来调用此代码，从而简化代码，使其易读性提高，类似于C语言中的条用子程序。

“皮卡丘”每隔1秒会变换一次位置，这就要求每隔1秒这些让“皮卡丘”移动位置的代码需要被执行一次。这有点像每隔一天（24小时）闹钟都会闹铃，催我起床一样。App Inventor中提供了“计时器”组件来实现这种有时间规律的事件处理。

计时器有两个主要属性，“启用计时”属性和闹钟开关一样，决定计时器是否工作。“计时间隔”属性则决定了事件发生的周期，在本例中事件间隔是1000，即1000毫秒，那么这个计时器会每隔1秒产生一个计时事件，将执行在“计时”事件处理器中拼入的代码模块。

计时器的工作原理如图5.6所示，每隔一个计时间隔的时间就会产生一个峰值脉冲，在这个峰值时刻会触发计时处理器去执行相应的代码，而峰值之间的时间段则不引发操作。

图5.6 计时器原理

通过计时器使“皮卡丘”工作的代码如图5.7所示。

24

图5.7 计时器工作代码

当开始游戏按钮被点击后，我们要使该按钮隐藏，同时计时器工作，画布和图像精灵显示，然后播放音效，其功能代码如图5.8所示。

图5.8 开始按钮的代码

检测玩家的是否抓到皮卡丘使用的是画布中“被触碰”时间处理器。当手指触碰到画布时，就会激活该事件处理器。触碰到皮卡丘则抓到计数加一，如果没触碰到皮卡丘则逃跑数加一。程序如图5.9所示。

图5.9 图像精灵代码

“重新开始”按钮的作用是重置两个计数，并回到起始界面，功能相对简单，代码如图5.10所示。

图5.10 重新开始按钮代码

25

6．案例5 记事本

6.1 案例展示

记事本主要应用了“文本输入框”和“微数据库”组件，从而实现保存简单的文字功能。功能演示如图6.1所示。

（a）主界面 （b）输入文字内容

（c）清除按钮功能

（d）保存文字功能，退出应用后重新打开文本内容依然存在

图6.1 记事本功能展示

26

6.2 记事本的组件设计

记事本的案例没有用到图片及音乐素材，这里就不提及了，大家可以自行添加背景图片。本案例的组件设计及组件属性如图6.2所示及表6-1所示。

图6.2 记事本组件设计

表6-1 各组件属性

组件

文本输入框

用途

用于输入记事内容

命名

文本输入框1

属性设置

背景颜色：透明

高度：充满

宽度：充满

提示：留下你的心情~

允许多行：勾选

水平布局 使按钮水平排列 水平布局1 水平对齐：居中

背景颜色：透明

6.3 记事本的逻辑设计

保存编写的内容我们用“微数据库”组件来实现，其代码“保存数据”的参数槽有两个，一个是“标签”，另外一个是“存储值”。其中“标签”相当于一个门牌号，当要“获取数据”时，就用到“标签”的值来查找所对应的数据。存储数据的功能代码如图6.3所示。

27

图6.3 保存数据的代码

当第一次打开记事本应用时，我们未保存过数据，微数据库中没有相应数据，这时获取数据是得不到数据，则App可能发生错误，所以我们要设置当没有存储数据时，或者的返回值为空。其功能代码如图6.4所示。

图6.4 初始化代码

清除数据的代码如图6.5所示。

图6.5 清除功能代码

28

7．案例6 计时器

7.1 案例展示

本案例通过“计时器”组件来实现计时功能，具体使用流程如图7.1所示。

起始界面 输入倒计时时间

点击开始按钮，开始倒计时

点击暂停按钮，暂停时间 点击开始按钮，继续倒计时

图7.1 记事本演示流程

点击重置按钮，回复起始状态

7.2 计时器的组件设计

本案例用到了一个秒表的声音文件，其组件设计如图7.2和表7-1所示。

29

图7.2 组件设计界面

表7-1 组件属性

组件

文本输入框

用途

用于输入倒计时时间

命名

文本输入框1

属性设置

仅限数字：勾选

7.3 计时器的逻辑设计

在本案例中，我们在设置一个全局变量“时间”，其代码为

当输入框的计数时间输入完毕，点击“开始”按钮，开始倒计时。“开始”按钮还有另外一个功能就是当时间暂停后，点击它能恢复倒计时，这是我们就要判断“时间”的值是否小于输入值且不等于零，当满足条件，则继续倒计时。其功能代码如图7.3所示。

图7.3 开始按钮功能代码

计时器工作时，每秒将“时间”减一，直到“时间”为零，同时使手机震动以提醒。其功能代码如图7.4所示。

30

图7.4 计时器功能代码

“暂停”和“重置”按钮的功能代码如图7.5所示。

图7.5 两个按钮的代码

31

8．案例7 猜数字游戏

8.1 案例展示

本案例的游戏规则是：从数个玩家中挑选出一个裁判，裁判在游戏起始界面输入一个“引爆数”，然后将手机传给其他玩家输入数字；当玩家输入的数字正好等于裁判输入的“引爆数”，则判定该玩家输了，接受惩罚；否则继续传递手机，让下一位玩家竞猜，直至引爆“炸弹”。游戏流程展示如图8.1所示。

（a）起始界面，提示输入要让玩家猜的数字

（b）输入一个数字，让玩家竞猜 （c）当玩家输入一个大于待猜数的数字时，游戏发出提示，并范围变成1-竞猜数

（d）点击继续，玩家继续游戏，（e）这时游戏发出提示，并将范32

（f）点击继续，玩家输入的竞猜

输入一个小于待猜数的数字 围刷新为竞猜数-100 数等于待猜数

（g）游戏提示游戏结束，炸（h）点击继续，则继续游戏，（i）在任意界面按返回键，弹爆炸 反则退出游戏 提示是否退出游戏

图8.1 游戏展示

8.2 猜数字的组件设计

1) 素材准备

本案例应用到了两个图片文件，均在资源包里。

2) 界面设计

界面组件的放置及组件属性如图8.2和表8-1所示。

图8.2 界面组件布局

33

表8-1 组件属性

组件

Screen

用途

用于防止其他组件的容器

命名

Screen1

属性设置

水平对齐：居中

垂直对齐：居中

AppName：猜数字

背景颜色：灰色

屏幕方向：锁定竖屏

允许滚动：不勾选

状态栏：不勾选

标题展示：不勾选

图像 用作美化界面 boom 高度：充满

宽度：充满

图片：

显示状态：不勾选

图像 用于美化界面 炸弹 高度：充满

宽度：充满

图片：

垂直布局 用于容纳竞猜数所用组件

垂直布局1 水平对齐：居中

垂直对齐：居中

显示状态：不勾选

标签 显示提醒内容 玩家输入 背景颜色：透明

字号：20

文本：请玩家输入数字

水平布局

文本输入框

使标签与按键水平排放

用于玩家输入竞猜数

水平布局2

竞猜数

——

提示：请输入引爆数

仅限数字：勾选

按钮 竞猜数确定键 确定键2 形状：圆角

文本：确定

文本对齐：居中

垂直布局 用于容纳输入待猜数的各组件

垂直布局2 水平对齐：居中

垂直对齐：居中

宽度：充满

标签 显示：请点炮者输入引爆数

点炮者输入 背景：透明

字号：20

文本：请点炮者输入引爆数

文本对齐：居中

水平布局 用于标签和按钮的水平排版

水平布局1 水平对齐：居中

垂直对齐：居中

高度：充满

宽度：充满

文本输入框 用于裁判输入引爆数 引爆数 背景颜色：默认

高度：充满

提示：请输入1—100之间的数字

仅限数字：勾选

34

按钮

水平布局

确定引爆数

将“提示1”和“范围”水平排列

确定键1

水平布局3

形状：圆角

水平对齐：居中

垂直对齐：居中

标签 显示“当前范围” 提示1 背景颜色：透明

字号：20

文本：当前范围：

标签 显示输入范围 范围 背景颜色：透明

字号：20

文本：1—100

8.3 猜数字的逻辑设计

猜数字的逻辑代码设计是之前案例的综合应用，所以就不多做说明，请大家自己认真读取代码，代码如图8.3所示。

35

图8.3 猜数字的全部代码

36

9．案例8 打蚊子

9.1 案例展示

打蚊子案例的游戏过程如图9.1所示。

（a）起始界面 （b）点击开始，开始倒计时，击

（c）点击暂停，暂停游戏

打蚊子，没击中一次，分数加1

（d）点击开始游戏，继续游戏

重新开始游戏

提示栏

（e）点击重新开始，分数清零，（f）计时结束，游戏结束，跳出37

（g）分数超过最高记录，将刷新最高纪录

（h）点击返回键，提示是否退出

图9.1 打蚊子的游戏过程展示

9.2 打蚊子的组件设计

1) 素材准备

本案例用到了两个图片文件和两个音频文件，都在相应的素材包里，大家也可以更换自己喜欢的图片形象和音频。

2) 界面设计

界面组件的放置及组件属性如图9.2和表9-1所示。

图9.2 界面组件布局

38

表9-1 组件属性

组件

Screen

用途

容纳其他组件的容器

命名

Screen1

属性设置

AppName：打蚊子

背景图片：

图标：

允许滚动：不勾选

状态栏显示：不勾选

水平布局 使三个按钮水平排放 水平布局2 水平对齐：居中

背景：透明

宽度：充满

按钮 实现重新开始功能 重新开始 背景颜色：透明

形状：圆角

文本：重新开始

文本颜色：白色

按钮 实现开始游戏功能 开始 背景颜色：透明

形状：圆角

文本：开始游戏

文本颜色：白色

按钮 实现暂停功能 暂停 背景颜色：透明

形状：圆角

文本：暂停

文本颜色：白色

画布 容纳图像精灵的容器 画布1 背景颜色：透明

高度：充满

宽度：充满

图像精灵 图像“蚊子”的载体，使其在画布中运动

蚊子 启用：不勾选

高度：50像素

宽度：50像素

间隔：50

图片：

旋转：勾选

速度：10

X坐标：50

Y坐标：50

水平布局

标签

使游戏信息水平排列

显示“最高纪录：”

水平布局1

记录

背景颜色：透明

背景颜色：透明

文本：最高记录：

文本颜色：白色

标签 显示最高记录的分数 记录_分数 背景颜色：透明

文本：0

文本颜色：白色

标签

标签

界面排版，无实际含义

显示“时间：”

空格

计时

背景颜色：透明

背景颜色：透明

文本：时间：

39

文本颜色：白色

标签 显示倒计时 计时-时间 背景颜色：透明

文本：60s

文本颜色：白色

标签

标签

界面排版，无实际含义

显示“分数：”

空格2

分数

背景颜色：透明

背景颜色：透明

文本：分数：

文本颜色：白色

标签 显示当前分数 分数-计数 背景颜色：透明

文本0

文本颜色：白色

对话框

音效

计时器1

提示是否退出

蚊子被击打中时播放

用于使“蚊子”运动起来

退出

拍击声

计时器1

——

源文件：

一直计时：不勾选

启用计时：不勾选

计时间隔：800

对话框

音乐播放器

提示时间结束

播放蚊子叫声

时间结束

音频播放器1

——

循环播放：勾选

源文件：

计时器 用于时间倒计时 计时器2 一直计时：勾选

启用计时：不勾选

计时间隔：1000

对话框 提示打破最高记录 破纪录 ——

9.3 打蚊子的逻辑设计

打蚊子的逻辑代码设计是之前案例的综合应用，所以就不多做说明，请大家自己认真读取代码，代码如图9.3所示。

40

41

42

图9.3 打蚊子案例全部代码

43