AppInventor安卓手机应用开发简易入门3-2

1、App Inventor安卓手机应用开发简易入门选修课程第三章#App Inventor安卓手机应用开发简易入门选修课程第三章#App Inventor安卓手机应用开发简易入门选修课程第三章本节概要：本章将通过 HappyKick的课例，介绍新组件 canvas ImageSprint,在后续中 添加计时器组件。围绕canvas的点击事件，配合一些常用控件，达到打鼹鼠的 游戏效果，为了让游戏更有趣和耐玩性，增加了生命值和血条等参数。通过学习 本节，让学生明白，做一个安卓小游戏，也是一件很简单的事。学习要点熟悉 canvas ImageSprint 组件熟悉计时器组件设置自变量来显示血条认识新组

2、件表 3-2-1类型名称用途Ca nvas 组件：画布用于打鼹鼠的背景ImageSprint 组件：图片精灵装载鼹鼠图像Clock组件：计时器组件定时事件表3-2-2 :Image组件与ImageSprint组件的异同点ImageSpri ntImage组件相同都是放置图片的组件，用于显示图片不同点是canvas的内部组件，要依赖于canvas存在， 不能单独存在。一般的图片组件，独立使用， 没有点击事件。实例探究：HappyKickScreen!D目勞抚下弔Scrccnlfail2 I血 4莖釉幵始退出success 2 We 5茁新幵蜡退出图3-2-3 :程序界面1图3-2-4 :程序界面

3、2界面设计与组件构成:W一mm"wh*»*F二ztrtart|1” “ 图3-2-5最终UI界面组件的拖放和设置图 3-2-6图3-2-4所示。界面主要涉及到的是第一次用都的 canvas组件，ImageSprit、 Clock组件，拖曳。组件清单：2个canvas，1个图片精灵2个水平布局组件，垂直组件目录 下：1个Image, 1个按钮，一个声音组件，界面设计和详细表如下：3-2-7组件所属列表组件名字属性名属性值说明DrawingandAni matio nCanvas1height300背景DrawingandAni matio nlmgs_BeCatchpictu

4、re1.png显示鼹鼠DrawingandAni matio nCanvas2height10显示血条LayoutHoriz on talArra ngeme nt2水平布局控件User in terfaceLab kicktext已打击User in terfacelab catchtext0User in terfaceLab lifetextlifeUser in terfaceLab no wlifetext0LayoutHoriz on talArra ngeme nt1水平控件User in terfaceBtn aga intext重新开始User in terfaceBtn c

5、an celtext退出User in terfaceClock1TimerI nt erval10001秒执行一次Block块编程拼接搭建要实现课例的需求，则需要用 block编程实现以下几个问题： 鼹鼠的点击事件学生首先会想到的是lmgs_BeCatch （鼹鼠图）的单击事件，这样想是情有可 原的，但是我仔细再思考一下，Imgs_BeCatch的 Click事件能够表示被抓到，那么没有抓到的情况呢？ 所以综合考虑从之后，我们还是要从canvas下手，从canvas的touched事件下 手，在单击时是不是碰到了 Imgs_BeCatch （鼹鼠图），这是一种不一样的思维 角度。图 3-2-

6、6 鼹鼠的移动事件疑问：怎样移动？之前，关于改变在app中组件的位置，我们之前一直没有尝试过，而作为动画 主角的图片精灵，小鼹鼠也应该是变换着位置，这里会用到数学的随机函数（在 游戏类里，随机数可以产生变化，增加趣味性）。所以通过随机数，让鼹鼠改变 位置，这是课例的一个基本解决方案提问：为了让鼹鼠能够完整的出现在屏幕里，随机产生的位置需要什么样的设置？数学的随机函数random （n,m）:在nm之间产生一个随机整数。随机数最大宽度=画布宽（）-图片精灵的宽。同理得到最大高度。对应的代码块图3-2-8 :这样打地鼠的基本的思路就有了，现在我们只要把它加入到计时器组件，让它定时变换位置就可以了P

7、ropertiesClocklTimerAlwaysFires團Tinr»erEnabl&dTjrrbertritefvalsetElobal life B書oh皆L nodi if 賈 訂|set !仙 tTOseteb.c-at c1QOO36App Inventor安卓手机应用开发简易入门选修课程第三章#App Inventor安卓手机应用开发简易入门选修课程第三章图组：3-2-9计时器组件事件（clock ） 血条与生命的制作和nowlife 分别定义为最大生命值和当前生命值，初使用自定义变量life 始值为5。再拖入一个canvas组件放在canvas1的下方，高度

8、设置为10,背景设置为 红色，利用其width的属性改变大小。思考：生命值的计算公式怎样才合适？#App Inventor安卓手机应用开发简易入门选修课程第三章画布（canvas）的宽=屏幕的宽x （当前生命nowlife /最大值life）37App Inventor安卓手机应用开发简易入门选修课程第三章根据相应的预设，我们拼接得到了 Canvasl的touched的完整事件模块Catwasltouched5pritcrlobal nwlife -Lab kick7 ailyriilih sScreen-Lab.nowlifcglobal novrlifeCtt HF）寸TDIWetchcd

9、5prite=1-T"£ Lob alEldbal 111?Canvas1 的 touched#App Inventor安卓手机应用开发简易入门选修课程第三章#App Inventor安卓手机应用开发简易入门选修课程第三章当我们重新开始时，需要满血复活，模块如下#App Inventor安卓手机应用开发简易入门选修课程第三章#App Inventor安卓手机应用开发简易入门选修课程第三章完整:#App Inventor安卓手机应用开发简易入门选修课程第三章#App Inventor安卓手机应用开发简易入门选修课程第三章代码解读:#App Inventor安卓手机应用开发简易

10、入门选修课程第三章本案例主要涉及到了简单数学的公式， 用到了数学的随机函数random,针对 图片精灵的移动，使用到了 moveto模块。 ftm*i£ ChR缽¥畑曲、L%H LD'ITKbH测试：riuMiiJTBrflafH SMfik TrafanuywlCi Hng nj ifwiwi项目的保存和导出保存：Project ->Save Project导出:Project ->My Project -> export selected project (aia) to my computer默认下载目录：我的电脑我的文档Download目录思维拓展任务本案例只是实现了游戏的基本功能，我们为了让游戏更好玩一些，我们可以 对此进行加强。任务1