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

《App Inventor 安卓手机应用开发简易入门3-2》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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

2、组件：画布用于打鼹鼠的背景ImageSprint组件：图片精灵装载鼹鼠图像Clock组件：计时器组件定时事件表3-2-2:Image组件与ImageSprint组件的异同点ImageSprintImage组件相同都是放置图片的组件，用于显示图片不同点是canvas的内部组件，要依赖于canvas存在，一般的图片组件，独立使用，不能单独存在。没有点击事件。实例探究：HappyKick图3-2-3：程序界面1图3-2-4：程序界面233《AppInventor安卓手机应用开发简易入门》选修课程第三章界面设计与组件构成：图3-2-5最终UI界

3、面组件的拖放和设置图3-2-6图3-2-4所示。界面主要涉及到的是第一次用都的canvas组件，ImageSprit、Clock组件，拖曳。组件清单：2个canvas，1个图片精灵2个水平布局组件，垂直组件目录下：1个Image，1个按钮，一个声音组件，界面设计和详细表如下：3-2-7组件所属列表组件名字属性名属性值说明DrawingandCanvas1height300背景AnimationDrawingandImgs_BeCatchpicture1.png显示鼹鼠AnimationDrawingandCanvas2height10显

4、示血条AnimationLayoutHorizontalArrangement2水平布局控件UserinterfaceLab_kicktext已打击Userinterfacelab_catchtext0UserinterfaceLab_lifetextlifeUserinterfaceLab_nowlifetext0LayoutHorizontalArrangement1水平控件UserinterfaceBtn_againtext重新开始UserinterfaceBtn_canceltext退出TimerIntUserinterface

5、Clock110001秒执行一次erval34《AppInventor安卓手机应用开发简易入门》选修课程第三章Block块编程拼接搭建要实现课例的需求，则需要用block编程实现以下几个问题：○1鼹鼠的点击事件学生首先会想到的是Imgs_BeCatch（鼹鼠图）的单击事件，这样想是情有可原的，但是我仔细再思考一下，Imgs_BeCatch的Click事件能够表示被抓到，那么没有抓到的情况呢？所以综合考虑从之后，我们还是要从canvas下手，从canvas的touched事件下手，在单击时是不是碰到了Imgs_BeCatch（鼹鼠图），这

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

7、卓手机应用开发简易入门》选修课程第三章图3-2-7对应的代码块图3-2-8：这样打地鼠的基本的思路就有了，现在我们只要把它加入到计时器组件，让它定时变换位置就可以了。图组：3-2-9计时器组件事件（clock）○3血条与生命的制作使用自定义变量life和nowlife分别定义为最大生命值和当前生命值，初始值为5。再拖入一个canvas组件放在canvas1的下方，高度设置为10，背景设置为红色，利用其width的属性改变大小。思考：生命值的计算公式怎样才合适？36《AppInventor安卓手机应用开发简易入门》选修课程第三章画布（ca

8、nvas）的宽=屏幕的宽×(当前生命nowlife/最大值life)根据相应的预设，我们拼接得到了Canvas1的touched的完整事件模块。○4Canvas1的touched当我们重新开始时，需要满血复