APP Inventor初级课程:简化打地鼠
APP Inventor初级编程系列之1
简化打地鼠
今天给大家讲一讲一个简化的用APP inventor制作的打地鼠程序。
原理介绍:
利用布局工具,用按钮来做地鼠。
利用计时器的开关让按钮闪动,灰色代表没有地鼠,红色代表地鼠出没。
那打地鼠的操作如何实现呢?
大家先自己想想看。
第一步:制作一个放按钮的布局。
这里我设置成三行,三列。
高度和宽度充满。

在ai伴侣中的效果:

第三步:我们还需要一个计时器。
计时器是一个非可视组件,在下方可以看到。
将计时器属性面板中的启用属性去掉,表明程序开始运行时,计时器是停止状态。

再加一个按钮,叫做开始按钮。
为了能在编程界从这么多按钮中认出这个按钮,请同学们利用改名修改按钮名称为“开始按钮。”并改写显示名称为“开始”。
我在下图中已经圈出,请同学们仔细观察“显示文字”和按钮名称的区别。
这个按钮的作用就是让游戏开始。

下面我们开始编写代码。
我们先来写开始按钮的代码,再写一写按钮1的代码,其他按钮都是差不多了,一个写好了复制再修改就可以了。
当开始按钮被点击时,将计时器的打开。

这里解释一下计时器中的唯一事件:当“计时器1”到达计时点时:
这个时间代表计时器被启动之后,每过一个计时点(这里我采用默认的1000毫秒,也就是1秒),这个事件里的程序就会被执行一次。

如果在scratch中,我们通过等待一秒,就可以实现时间上的循环和等待,在APP inventor中我们找不到这个代码,因此和时间有关的任何操作,都利用计时器实现。
我们要干什么呢?同学们思考一下,再往下看。
---------------------------------
我们要让按钮随机地闪动,某一个时间,会有一个按钮闪现红色。
怎么写呢?
先自己写写看,再往下读吧。
---------------------------------

当计时器到达计时点,我们就把按钮1变成红色。
看一下模拟器中的效果。

开始按钮一按,按钮1就红了。那么怎么让它红一下,再灰掉呢?还有,要随机选择按钮,如何实现随机呢?
对了,我们要利用随机数。
先新建一个变量“随机数”。并设置成0。这相当于变量的初始化。和scratch中很类似。



将鼠标移动到“随机数”上面,有取值和设置值两个选项。我们在计时器开始计时时,设置一个随机数,并根据随机数选择按钮变红。如果这个按钮没被选到,就变灰。
大家先试试看,再往下看:

上图中,如果在控制模块中,等于在数学模块中,随机数也在数学模块中,大家找找看。
接下来就是随机数不是1,需要变灰,scratch中我们用如果,否则。在APP inventor中怎么找不到?你找找看哦。
-----------------------------------
注意到如果这个代码块中有一个蓝色的设置按钮,打开来看看?
这个否则拖动到如果里面,看看会发生什么?

出现否则了!!!!里面写什么呢?


否则就变灰,大家看一下效果。
偶尔,按钮1会变红,并在1秒钟变灰。其他按钮你会做了吗?
--------------------------------
地鼠随机出现做好了,接下来解决打地鼠的第二个关键问题:如何打地鼠,并加分?
分析:
当一个按钮被点击,并且这个按钮是红色,就可以加一分。然后将按钮变灰色。表示地鼠被打回去了。
怎么写你会了吗?
试着写写看?
---------------------------------
我们也先写按钮1的程序
检测按钮1的颜色是否为红,相关代码我已经标出板块了,大家自己找找看。

里面怎么写?需要加分了,需要一个分数变量。

声明一个分数变量。如果达到了,就加分。APP inventor中没有直接将分数变量加1,所以就要写加1的完成写法,分数=分数+1,每运行一次,分数就会在它原来的基础上再加一分。

运行一下效果。
发现问题了吗?
不知道有没有加分?
想一想为什么?
------------------------------------
因为变量没有像scratch中那样直接显示出来。
那怎么才能显示出来呢?
我们要找一个组件显示。
这里给大家介绍一个组件:标签。当然你也可以用其他组件试试,不只有一种方法哦。
我们回到界面设计,加一个显示分数的标签。

可以先把标签的显示文本设置为0,表示程序刚开始,分数为0。

回到编程界面。每一次变量发生变化,都要把分数显示出来。


测试一下。因为现在我只做了按钮1,随机数等9个等得很辛苦,可以修改成1到2,便于测试,测试完成后再改回来。
发现问题了吗?
按钮会亮红色1秒钟,这一秒中我不停地点击,就会加非常多分,怎么修复这个bug?
思考一下吧!
-----------------------------------
我的解决方法:(你如果有不同的解决方法就太好了!)
当加分之后,马上把按钮变灰。

接下来就简单了,把所有按钮都按这个方法去做吧。
在计时器中的其他按钮,注意我已经圈出了复制代码之后需要修改的地方。
我有九个按钮,所以这个要复制9-1次。

按钮被点击事件也要复制并改变代码。

大家看,复制了一个代码之后,出现了感叹号。在APP inventor中,感叹号代表代码出错。
这里,APP inventor中不允许出现两个相同的时间。例如,不能有两个按钮1被点击,不能有两个屏幕初始化。请大家注意。

修改成按钮2即可。注意代码中有“按钮1”出现的地方都要变成按钮2。
其他3-9个按钮也要这样操作。
是不是觉得很简单,有很麻烦?
APP inventor中有一个自定义过程的方法,可以将重复的代码定义成过程,以后我们会讲到。
测试一下,是不是成功了!

改进一下开始代码,让程序按一下开始按钮,可以将分数清零重新开始。
最后,大家可以美化一下代码?例如,用地鼠的图片代替红色。加上地鼠的叫声等。
我加了一张照片,把按钮显示文字改成地鼠。并加了一个分数的常量标签。看起来比较好玩一些了。

改进:打地鼠这是一个很简单的版本。你可以去想想,如何结束这个程序?例如用倒计时。增加关卡,增加难度,增加地鼠的只数,大家可以慢慢改进哦。
看一下在手机中的运行效果。
--end--
声明:本文章由网友投稿作为教育分享用途,如有侵权原作者可通过邮件及时和我们联系删除:freemanzk@qq.com