2024年1月30日发(作者:缑慧丽)
广州市教育局”十二五“规划研究立项课题资助成果AppInventor智能手机编程与开发图文教程(电子简略版)主编:吕超编著:邓小华等广州市培正中学技术课程教程2015年8月1
使用说明本书是广州市培正中学承担的2014年中央电教馆国家级课题《普通高中校本课程的开发与应用的研究》及广州市教育局2014年十二五规划课题《高中校本课程的开发与应用的研究》的研究成果之一。麻省理工大学研究小组与谷歌(中国)公司于2014年正式在国内推出了号称“不需要编程基础,会打字就会写程序”的AppInventor在线安卓手机编程平台,用户只需要像拖拉积木一样把代码块拖入工作平台,输入必要的数字或字符,开发平台就会自动把这些积木程序转化为智能手机可以识别和运行的APK程序包!大大降低了手机编程的技术门槛。本书以AppInventor为基础,尽量以简洁的文字和图片讲解主要操作,引导中学生通过模仿和改进来学习开发自己的手机程序,促成“每个人都能开发自己的手机程序”愿望的实现!AppInventor是一个很大程序上简化了用户编程基础的开发工具,不需要记忆大量的程序代码、函数使人们能够将更多的时间和精力放在利用信息手段解决实际问题的计算思想上,是一个很好的学习和应用的程序开发工具。但,如果你是一个对计算机程序设计有兴趣、有天赋的高手,那么,更为规范的编程平台,如C、C++、.NET、PHP等高级语言与开发平台会让你的想法实现得更灵活、更强大!学习的初期或许有人会觉得痛苦的,但学习过程中的喜悦同样是吸引人的,特别是你花费了很长时间都没有解决的问题突然得到解决,那种幸福感和满足感会让你欲拔不能!现在开始写你自己的程序,让大家都喜欢你的程序吧!邓小华2015年9月2日2
目录序第一章了解AppInventor2(AI2)................................邓小华第二章AI编程基础.............................................邓小华14第一节注册与登录.....................................................4第二节开发界面简介...................................................6第三节第一个程序:猜数字............................................9第四节安装PC端安卓模拟器...........................................15第三章初级程序开发入门22283237例程1:会叫的青蛙............................................戚宇辰例程2:生成指定个数的随机数..................................邓小华例程3:钞票我来了....................................邓小华、李煜熙例程4:10以内的加减法程序....................................邓小华第四章中级进阶例程1:打地鼠游戏.....................................张思涵、蔡敏灵40作业3节课后完成开发任务,10月7日前提交设计、开发一个程序,达到以下最低技术要求:1、3个屏幕以上;第一屏介绍程序功能,第2,3屏实现对应功能2、使用到上述教程中的全部组件(如:标签、按钮、图片、布局、时钟),能够实现一个赛事的程序功能。3、填写程序开发规划表(第3次课发)4、提交程序源代码文件(导出AIA文件上交)1
第一章了解AppInventor2(AI2)智能手机已经普及到几乎每一个人,之所以称之为智能手机是因为在手机的内部集成了很多的传感器,并通过程序控制传感器做到一些单纯机械或电子设备不能实现的功能。安卓系统是目前全球最普遍的开源手机系统平台,因此,只要遵循一定的程序规则就可以给它写程序,利用手机的传感器进行程序开发和使用。但是,一涉及到复杂的各种语言代码,许多人都会摇头兼叹气......于是,一些创造家们就开始利用他们的高技术开发出一些不需要写代码的程序开发平台来满足让每一个人都能写程序的愿望,AppInventor就是智能手机编程平台中不需要懂得什么代码就能开发出手机程序的技术平台。引用MIT麻省理工大学开发团队在微博中的定义是:【AppInventor是一款免费在线移动应用(app)开发平台,基于所見即所得(WYSIWYG)的概念。老师们,同学们无需任何编程基础,在可视化编程的界面下,通过模块拼接的方式(类似搭积木的形式),制作app,并能在手机上运行。】这一“在线移动应用开发平台”指的是直接使用浏览器进行在线开发,官方推荐使用谷歌的Chrome浏览器或火狐浏览器进行在线开发,个人推荐使用Chrome浏览器,问题少些。图1-1AppInventor项目主导者HalAbelson教授与李伟华同学的合影为了普及与推广AI这一工具平台,麻省理工大学的AI团队在中国多个省份开展了工作坊培训活动,许多大、中、小学教育工作者参加了AI培训活动2
为了吸引更多的青少年朋友了解和参与到AI平台手机开发的队伍中来,由麻省理工大学、谷歌(中国)、广州市教育局联合举办了2015年第二届全国AppInventor应用开发全国中学生挑战赛,从官方微博中截取比赛信息如下:大赛主页:/GAIC2015/大赛背景:AppInventor由MIT(麻省理工学院)开发,是一款免费的在线开发工具。同学们无需任何编程基础,在可视化编程界面下,通过模块拼接的方式,类似搭积木的形式,制作Android手机程序,并可以在手机上运行。大赛面向在校高年级小学生、初中生和高中生,分为初中组(含小学高年级)和高中组,在AppInventor平台上锻炼计算思维,把创新的点子动手实践吧。独立制作一款手机APP?你也可以!不用写代码,编程可以像搭积木一样简单又好玩!只要你有创意,就可以来挑战!参赛对象:在挑战赛提交截止日当天(2015年10月15日)须是在校小学五~六年级或初中生或者高中生;小学五~六年级和在校初中生纳入初中组;在校高中生为高中组;个人或团队(团队人数不可超过两人)均可参加挑战赛,每人限参加一个团队,不得跨组别组队;参赛者仅可提交一个参赛方案参赛者必须获得家长或合法监护人的同意才能参加本次挑战赛更多参赛资格,请访问比赛规则/GAIC2015/评审标准:创新性(30%)用户体验(40%)技术复杂性(30%)大赛奖项:大赛分为初中组(含小学5~6年级)和高中组,各组别的奖项为:特等奖(1名):获奖学生获得一部Android智能手机,获奖学生所在学校获赠书籍100本一等奖(2名):获奖学生获得一部Android平板电脑,获奖学生所在学校获赠书籍50本二等奖(7名):获奖学生获得一个电子阅读器三等奖(30名):获奖学生获得一个U盘参与奖(按提交要求成功提交AppInventor应用程序):Android纪念品优秀组织奖:针对参赛者指导老师的奖项,获奖教师可获得奖牌一枚3
大赛日程(2015年):现在~10月15日:报名及提交参赛作品10月底/11月初:公布晋级决赛名单11月底/12月初:决赛现场评比,同时完成颁奖典礼国内资源推荐:国内最早引入AI,也是最早、最全中文教程的老巫婆博客:/jcjzhl这是一个资料与资源非常齐全的AI教程博客,它最早将AI官方认可的教程全部翻译成中文,免费放置于博客中供爱好者学习,并且将不断探索和实践的例子也做成图文教程共享出来,是AI爱好者学习的最佳网站!国内AI服务器:广州电教馆AI服务器/图1-3广州市电教馆搭建的国内AI第一个服务器广州市电教馆是获得麻省理工大学AI团队授权与技术支持的国内第一个官方事业单位,在2015年AI国际研讨大会上,AI团队曾解释,因为项目技术人员时间与精力问题,短期内,国内正式的AI服务器将只有广州市电教馆,而此服务器的性能与电教馆自身技术支持力量也应该可以应付短期内国内AI爱好者们对AI开发平台使用的需求。对AI感兴趣的同学们、朋友们可以进行这个网站注册自己的帐号体验手机开发的乐趣。4
第二章导读:在本章中,我们将学习以下内容:AI编程基础以个人邮箱在线注册国内AI开发网站帐号;AI2开发界面介绍及PC端的手机模拟器安装;利用AI在线开发平台编写一个“猜数字”的小游戏;第一节注册AI开发帐号使用AI平台推荐的谷歌Chrome浏览器或火狐FireFox浏览器打开网址:,进入AI的登录界面:图2-1国内首个AI在线开发服务器首页广州市的一名编程高手已经将QQ帐号登录集成进了本服务器中,不想另外注册的同学可以使用QQ帐号登录。如果注重帐号安全,则可以点击“登陆”按钮下的“申请新帐号/重设密码”链接进入注册界面(图2-2):图2-2申请/修改帐号页面5
注册操作非常简单,只需要输入自己一个可用邮箱,点击“发送链接”按钮,大约1分钟后登陆刚才输入的注册邮箱,就会收到一封确认邮件,内容大致如下:图2-3注册确认邮件截图将邮件中的链接网址复制到浏览器地址栏中打开,按照个人的喜好设定在上的个人帐号信息,确认后,就可以在此网站上使用刚才注册使用的信息登陆了!操作小结:1、进入网站,点击“注册新帐号”链接进入注册页面;2、输入个人可用邮箱,收取注册确认邮件,获取注册链接;3、完善个人信息(用户名、登陆密码等),完成注册;4、回网站首页登陆!6
第2节要点导读:AppInventor2开发界面介绍下载和安装AI助手开发界面与各组件介绍图2-4第一次进入AI开发界面一、选择平台语种如果你想改变页面显示的语种,你可以点击右上角语言项,选择你喜欢的语种:二、创建新的项目点击“新建项目”,会弹出以下窗口:图2-5新建项目窗口7
注意!AI开发平台的项目名称规定只能输入字母、数字及下划线,不支持中文!我们输入一个易记、易分辨的项目名称,如:sample_01;确定后,页面自动转入组件设计界面:组件面板工作面板组件列表组件属性图2-6三、功能区说明:组件设计界面组件面板区:在此区域上可以选择编程所需要的组件(如:闹钟、按钮、图像、声音等),通过拖放的方式放置到工作面板上;工作面板区:显示界面效果,容纳各种可见及不可见组件;但由于各种手机屏幕像素不一致,这里所见的效果并不是手机上显示的效果,通常需要通过布局组件或其它方式实现最终界面一致;组件列表区:此区域显示的是使用到的组件名称列表;组件属性区:显示当前选择的组件的属性内容,可作具体调整;组件库主要有:用户界面、界面布局、多媒体、绘图动画、传感器、社交应用、数据存储、通信连接、乐高机器人共9大类,具体组件如图2-7所示:8
图2-7九大类组件库列表9
第三节“猜数字”!我的第一个手机程序接下来,我们就通过编写“猜数字”的手机小游戏来看看怎么使用AI来开发手机程序吧!“猜数字”程序功能描述:这是一个手机数字游戏,程序运行后会生成一个100以内的随机整数,用户通过输入猜测的数字,通过程序的提示来修改数字大小,通过多次输入后确定正确的数字,输入次数越少,猜测数字的准确性越高。是一个机率与数学思维结合的小游戏。任何程序开发都包含两大内容:用户界面与后台处理程序。通常,我们都要先设计给用户的界面,再完善后台处理程序。“猜数字”程序的屏幕设计如下:图2-8程序功能描述:第一屏组件设计图2-9第二屏组件设计1、用户启动程序后,在第一页屏幕中显示游戏规则,点击“开始”按钮进入第二页;2、点击“数字,来吧!”按钮后,程序将自动生成一个随机数字,用户可以在输入框中输入推测的数字,点击确定后,结果提示栏会对每次输入的数字作出“大了”、“小了”或“猜对了”的提示;3、为了避免有的人一直猜不中随机数,设置了一个“查看随机数”按钮,能显示这个随机数。要试试程序的效果,请从/s/1c0ubqA8下载“猜数字”APK(1.4MB)及猜数字aia源码文件(5.6KB,可直接导入AI在线开发平台)。10
开发步骤:第一部分:组件设计(界面设计)首先,构思好这个程序在手机上的显示界面,如图2-8,2-9;第一个屏幕旋转了一个水平布局组件,一个标签显示提示文字,一个按钮供用户确认进入正式界面,属性设置如下:序号12组件名称垂直布局标签所属功能区布局界面用户界面默认背景颜色:绿色字号:16宽度:300像素文本:“猜数字”游戏规则游戏开始后,在输入框输入一个数字,根据提示修正数字大小,直到正确为止,猜的次数越少,猜数字的能力越强!文本:开始游戏属性3按钮用户界面其次,实现当用户点击“开始游戏”后,程序进入下一屏幕的操作:图2-10增加屏幕的操作按钮在浏览器开发页面的左上角,找到“增加屏幕”的按钮,点击它,就会打开新的屏幕。注意:AI2没有设定默认启动界面的功能,程序执行的首页面是当前编译的页面。因此,当所有程序编写完毕,要记得手动把屏幕点击回到你设定的第一个页面,否则,它就会为用户显示当前屏幕内容。当然,这个“漏洞”对于检查程序效果来说是好事。然后,我们在第2屏上放置以下内容:序号1234567组件名称标签1按钮1标签2水平布局文本输入框1按钮2按钮3所属功能区用户界面用户界面用户界面布局界面用户界面用户界面用户界面组件属性文本:请点击下面按钮生成随机数。文本:数字,来吧!文本:结果提示:默认提示:请输入您的“心水”数字文本:确定文本:查看随机数11
第二部分:逻辑设计上一部分的操作是用户看见的界面设计,一个良好的界面设计是吸引用户的关键!但再漂亮的外观设计,也要有对应的后台程序代码来实现相对的功能,在AppInventor中,不需要输入C语言或其它语言的代码,只需要在功能区拖动对应的代码模块就行了!这对于不想深入学习编程,又想写出自己的手机程序的人来说是一个很实用的工具。图2-11逻辑设计操作按钮设计好界面后,点击右上角的“逻辑设计”,进入图形代码模块界面,图2-11代码模块区图2-12代码图形显示示意在逻辑设计界面中,左边是代码模块,当鼠标点击“控制、逻辑…“等任一模块时,就会在旁边显示具体的代码图形块,如图2-12所示。12
图2-13工作面板区(图形程序放置区)工作面板区左下角的这个图示,实时提醒设计者程序是否正确。工作面板右下角的垃圾桶图标,用来将错误的、不要的图形代码拖放到此删除。(也可以在要删除的代码块上点击右键,选择”删除代码块“)试一试:根据形状及颜色,请将以下图形代码放置在各自屏幕的逻辑设计界面中提示:根据代码块颜色到对应颜色的模块中寻找!形状对应才能自动粘附到主程序块中。第一屏逻辑代码图:图2-14第一屏代码块第二屏逻辑代码图:13
图2-15第二屏游戏主屏代码块(1)图2-16第二屏游戏主屏代码块(2)当上面的代码块都已经放好,请检查一下工作面板左下方的上面的两个数字都是“0”,说明代码的逻辑没有问题,可以进行测试了!14,如果
关键代码讲解:1、生成随机数;在”数学“模块中,由电脑随机获得一个整数,整数的范围可以通过修改代码块中的数字来改变。2、变量的使用:与变量相关的代码块都在”变量“模块中,每个变量在程序中都是唯一的,这个唯一性通过变量名来确定(如var1,也可以是bianliang1),变量名的起名应该简单易懂,让人一看就知道这个变量有什么用。3、代码解释:*设定一个变量var1,程序首次运行时把它的值设为数字0;*当按钮1被点击时,把var1设为0;*生成一个1~100范围内的整数,并将它赋值给变量var1;注:设……为…….是赋值语句只允许用户输入数字将变量值用按钮的文本显示出来合并文本代码块,将2个以上文本合并为1个文本;组件属性”启用“,使用“逻辑“中的”是、否“来控制;15
第4节手机程序调试的方法方法1:在PC上安装安卓手机模拟器这个方法最大的好处是:进入模拟手机界面后,如果在平台上修改了界面或程序,在模拟界面上能够实时反映出来,不需要关掉模拟手机界面哦!一般情况下,我们是先在电脑上设计好界面和逻辑代码,最方便的还是在电脑上测试我们的程序效果,所以,我们要安装AI的PC模拟器,首先我们要下载安装一个最新的AI开发助手,它的文件名通常为MIT_App_Inventor_Tools_2.***.exe,可以百度搜索下载。也可以打开我的百度网盘下载链接获取(/s/1jG7xMYi):下载的安装包:1、双击运行安装包:,安装PC端的安卓手机模拟器操作步骤如下:同意其安全及安装请求:16
图2-17安装AI助手一路点击“next”、“Agree”,记得开放给所有用户使用:这一步,记得勾选“DesktopIcon”,要不安装后都不知道支哪里打开这个模拟器程序!17
图2-19勾选生成桌面图标通常使用默认的安装位置,然后连续点击”next”,直到安装完成。18
安装完成后,在桌面上应该有一个:图标,双击打开,就在windows系统中运行了AI助手,这时会打开一个黑黑的DOS窗口,它提示按键盘上的Ctrl+C可以退出助手:图2-20AI助手后台运行窗口经测试,可以直接将已经安装好的AI伴侣程序所在的Appinventor文件夹复制到C:Programfiles文件夹下,把到桌面生成一个快捷方式,也能达到上述安装的效果!这时,回到我们的在线开发平台,点击左上角”连接“—”模拟器“,就能够自行与AI助手连接,进行模拟操作;19
图2-21用AI助手模拟运行程序图2-22模拟器进行调试的等待画面提示:如果测试中遇到问题或要退出模拟测试,同样点击”连接“—”重置连接“就可以关闭当前程序模拟,如图2-21紫色圈示。图2-23AI助手安装不成功的画面初次运行AI助手,可能会遇到以下提示”过期“的情况,通常是因为MIT对AI助手进行了更新,有更完整和更真实的仿真功能,必须更新后才能正常使用AI模拟功能;20
注意:当浏览器弹出下面的对话框时,一定要点击“确定”!不然不能正常使用模拟器!图2-24AI助手更新提示点击“确认”后,浏览器自动下载升级组件,如下图所示:图2-25AI助手更新进度提示下载完成后会出现“升级完成”提示,这时不要点击这个按钮,转看模拟手机屏幕:图2-26模拟器上也要进行更新确认在模拟的手机屏幕上依次点击”OK”,“Install”,,更新模拟手机端的AI助手;直到模拟手机提示“applicationinstalled”以及Open,Done两个按钮,21
点击“DONE”,在浏览器编程界面点击“升级完成”;然后在浏览器的平台界面点击“连接”--“重置连接”;完成整个AI升级操作。要测试程序,就要再点击“连接”--”模拟器“,再来一次2分钟的等待就可以了!注意:使用AI助手在电脑端进行模拟安卓手机程序的调试只需要运行一次模拟器,后续更改了程序的界面或代码,甚至打开另一个项目都不需要重置模拟器,所有修改即时在模拟器中体现的!除非长时间不操作后,模拟器可能断开连接,才需要重置连接,再次运行模拟器。22
重要提示:初学者如果不细心的话,通常会在AI助手更新的步骤中出问题,导致后续学习不能进行!因此,安装好AI助手后,首次运行时要认真看清楚弹出的提示框,按提示操作。如果不断遇到”需要更新“的操作,一般是因为手机模拟器端没有同时更新,这时,注意观察左边白色提示框的提示内容,及时在右边手机模拟端安装和更新;一次更新可能不成功,重置连接后再进行模拟器模拟操作,只要细心一点,2-3次尝试后就能够成功。二、方法2:手机实时调试(AI伴侣)据说,可以通过USB数据线连接电脑,然后在手机上安装AI伴侣程序就可以使用第一个选项进行实时调试,但作者尝试了两台联想手机:安卓4.4及5.0系统,可以安装AI伴侣,但系统却以签名不对的提示不允许升级操作,而不能升级最新的AI伴侣就不能实时调试,所以一直未能成功。不知其它品牌的手机系统是否可行。三、最麻烦的方法3:使用二维码扫描下载安装或下载到电脑再复制到手机上安装进行调试这个方法比较麻烦,只有当程序涉及到多媒体内容(声音、动画、视频等)及传感器应用时才使用,具备WIFI条件时可以使用。23
初级程序开发入门AppInventor是一个容易使用的在线开发工具,我们通过几个简单程序来熟悉开发界面和相关组件。请注意:依照图文教程开发出可以执行的手机程序只是开始,你需要理解程序的过程和原理后开发出自己的程序才是学会学习的精髓!第一个例程:“会叫的青蛙”作者:戚宇辰(初一级)一、程序功能描述:启动程序后,当用户点击屏幕上的青蛙图片(实际为按钮)就会听见青蛙发出“呱”的一声,可以用于幼儿认识动物与其叫声的程序开发。二、程序屏幕设计:图3-1用户界面设计序号123功能区用户接口用户接口多媒体组件名称标签1按钮1音效1组件属性文本:我是会叫的青蛙图像:青蛙.jpg宽度:200高度:300源文件:青蛙.wav表3-1使用组件列表24
三、代码设计:1、设计好界面后,点击右上角的“逻辑设计”,口。进入图形代码模块接2、点击左边模块中的“按钮1”,在“工作面板”上选择第一个按钮点击动作代码模块:图3-2代码块选择3、在模块面板点击“音效1”,在出现的工作面板上选择第二个“播放”代码模块,25
4、将音效播放代码模块拖到右边工作区的按钮点击代码模块中:当上面的代码块都已经放好,请检查一下工作面板左下方的如果上面的两个数字都是“0”,说明代码的逻辑没有问题,然后,我们就可以点击左上方“连接”--“模拟器”进行测试了!26
测试结果:没有声音!!怎么会这样!!??原来,由于windows系统与安卓系统的跨平台技术等原因,AI的PC模拟器是不支持声音、媒体等音效的,因此,要测试多媒体效果,还是需要我们把程序下载到手机进行安装和测试。点击屏幕上方:“打包APK”,可以看到2个选项,我们可以选择把服务器生成的APK程序以扫描二维码的形式下载安装,或者直接下载到电脑中再通过手机管理程序进行安装,如果有WIFI的话,建议使用第一种方法,否则使用第二种方法。27
入门程序第2例:生成指定个数的随机数作者:邓小华学习要点:1、使用变量储存数据;2、循环结构的使用;一、例程说明:在此例中,我们使用一个叫“循环结构”的算法来生成指定个数的随机数,所谓循环就是重复做同样的一些事。循环有两种:一种是有限循环,一种是无限循环;有限循环是有条件的循环,一旦达到条件就会自动跳出循环;而无限循环则是一直重复某一个或一些动作,没有结束。比如我们画一个正方形,是先画一条指定长度的线段,然后转90度,再画第2条线段,再转90度......如此反复4次,如果以一个动作一个动作来写代码,我们要写7,8条语句才能完成,但如果用循环,我们可以用一半的语句就能完成!下面,我们一起来写一个简单的生成5个100以内的随机数的手机程序:界面设计很简单:在“用户界面”放入一个标签,一个按钮:标签除了显示提示之外,也可以显示生成的随机数的结果,当然,也可以使用按钮的文字来显示,看个人的习惯,但不建议使用文本输入框来显示。它的代码块可以这样实现:28
二、主要代码讲解:(一)变量使用1、定义变量并给变量赋值:初始化的动作通常放在逻辑设计的最前面,这里设定一个名为“i”的全局变量(注:全局变量是指在整个程序运行过程中都有效的变量,局部变量则只是在某一个动作中有效,在其它动作中无效。),并设定它的初始值是数字“1”(也可以是字符或其它类型的内容,平台会自动识别和定义)。另外说一下,“i”是在所有高级编程语言中用得最多的变量名。通常,我们可以设定很多全局变量或局部变量,但变量用得越多,消耗的机器内存越大,所以,最好尽量使用尽可能少的变量来运行程序。2、获取变量值:在变量模块中选择:3、变量自身增加1:变量i都加1;通过对i大小的判断来决定是否跳出循环;,就可以使用变量中存储的内容了。,在此程序中,每一次循环,(二)循环语句//循环执行的条件是变量i≤5,一旦大于5则结束循环!//变量i自身加1运算;//用标签5显示随机数结果,合并本身内容及新的随机数。29
循环的工作流程是这样的:循环开始是否i≤5是否生成随机数并显示i=i+1循环结束在此程序中,我们的目的是要获得5个随机数,而随机数每次只能生成1个,所以要循环5次才能生成5个随机数;所以,我们用变量i来作循环的计数器:每生成1个随机数,计数器(变量i)就加1,当i等于5的时候说明已经获得5个随机数,则结束循环;程序自动执行下一段代码。如果想让这个循环无限工作下去,我们只需要把条件i≤5替换成:1<2这种类似的永远成立的逻辑条件就可以了。不过,如果一个程序只是单纯的无限生成随机数而没有其它内容,那这个作者以后的程序作品可能都没有人会去下载了!所以,请记住:程序要吸引人,必须考虑别人都用得到的功能!30
四、强化程序功能的改进如果我们要写一个程序实现两个控制:1、可以生成指定数目的随机数;2、可以指定随机数的最大值;该怎么做呢?1、界面设计参考:2、代码块参考:31
入门程序第3例:抢钞票手速挑战作者:邓小华、李煜熙一、程序功能描述:1.用户启动程序后,在第一页屏幕中显示游戏规则,点击“开始游戏”按钮进入第二页;2.点击“图片”按钮,每点击一次,你的钱数将会增加100元,点的次数越多,得到的钱就越多。3.30秒内点击次数超过180次的将显示奖励话语:哇!你是抢钱快手!二、开发步骤:1、第一屏组件设计:在第一屏“Screen1”里放入2个标签,在两个标签下再放1个按钮组件,属性设置如下,效果图见图3-5::序号1功能区用户界面组件名称标签1背景颜色:绿色组件属性字号:14文本对齐:居中文本:“钞票我来了”游戏规则2用户界面标签2宽度:300高度:200文本:游戏开始后,“钞票我来了”游戏规则游戏开始后,在限定的时间内狂点钞票,看看谁的钞票最多。点的越多,说明你的钱越多!3用户界面按钮1文本:游戏开始图3-5第一屏效果图32
2、第二屏组件设计;添加屏幕,默认屏幕名称为“Screen2”,改名为“GO”,在用户界面里找出“文本输入框”,在里面写上,接着在用户界面拖出“按钮”,在按钮的组件属性栏的“图像”属性中点击“上传文件”按钮,将钞票图片作为按钮来响应后续的点击动作,使用的组件如下表所示:序号功能区用户界面用户界面组件名称组件属性12文本输文本:点击下面的钞票,开始游戏入框1按钮1图像:钞票图片3456用户界面用户界面传感器用户界面标签1标签2文本:钱数:30文本:(清空)计时器1启用计时:false计时间隔:1000按钮2文本:游戏开始完成的效果图如下所示:33
3、逻辑设计:在屏幕的左上角“Screen“位置点击回到第一屏,再点击右上角的“逻辑设计”在左边的“模块”列表中,点击,34
选择并放入:回到“模块”面板,点击“控制”,选择“打开屏幕-”:从“模块”找到并放入刚才“屏幕名称”后,在“”中输入第二屏的名称“GO”;切换到第二屏“GO”的逻辑设计,按下图编程:代码块解释//设置两个全局变量,一个记录点击次数,一个记录秒数;//点击“开始抢”按钮才开始计时;//用标签1显示点击次数,开始时清零;//两个全局变量确保清零//游戏开始后,时间结束才能重新开始//点一次加100数值//用标签1显示点击次数,是总金额除以10035
36//计时变量每秒钟增加1;//用标签2显示计时数值;//计时达到30秒进行动作;//停止计时,并停止钞票按钮响应;//判断手速是否达到180次;//达到显示奖励语句;//不达显示总金额;//“重新开始”按钮生效;
挑战:30秒内,我的手速达到170下,你的有多少呢?试一试:按鼠标应该比屏幕点击速度快,写好程序下载到手机上试试吧!排雷解题:这个程序还有个小问题,如果重新开始,计时是从30秒开始算起,限时判断语句将会完全失效!请你找出相关语句并修改,让它在大于或等于30秒时能够正确动作吧!37
入门例程四:10以内的加、减法学习程序在本节内容中,我们将开发一个给小学一年级以下的小朋友使用的10以内的加、减法学习程序,通过本例子的学习,我们将学习到以下要点:增加及进入下一个屏幕(Screen);利用循环生成2个随机函数;自定义和调用过程函数;第一部分:界面设计一、首页设计:如果想界面变得更吸引小朋友,可以增加背景图片或在按钮的属性中使用合适的图片来代替常规按钮的样子!这个美化工作就交给大家自己完成了。二、加法练习界面设计1、增加一个屏幕2、使用默认的屏幕名称或输入较明显的区别名称,如Screen_jiafa:38
3、放入组件如下:4、修改相关字体大小、文本内容,结果如下:三、减法练习界面设计减法练习的界面可以使用与加法练习界面相同的布局,但为了区别两种法则,建议使用一些明显的提示在不同的界面,如加法界面使用一张加法卡通图片,而减法界面则是另一张图片。提醒:由于是随机出题,有可能会出现第一个随机数比第二个随机数要小的情况,如生成“4-6”的情况,由于小学一年级还没有学习“负数”的概念,所以这一题会让小学生产生疑惑,因此,要在产生2个随机数后,在用标签显示之前要对两个数的大小进行比较,并确定把大的随机数放在第一个数字的位置上,小的随机数放在第二个数字的位置,确保练习内容在对应的学习水平上。39
四、程序功能拓展练习:1、增加用户自定义出题范围;用户可以在首页输入出题范围多大(默认是:10);2、在屏幕2、3中增加显示正确率提示;3、增加每题的“正确”、“错误”语音提示及语音开关功能;4、增加乘、除法运算功能;40
手机“打地鼠”程序教程整理:培正中学初二级张思涵、蔡敏灵打地鼠这款街机游戏,大家应该都不陌生吧?今天我们就来学习用AppInventor制作一个手机上的“打地鼠”游戏。一、本程序学习使用的主要组件有:1、图像精灵组件:具有触感的可移动图像;2、画布组件:容纳图像精灵的平台;3、计时器组件:用来计时,控制图像精灵移动频率;4、音效组件:在此游戏里,用于击中地鼠时产生震动;5、按钮组件:在此游戏里,用于开始新游戏;6、定义过程:定义过程用来实现一系列的指令,可以重复调用,如本游戏中的“地鼠移动”;7、产生随机数;8、使用加法块(+)及减法块(-)二、程序实现效果:1、一只地鼠随机出现在屏幕上,每秒钟移动一次;2、如果手指触碰到地鼠,则让设备震动,显示命中数加1,同时地鼠随机移动到一个新位置;没有点中地鼠,则显示失败数加1;3、点击“重新开始”按钮,则命中和失败的计数归零,游戏重新开始。41
首先,登录AppInventor开发平台(中文版),新建一个项目,命名为“MoleMash”,在右边的属性栏中将屏幕标题设为“打地鼠”;然后,上网下载一张喜欢的地鼠图片,上传到组件列表下面的“素材”;注意:素材文件大小必须控制尽可能小,不然程序运行会很慢,且占用大量手机内存!通常可以用QQ截图来保存需要的图片,这样的文件体积会相对小一些。三、组件设计1、在组件面板中找到“绘图动画”,再找到“画布”,拖入预览窗口,采用其默认名称“画布1”,设置宽度为充满,即与屏幕等宽,设置高度为300像素;(画布的作用:作为图像精灵的容器,就是限制地鼠的活动范围)检查一下,你的屏幕是像上面这样的吗?如果是,那么恭喜你,你已经成功地完成了第一步!也证明你拥有完成的能力!下面我们就加快速度吧~42
2、同样在“绘图动画”中找到“图像精灵”,将“图像精灵”组件拖入到“画布1”中的任何位置,在组件列表底部单击重命名,改名为“地鼠”,设置其图片属性为之前上传的地鼠图片。(示例为:)(图像精灵:作为用户点击的目标,就是地鼠)3、在组件面板中找到“用户界面”的“按钮”,拖动“按钮”放在“画布1”的下面,改名为“重新开始按钮”,并设置其文本为“重新开始”;(重新开始按钮:重新设置得分)4、在组件面板中找到“传感器”中的“计时器”,拖入,它将落在预览窗口下方的“非可视组件”区域;(计时器:控制地鼠的移动频率)5、在组件面板中找到“多媒体”中的“音效”,拖入,它也将落在“非可视组件”区域。(音效:当地鼠被击中时震动或发出响声)6、在组件面板中找到“界面布局”中的“水平布局”拖动组件放在“重新开始”按钮的下方,保留“水平布局1”的默认名称;(水平布局1:放置“命中”和“命中数量”两个标签)7、在组件面板中找到“用户界面”中拖动两个“标签”组件到水平布局1”中;将左侧标签改名为“命中”,设置其文本为“命中:”(确保冒号后有一个空格);将右侧标签改名为“命中数量”,设置其文本为“0”;(两个标签:分别显示“命中”和“命中数量”)8、拖入第二个“水平布局”将其放在“水平布局1”下面,将两个标签拖放在“水平布局2”中,左侧标签改名为“失误”,设置其文本为“失误:”(确保冒号后有一个空格),右侧标签改名为“失误数量”,设置其文本为“0”。(水平布局2:放置“失误”和“失误数量”两个标签;两个标签:分别显示“失误”和“失误数量”)43
现在,你的屏幕是不是这样的呢?(地鼠的位置和图片可能不同)现在所有的组件都大功告成了,让我们喘口气,将屏幕切换到逻辑设计版,然后进入下一步:四、逻辑设计(为组件添加行为)还记得刚刚说过的我们最终要达到的效果吗?看起来是不是很复杂?别担心,我们一步一步来——第一步:地鼠随机位置出现的实现地鼠移动的内在原理有些繁琐,请耐心地看完,这对我们移动地鼠来说很关键。要理解地鼠如何移动,需要了解安卓的图形定位机制:(0,0)XY画布(以及屏幕)可以看作是由x(水平)坐标和y(垂直)坐标织成的网格,就像平面直角坐标系(如果你知道的话),只不过,数学中的直角坐标系的原点(0,0)是在左下44
角,但是在手机中,零点坐标为(0,0)是在左上角!!x坐标向右为增大,y坐标向下为增大。一个“图像精灵”的x、y属性表示它距离左上角的位置,因此当地鼠位于屏幕左上角时,他的x和y值都是0。为了将地鼠的移动限制在屏幕之内,(要不它要确定x和y的最大值,这要用到地鼠和画布的宽度及高度属性。(地鼠的宽度和高度属性值与上传的图片的大小相同,而在创建画布1时,你设置的高度是300像素,宽度为“充满”,即等于屏幕的宽度)如果地鼠图片的宽度是36像素,画布宽度是200像素,那么地鼠的x坐标最低可以为0(靠近屏幕左侧边缘),而最大为164(200-36,或画布宽度-地鼠宽度),这样才能保证地鼠不超出屏幕的右侧边缘。同样,地鼠顶部的y坐标范围可从0到画布高度-地鼠高度。你可能会想,假如AppInventor中有一个内置过程,可以自动将图像精灵移动到屏幕上的某个随机位置,那岂不是很好?可惜没有,不过我们可以自己来创建一个过程!(就叫地鼠移动吧)就像内置过程一样,自己创建的过程会显示在“过程”抽屉中,需要时可以随时调用它。如果你看懂了上面的解释,那么做起来应该不难,如果没有理解得很清楚,那也没关系,按照下面的图从对应颜色的抽屉找出相应的块吧~已经完成了“地鼠移动“的过程,现在该调用它了。如右图所示:1、点击Screen1抽屉,并拖出“当screen1初始化”块;2、单击“过程’抽屉,你会看到一个“调用地鼠移动”块,把它拖入“当screen1初始化”块。(太神奇了!你自己创建了一个新的过程代码块,不是吗?!)45
小知识:过程抽象过程抽象是计算机科学的重要手段之一,就是命名然后调用一组指令(如这里的地鼠移动)。之所以叫做“抽象”,是因为过程的调用者(在实际项目中,调用者很有可能不是过程的开发者)只需要知道过程的功能(如移动地鼠),而不需要知道过程的实现方法(生成两个随机整数)。就像在实际生活中,不同的工程师设计出汽车的不同部件,没有人了解所有的细节,而司机只需要如何使用(例如,踩下制动踏板把车停下来),而无需了解如何制造这些接口。如果没有过程抽象,不可能实现那些大型程序,因为它们的代码量太大,对个人来说是力所不及的。与复制和粘贴代码相比,过程抽象的优势在于:1、由于过程的代码独立于其它部分的程序,因此更易于对过程的测试;2、如果代码中有错误,只需要对局部进行修改;3、如果需要改变过程的实现(或功能),如确保地鼠不连续出现在同一个位置,只需要修改一处的代码;4、将大块代码拆分成代码片段,有助于对应用做深入剖析,并加以实现(“分而治之”)。5、给过程一个有意义的命名,将有助于提高代码的可读性,更易被别人(或一个月后的自己)读懂;接着,我们要让地鼠每一秒移动一次,这就需要用到Clock组件。设置“计时器1”的“计时间隔”为其默认值1000(毫秒),即1秒,(如右图,其实也不用设置)在“当计时器计时”块中,无论设定什么动作,它都会每秒钟执行一次,除非你想让它以其它时间间隔来执行动作。以下是具体做法:1、单击“多媒体”-“计时器1”,找到并并拖出“当计时器计时”2、单击“过程”抽屉,将“调用地鼠移动”块拖到“当计时器计时”块中,如下图所示。(如果你觉得地鼠移动得太快或太慢,可以在组件设计器中设置“计时间隔”,来增加或减小地鼠的移动频率,这个间隔频率其实可以用来改进程序实现游戏的简单、困难程度)第二步:记录成绩刚才我们创建了四个标签,其中初始值为0的“命中数量”和“失误数量”,希望以此来记录用户的成绩:当用户命中地鼠一次,或失败一次(直接触碰到屏幕)时,对应标签中46
的数字增加,为此要用到“当画布1被触碰”块,它表示画布被触摸到,并记录了触摸点的x和y坐标(我们不必关心),以及是否碰到了图像精灵,也就是地鼠(这是我们关心的),如下图所示。可以理解为:当触碰到画布时,检查图像精灵是否也被碰到。应用中只有一个图像精灵,就是地鼠,如果碰到地鼠,则“命中数量”中的数字在原本的基础上+1,否则“失误数量”中的数字在原本的基础上+1,请发挥你的聪明才智,自己试着创建这些块吧!注意:1、“如果,则,否则”的创建方法:先拖入“如果,则”块,然后为其添加“否则”块(点击“如果”左边的蓝色方块,在弹出框中将“否则”块拖入“如果”块),如下图所示。2、数字块“1”可以在“数学”抽屉中拖出“0”块再改为“1”,还可用复制粘贴,也可以直接打出“1”再按回车键。就像这样:第三步:重置分数我们要在“当重新开始按钮被点击”块中设置“命中数量”和“失误数量”的值为0。如下图所示:47
2024年1月30日发(作者:缑慧丽)
广州市教育局”十二五“规划研究立项课题资助成果AppInventor智能手机编程与开发图文教程(电子简略版)主编:吕超编著:邓小华等广州市培正中学技术课程教程2015年8月1
使用说明本书是广州市培正中学承担的2014年中央电教馆国家级课题《普通高中校本课程的开发与应用的研究》及广州市教育局2014年十二五规划课题《高中校本课程的开发与应用的研究》的研究成果之一。麻省理工大学研究小组与谷歌(中国)公司于2014年正式在国内推出了号称“不需要编程基础,会打字就会写程序”的AppInventor在线安卓手机编程平台,用户只需要像拖拉积木一样把代码块拖入工作平台,输入必要的数字或字符,开发平台就会自动把这些积木程序转化为智能手机可以识别和运行的APK程序包!大大降低了手机编程的技术门槛。本书以AppInventor为基础,尽量以简洁的文字和图片讲解主要操作,引导中学生通过模仿和改进来学习开发自己的手机程序,促成“每个人都能开发自己的手机程序”愿望的实现!AppInventor是一个很大程序上简化了用户编程基础的开发工具,不需要记忆大量的程序代码、函数使人们能够将更多的时间和精力放在利用信息手段解决实际问题的计算思想上,是一个很好的学习和应用的程序开发工具。但,如果你是一个对计算机程序设计有兴趣、有天赋的高手,那么,更为规范的编程平台,如C、C++、.NET、PHP等高级语言与开发平台会让你的想法实现得更灵活、更强大!学习的初期或许有人会觉得痛苦的,但学习过程中的喜悦同样是吸引人的,特别是你花费了很长时间都没有解决的问题突然得到解决,那种幸福感和满足感会让你欲拔不能!现在开始写你自己的程序,让大家都喜欢你的程序吧!邓小华2015年9月2日2
目录序第一章了解AppInventor2(AI2)................................邓小华第二章AI编程基础.............................................邓小华14第一节注册与登录.....................................................4第二节开发界面简介...................................................6第三节第一个程序:猜数字............................................9第四节安装PC端安卓模拟器...........................................15第三章初级程序开发入门22283237例程1:会叫的青蛙............................................戚宇辰例程2:生成指定个数的随机数..................................邓小华例程3:钞票我来了....................................邓小华、李煜熙例程4:10以内的加减法程序....................................邓小华第四章中级进阶例程1:打地鼠游戏.....................................张思涵、蔡敏灵40作业3节课后完成开发任务,10月7日前提交设计、开发一个程序,达到以下最低技术要求:1、3个屏幕以上;第一屏介绍程序功能,第2,3屏实现对应功能2、使用到上述教程中的全部组件(如:标签、按钮、图片、布局、时钟),能够实现一个赛事的程序功能。3、填写程序开发规划表(第3次课发)4、提交程序源代码文件(导出AIA文件上交)1
第一章了解AppInventor2(AI2)智能手机已经普及到几乎每一个人,之所以称之为智能手机是因为在手机的内部集成了很多的传感器,并通过程序控制传感器做到一些单纯机械或电子设备不能实现的功能。安卓系统是目前全球最普遍的开源手机系统平台,因此,只要遵循一定的程序规则就可以给它写程序,利用手机的传感器进行程序开发和使用。但是,一涉及到复杂的各种语言代码,许多人都会摇头兼叹气......于是,一些创造家们就开始利用他们的高技术开发出一些不需要写代码的程序开发平台来满足让每一个人都能写程序的愿望,AppInventor就是智能手机编程平台中不需要懂得什么代码就能开发出手机程序的技术平台。引用MIT麻省理工大学开发团队在微博中的定义是:【AppInventor是一款免费在线移动应用(app)开发平台,基于所見即所得(WYSIWYG)的概念。老师们,同学们无需任何编程基础,在可视化编程的界面下,通过模块拼接的方式(类似搭积木的形式),制作app,并能在手机上运行。】这一“在线移动应用开发平台”指的是直接使用浏览器进行在线开发,官方推荐使用谷歌的Chrome浏览器或火狐浏览器进行在线开发,个人推荐使用Chrome浏览器,问题少些。图1-1AppInventor项目主导者HalAbelson教授与李伟华同学的合影为了普及与推广AI这一工具平台,麻省理工大学的AI团队在中国多个省份开展了工作坊培训活动,许多大、中、小学教育工作者参加了AI培训活动2
为了吸引更多的青少年朋友了解和参与到AI平台手机开发的队伍中来,由麻省理工大学、谷歌(中国)、广州市教育局联合举办了2015年第二届全国AppInventor应用开发全国中学生挑战赛,从官方微博中截取比赛信息如下:大赛主页:/GAIC2015/大赛背景:AppInventor由MIT(麻省理工学院)开发,是一款免费的在线开发工具。同学们无需任何编程基础,在可视化编程界面下,通过模块拼接的方式,类似搭积木的形式,制作Android手机程序,并可以在手机上运行。大赛面向在校高年级小学生、初中生和高中生,分为初中组(含小学高年级)和高中组,在AppInventor平台上锻炼计算思维,把创新的点子动手实践吧。独立制作一款手机APP?你也可以!不用写代码,编程可以像搭积木一样简单又好玩!只要你有创意,就可以来挑战!参赛对象:在挑战赛提交截止日当天(2015年10月15日)须是在校小学五~六年级或初中生或者高中生;小学五~六年级和在校初中生纳入初中组;在校高中生为高中组;个人或团队(团队人数不可超过两人)均可参加挑战赛,每人限参加一个团队,不得跨组别组队;参赛者仅可提交一个参赛方案参赛者必须获得家长或合法监护人的同意才能参加本次挑战赛更多参赛资格,请访问比赛规则/GAIC2015/评审标准:创新性(30%)用户体验(40%)技术复杂性(30%)大赛奖项:大赛分为初中组(含小学5~6年级)和高中组,各组别的奖项为:特等奖(1名):获奖学生获得一部Android智能手机,获奖学生所在学校获赠书籍100本一等奖(2名):获奖学生获得一部Android平板电脑,获奖学生所在学校获赠书籍50本二等奖(7名):获奖学生获得一个电子阅读器三等奖(30名):获奖学生获得一个U盘参与奖(按提交要求成功提交AppInventor应用程序):Android纪念品优秀组织奖:针对参赛者指导老师的奖项,获奖教师可获得奖牌一枚3
大赛日程(2015年):现在~10月15日:报名及提交参赛作品10月底/11月初:公布晋级决赛名单11月底/12月初:决赛现场评比,同时完成颁奖典礼国内资源推荐:国内最早引入AI,也是最早、最全中文教程的老巫婆博客:/jcjzhl这是一个资料与资源非常齐全的AI教程博客,它最早将AI官方认可的教程全部翻译成中文,免费放置于博客中供爱好者学习,并且将不断探索和实践的例子也做成图文教程共享出来,是AI爱好者学习的最佳网站!国内AI服务器:广州电教馆AI服务器/图1-3广州市电教馆搭建的国内AI第一个服务器广州市电教馆是获得麻省理工大学AI团队授权与技术支持的国内第一个官方事业单位,在2015年AI国际研讨大会上,AI团队曾解释,因为项目技术人员时间与精力问题,短期内,国内正式的AI服务器将只有广州市电教馆,而此服务器的性能与电教馆自身技术支持力量也应该可以应付短期内国内AI爱好者们对AI开发平台使用的需求。对AI感兴趣的同学们、朋友们可以进行这个网站注册自己的帐号体验手机开发的乐趣。4
第二章导读:在本章中,我们将学习以下内容:AI编程基础以个人邮箱在线注册国内AI开发网站帐号;AI2开发界面介绍及PC端的手机模拟器安装;利用AI在线开发平台编写一个“猜数字”的小游戏;第一节注册AI开发帐号使用AI平台推荐的谷歌Chrome浏览器或火狐FireFox浏览器打开网址:,进入AI的登录界面:图2-1国内首个AI在线开发服务器首页广州市的一名编程高手已经将QQ帐号登录集成进了本服务器中,不想另外注册的同学可以使用QQ帐号登录。如果注重帐号安全,则可以点击“登陆”按钮下的“申请新帐号/重设密码”链接进入注册界面(图2-2):图2-2申请/修改帐号页面5
注册操作非常简单,只需要输入自己一个可用邮箱,点击“发送链接”按钮,大约1分钟后登陆刚才输入的注册邮箱,就会收到一封确认邮件,内容大致如下:图2-3注册确认邮件截图将邮件中的链接网址复制到浏览器地址栏中打开,按照个人的喜好设定在上的个人帐号信息,确认后,就可以在此网站上使用刚才注册使用的信息登陆了!操作小结:1、进入网站,点击“注册新帐号”链接进入注册页面;2、输入个人可用邮箱,收取注册确认邮件,获取注册链接;3、完善个人信息(用户名、登陆密码等),完成注册;4、回网站首页登陆!6
第2节要点导读:AppInventor2开发界面介绍下载和安装AI助手开发界面与各组件介绍图2-4第一次进入AI开发界面一、选择平台语种如果你想改变页面显示的语种,你可以点击右上角语言项,选择你喜欢的语种:二、创建新的项目点击“新建项目”,会弹出以下窗口:图2-5新建项目窗口7
注意!AI开发平台的项目名称规定只能输入字母、数字及下划线,不支持中文!我们输入一个易记、易分辨的项目名称,如:sample_01;确定后,页面自动转入组件设计界面:组件面板工作面板组件列表组件属性图2-6三、功能区说明:组件设计界面组件面板区:在此区域上可以选择编程所需要的组件(如:闹钟、按钮、图像、声音等),通过拖放的方式放置到工作面板上;工作面板区:显示界面效果,容纳各种可见及不可见组件;但由于各种手机屏幕像素不一致,这里所见的效果并不是手机上显示的效果,通常需要通过布局组件或其它方式实现最终界面一致;组件列表区:此区域显示的是使用到的组件名称列表;组件属性区:显示当前选择的组件的属性内容,可作具体调整;组件库主要有:用户界面、界面布局、多媒体、绘图动画、传感器、社交应用、数据存储、通信连接、乐高机器人共9大类,具体组件如图2-7所示:8
图2-7九大类组件库列表9
第三节“猜数字”!我的第一个手机程序接下来,我们就通过编写“猜数字”的手机小游戏来看看怎么使用AI来开发手机程序吧!“猜数字”程序功能描述:这是一个手机数字游戏,程序运行后会生成一个100以内的随机整数,用户通过输入猜测的数字,通过程序的提示来修改数字大小,通过多次输入后确定正确的数字,输入次数越少,猜测数字的准确性越高。是一个机率与数学思维结合的小游戏。任何程序开发都包含两大内容:用户界面与后台处理程序。通常,我们都要先设计给用户的界面,再完善后台处理程序。“猜数字”程序的屏幕设计如下:图2-8程序功能描述:第一屏组件设计图2-9第二屏组件设计1、用户启动程序后,在第一页屏幕中显示游戏规则,点击“开始”按钮进入第二页;2、点击“数字,来吧!”按钮后,程序将自动生成一个随机数字,用户可以在输入框中输入推测的数字,点击确定后,结果提示栏会对每次输入的数字作出“大了”、“小了”或“猜对了”的提示;3、为了避免有的人一直猜不中随机数,设置了一个“查看随机数”按钮,能显示这个随机数。要试试程序的效果,请从/s/1c0ubqA8下载“猜数字”APK(1.4MB)及猜数字aia源码文件(5.6KB,可直接导入AI在线开发平台)。10
开发步骤:第一部分:组件设计(界面设计)首先,构思好这个程序在手机上的显示界面,如图2-8,2-9;第一个屏幕旋转了一个水平布局组件,一个标签显示提示文字,一个按钮供用户确认进入正式界面,属性设置如下:序号12组件名称垂直布局标签所属功能区布局界面用户界面默认背景颜色:绿色字号:16宽度:300像素文本:“猜数字”游戏规则游戏开始后,在输入框输入一个数字,根据提示修正数字大小,直到正确为止,猜的次数越少,猜数字的能力越强!文本:开始游戏属性3按钮用户界面其次,实现当用户点击“开始游戏”后,程序进入下一屏幕的操作:图2-10增加屏幕的操作按钮在浏览器开发页面的左上角,找到“增加屏幕”的按钮,点击它,就会打开新的屏幕。注意:AI2没有设定默认启动界面的功能,程序执行的首页面是当前编译的页面。因此,当所有程序编写完毕,要记得手动把屏幕点击回到你设定的第一个页面,否则,它就会为用户显示当前屏幕内容。当然,这个“漏洞”对于检查程序效果来说是好事。然后,我们在第2屏上放置以下内容:序号1234567组件名称标签1按钮1标签2水平布局文本输入框1按钮2按钮3所属功能区用户界面用户界面用户界面布局界面用户界面用户界面用户界面组件属性文本:请点击下面按钮生成随机数。文本:数字,来吧!文本:结果提示:默认提示:请输入您的“心水”数字文本:确定文本:查看随机数11
第二部分:逻辑设计上一部分的操作是用户看见的界面设计,一个良好的界面设计是吸引用户的关键!但再漂亮的外观设计,也要有对应的后台程序代码来实现相对的功能,在AppInventor中,不需要输入C语言或其它语言的代码,只需要在功能区拖动对应的代码模块就行了!这对于不想深入学习编程,又想写出自己的手机程序的人来说是一个很实用的工具。图2-11逻辑设计操作按钮设计好界面后,点击右上角的“逻辑设计”,进入图形代码模块界面,图2-11代码模块区图2-12代码图形显示示意在逻辑设计界面中,左边是代码模块,当鼠标点击“控制、逻辑…“等任一模块时,就会在旁边显示具体的代码图形块,如图2-12所示。12
图2-13工作面板区(图形程序放置区)工作面板区左下角的这个图示,实时提醒设计者程序是否正确。工作面板右下角的垃圾桶图标,用来将错误的、不要的图形代码拖放到此删除。(也可以在要删除的代码块上点击右键,选择”删除代码块“)试一试:根据形状及颜色,请将以下图形代码放置在各自屏幕的逻辑设计界面中提示:根据代码块颜色到对应颜色的模块中寻找!形状对应才能自动粘附到主程序块中。第一屏逻辑代码图:图2-14第一屏代码块第二屏逻辑代码图:13
图2-15第二屏游戏主屏代码块(1)图2-16第二屏游戏主屏代码块(2)当上面的代码块都已经放好,请检查一下工作面板左下方的上面的两个数字都是“0”,说明代码的逻辑没有问题,可以进行测试了!14,如果
关键代码讲解:1、生成随机数;在”数学“模块中,由电脑随机获得一个整数,整数的范围可以通过修改代码块中的数字来改变。2、变量的使用:与变量相关的代码块都在”变量“模块中,每个变量在程序中都是唯一的,这个唯一性通过变量名来确定(如var1,也可以是bianliang1),变量名的起名应该简单易懂,让人一看就知道这个变量有什么用。3、代码解释:*设定一个变量var1,程序首次运行时把它的值设为数字0;*当按钮1被点击时,把var1设为0;*生成一个1~100范围内的整数,并将它赋值给变量var1;注:设……为…….是赋值语句只允许用户输入数字将变量值用按钮的文本显示出来合并文本代码块,将2个以上文本合并为1个文本;组件属性”启用“,使用“逻辑“中的”是、否“来控制;15
第4节手机程序调试的方法方法1:在PC上安装安卓手机模拟器这个方法最大的好处是:进入模拟手机界面后,如果在平台上修改了界面或程序,在模拟界面上能够实时反映出来,不需要关掉模拟手机界面哦!一般情况下,我们是先在电脑上设计好界面和逻辑代码,最方便的还是在电脑上测试我们的程序效果,所以,我们要安装AI的PC模拟器,首先我们要下载安装一个最新的AI开发助手,它的文件名通常为MIT_App_Inventor_Tools_2.***.exe,可以百度搜索下载。也可以打开我的百度网盘下载链接获取(/s/1jG7xMYi):下载的安装包:1、双击运行安装包:,安装PC端的安卓手机模拟器操作步骤如下:同意其安全及安装请求:16
图2-17安装AI助手一路点击“next”、“Agree”,记得开放给所有用户使用:这一步,记得勾选“DesktopIcon”,要不安装后都不知道支哪里打开这个模拟器程序!17
图2-19勾选生成桌面图标通常使用默认的安装位置,然后连续点击”next”,直到安装完成。18
安装完成后,在桌面上应该有一个:图标,双击打开,就在windows系统中运行了AI助手,这时会打开一个黑黑的DOS窗口,它提示按键盘上的Ctrl+C可以退出助手:图2-20AI助手后台运行窗口经测试,可以直接将已经安装好的AI伴侣程序所在的Appinventor文件夹复制到C:Programfiles文件夹下,把到桌面生成一个快捷方式,也能达到上述安装的效果!这时,回到我们的在线开发平台,点击左上角”连接“—”模拟器“,就能够自行与AI助手连接,进行模拟操作;19
图2-21用AI助手模拟运行程序图2-22模拟器进行调试的等待画面提示:如果测试中遇到问题或要退出模拟测试,同样点击”连接“—”重置连接“就可以关闭当前程序模拟,如图2-21紫色圈示。图2-23AI助手安装不成功的画面初次运行AI助手,可能会遇到以下提示”过期“的情况,通常是因为MIT对AI助手进行了更新,有更完整和更真实的仿真功能,必须更新后才能正常使用AI模拟功能;20
注意:当浏览器弹出下面的对话框时,一定要点击“确定”!不然不能正常使用模拟器!图2-24AI助手更新提示点击“确认”后,浏览器自动下载升级组件,如下图所示:图2-25AI助手更新进度提示下载完成后会出现“升级完成”提示,这时不要点击这个按钮,转看模拟手机屏幕:图2-26模拟器上也要进行更新确认在模拟的手机屏幕上依次点击”OK”,“Install”,,更新模拟手机端的AI助手;直到模拟手机提示“applicationinstalled”以及Open,Done两个按钮,21
点击“DONE”,在浏览器编程界面点击“升级完成”;然后在浏览器的平台界面点击“连接”--“重置连接”;完成整个AI升级操作。要测试程序,就要再点击“连接”--”模拟器“,再来一次2分钟的等待就可以了!注意:使用AI助手在电脑端进行模拟安卓手机程序的调试只需要运行一次模拟器,后续更改了程序的界面或代码,甚至打开另一个项目都不需要重置模拟器,所有修改即时在模拟器中体现的!除非长时间不操作后,模拟器可能断开连接,才需要重置连接,再次运行模拟器。22
重要提示:初学者如果不细心的话,通常会在AI助手更新的步骤中出问题,导致后续学习不能进行!因此,安装好AI助手后,首次运行时要认真看清楚弹出的提示框,按提示操作。如果不断遇到”需要更新“的操作,一般是因为手机模拟器端没有同时更新,这时,注意观察左边白色提示框的提示内容,及时在右边手机模拟端安装和更新;一次更新可能不成功,重置连接后再进行模拟器模拟操作,只要细心一点,2-3次尝试后就能够成功。二、方法2:手机实时调试(AI伴侣)据说,可以通过USB数据线连接电脑,然后在手机上安装AI伴侣程序就可以使用第一个选项进行实时调试,但作者尝试了两台联想手机:安卓4.4及5.0系统,可以安装AI伴侣,但系统却以签名不对的提示不允许升级操作,而不能升级最新的AI伴侣就不能实时调试,所以一直未能成功。不知其它品牌的手机系统是否可行。三、最麻烦的方法3:使用二维码扫描下载安装或下载到电脑再复制到手机上安装进行调试这个方法比较麻烦,只有当程序涉及到多媒体内容(声音、动画、视频等)及传感器应用时才使用,具备WIFI条件时可以使用。23
初级程序开发入门AppInventor是一个容易使用的在线开发工具,我们通过几个简单程序来熟悉开发界面和相关组件。请注意:依照图文教程开发出可以执行的手机程序只是开始,你需要理解程序的过程和原理后开发出自己的程序才是学会学习的精髓!第一个例程:“会叫的青蛙”作者:戚宇辰(初一级)一、程序功能描述:启动程序后,当用户点击屏幕上的青蛙图片(实际为按钮)就会听见青蛙发出“呱”的一声,可以用于幼儿认识动物与其叫声的程序开发。二、程序屏幕设计:图3-1用户界面设计序号123功能区用户接口用户接口多媒体组件名称标签1按钮1音效1组件属性文本:我是会叫的青蛙图像:青蛙.jpg宽度:200高度:300源文件:青蛙.wav表3-1使用组件列表24
三、代码设计:1、设计好界面后,点击右上角的“逻辑设计”,口。进入图形代码模块接2、点击左边模块中的“按钮1”,在“工作面板”上选择第一个按钮点击动作代码模块:图3-2代码块选择3、在模块面板点击“音效1”,在出现的工作面板上选择第二个“播放”代码模块,25
4、将音效播放代码模块拖到右边工作区的按钮点击代码模块中:当上面的代码块都已经放好,请检查一下工作面板左下方的如果上面的两个数字都是“0”,说明代码的逻辑没有问题,然后,我们就可以点击左上方“连接”--“模拟器”进行测试了!26
测试结果:没有声音!!怎么会这样!!??原来,由于windows系统与安卓系统的跨平台技术等原因,AI的PC模拟器是不支持声音、媒体等音效的,因此,要测试多媒体效果,还是需要我们把程序下载到手机进行安装和测试。点击屏幕上方:“打包APK”,可以看到2个选项,我们可以选择把服务器生成的APK程序以扫描二维码的形式下载安装,或者直接下载到电脑中再通过手机管理程序进行安装,如果有WIFI的话,建议使用第一种方法,否则使用第二种方法。27
入门程序第2例:生成指定个数的随机数作者:邓小华学习要点:1、使用变量储存数据;2、循环结构的使用;一、例程说明:在此例中,我们使用一个叫“循环结构”的算法来生成指定个数的随机数,所谓循环就是重复做同样的一些事。循环有两种:一种是有限循环,一种是无限循环;有限循环是有条件的循环,一旦达到条件就会自动跳出循环;而无限循环则是一直重复某一个或一些动作,没有结束。比如我们画一个正方形,是先画一条指定长度的线段,然后转90度,再画第2条线段,再转90度......如此反复4次,如果以一个动作一个动作来写代码,我们要写7,8条语句才能完成,但如果用循环,我们可以用一半的语句就能完成!下面,我们一起来写一个简单的生成5个100以内的随机数的手机程序:界面设计很简单:在“用户界面”放入一个标签,一个按钮:标签除了显示提示之外,也可以显示生成的随机数的结果,当然,也可以使用按钮的文字来显示,看个人的习惯,但不建议使用文本输入框来显示。它的代码块可以这样实现:28
二、主要代码讲解:(一)变量使用1、定义变量并给变量赋值:初始化的动作通常放在逻辑设计的最前面,这里设定一个名为“i”的全局变量(注:全局变量是指在整个程序运行过程中都有效的变量,局部变量则只是在某一个动作中有效,在其它动作中无效。),并设定它的初始值是数字“1”(也可以是字符或其它类型的内容,平台会自动识别和定义)。另外说一下,“i”是在所有高级编程语言中用得最多的变量名。通常,我们可以设定很多全局变量或局部变量,但变量用得越多,消耗的机器内存越大,所以,最好尽量使用尽可能少的变量来运行程序。2、获取变量值:在变量模块中选择:3、变量自身增加1:变量i都加1;通过对i大小的判断来决定是否跳出循环;,就可以使用变量中存储的内容了。,在此程序中,每一次循环,(二)循环语句//循环执行的条件是变量i≤5,一旦大于5则结束循环!//变量i自身加1运算;//用标签5显示随机数结果,合并本身内容及新的随机数。29
循环的工作流程是这样的:循环开始是否i≤5是否生成随机数并显示i=i+1循环结束在此程序中,我们的目的是要获得5个随机数,而随机数每次只能生成1个,所以要循环5次才能生成5个随机数;所以,我们用变量i来作循环的计数器:每生成1个随机数,计数器(变量i)就加1,当i等于5的时候说明已经获得5个随机数,则结束循环;程序自动执行下一段代码。如果想让这个循环无限工作下去,我们只需要把条件i≤5替换成:1<2这种类似的永远成立的逻辑条件就可以了。不过,如果一个程序只是单纯的无限生成随机数而没有其它内容,那这个作者以后的程序作品可能都没有人会去下载了!所以,请记住:程序要吸引人,必须考虑别人都用得到的功能!30
四、强化程序功能的改进如果我们要写一个程序实现两个控制:1、可以生成指定数目的随机数;2、可以指定随机数的最大值;该怎么做呢?1、界面设计参考:2、代码块参考:31
入门程序第3例:抢钞票手速挑战作者:邓小华、李煜熙一、程序功能描述:1.用户启动程序后,在第一页屏幕中显示游戏规则,点击“开始游戏”按钮进入第二页;2.点击“图片”按钮,每点击一次,你的钱数将会增加100元,点的次数越多,得到的钱就越多。3.30秒内点击次数超过180次的将显示奖励话语:哇!你是抢钱快手!二、开发步骤:1、第一屏组件设计:在第一屏“Screen1”里放入2个标签,在两个标签下再放1个按钮组件,属性设置如下,效果图见图3-5::序号1功能区用户界面组件名称标签1背景颜色:绿色组件属性字号:14文本对齐:居中文本:“钞票我来了”游戏规则2用户界面标签2宽度:300高度:200文本:游戏开始后,“钞票我来了”游戏规则游戏开始后,在限定的时间内狂点钞票,看看谁的钞票最多。点的越多,说明你的钱越多!3用户界面按钮1文本:游戏开始图3-5第一屏效果图32
2、第二屏组件设计;添加屏幕,默认屏幕名称为“Screen2”,改名为“GO”,在用户界面里找出“文本输入框”,在里面写上,接着在用户界面拖出“按钮”,在按钮的组件属性栏的“图像”属性中点击“上传文件”按钮,将钞票图片作为按钮来响应后续的点击动作,使用的组件如下表所示:序号功能区用户界面用户界面组件名称组件属性12文本输文本:点击下面的钞票,开始游戏入框1按钮1图像:钞票图片3456用户界面用户界面传感器用户界面标签1标签2文本:钱数:30文本:(清空)计时器1启用计时:false计时间隔:1000按钮2文本:游戏开始完成的效果图如下所示:33
3、逻辑设计:在屏幕的左上角“Screen“位置点击回到第一屏,再点击右上角的“逻辑设计”在左边的“模块”列表中,点击,34
选择并放入:回到“模块”面板,点击“控制”,选择“打开屏幕-”:从“模块”找到并放入刚才“屏幕名称”后,在“”中输入第二屏的名称“GO”;切换到第二屏“GO”的逻辑设计,按下图编程:代码块解释//设置两个全局变量,一个记录点击次数,一个记录秒数;//点击“开始抢”按钮才开始计时;//用标签1显示点击次数,开始时清零;//两个全局变量确保清零//游戏开始后,时间结束才能重新开始//点一次加100数值//用标签1显示点击次数,是总金额除以10035
36//计时变量每秒钟增加1;//用标签2显示计时数值;//计时达到30秒进行动作;//停止计时,并停止钞票按钮响应;//判断手速是否达到180次;//达到显示奖励语句;//不达显示总金额;//“重新开始”按钮生效;
挑战:30秒内,我的手速达到170下,你的有多少呢?试一试:按鼠标应该比屏幕点击速度快,写好程序下载到手机上试试吧!排雷解题:这个程序还有个小问题,如果重新开始,计时是从30秒开始算起,限时判断语句将会完全失效!请你找出相关语句并修改,让它在大于或等于30秒时能够正确动作吧!37
入门例程四:10以内的加、减法学习程序在本节内容中,我们将开发一个给小学一年级以下的小朋友使用的10以内的加、减法学习程序,通过本例子的学习,我们将学习到以下要点:增加及进入下一个屏幕(Screen);利用循环生成2个随机函数;自定义和调用过程函数;第一部分:界面设计一、首页设计:如果想界面变得更吸引小朋友,可以增加背景图片或在按钮的属性中使用合适的图片来代替常规按钮的样子!这个美化工作就交给大家自己完成了。二、加法练习界面设计1、增加一个屏幕2、使用默认的屏幕名称或输入较明显的区别名称,如Screen_jiafa:38
3、放入组件如下:4、修改相关字体大小、文本内容,结果如下:三、减法练习界面设计减法练习的界面可以使用与加法练习界面相同的布局,但为了区别两种法则,建议使用一些明显的提示在不同的界面,如加法界面使用一张加法卡通图片,而减法界面则是另一张图片。提醒:由于是随机出题,有可能会出现第一个随机数比第二个随机数要小的情况,如生成“4-6”的情况,由于小学一年级还没有学习“负数”的概念,所以这一题会让小学生产生疑惑,因此,要在产生2个随机数后,在用标签显示之前要对两个数的大小进行比较,并确定把大的随机数放在第一个数字的位置上,小的随机数放在第二个数字的位置,确保练习内容在对应的学习水平上。39
四、程序功能拓展练习:1、增加用户自定义出题范围;用户可以在首页输入出题范围多大(默认是:10);2、在屏幕2、3中增加显示正确率提示;3、增加每题的“正确”、“错误”语音提示及语音开关功能;4、增加乘、除法运算功能;40
手机“打地鼠”程序教程整理:培正中学初二级张思涵、蔡敏灵打地鼠这款街机游戏,大家应该都不陌生吧?今天我们就来学习用AppInventor制作一个手机上的“打地鼠”游戏。一、本程序学习使用的主要组件有:1、图像精灵组件:具有触感的可移动图像;2、画布组件:容纳图像精灵的平台;3、计时器组件:用来计时,控制图像精灵移动频率;4、音效组件:在此游戏里,用于击中地鼠时产生震动;5、按钮组件:在此游戏里,用于开始新游戏;6、定义过程:定义过程用来实现一系列的指令,可以重复调用,如本游戏中的“地鼠移动”;7、产生随机数;8、使用加法块(+)及减法块(-)二、程序实现效果:1、一只地鼠随机出现在屏幕上,每秒钟移动一次;2、如果手指触碰到地鼠,则让设备震动,显示命中数加1,同时地鼠随机移动到一个新位置;没有点中地鼠,则显示失败数加1;3、点击“重新开始”按钮,则命中和失败的计数归零,游戏重新开始。41
首先,登录AppInventor开发平台(中文版),新建一个项目,命名为“MoleMash”,在右边的属性栏中将屏幕标题设为“打地鼠”;然后,上网下载一张喜欢的地鼠图片,上传到组件列表下面的“素材”;注意:素材文件大小必须控制尽可能小,不然程序运行会很慢,且占用大量手机内存!通常可以用QQ截图来保存需要的图片,这样的文件体积会相对小一些。三、组件设计1、在组件面板中找到“绘图动画”,再找到“画布”,拖入预览窗口,采用其默认名称“画布1”,设置宽度为充满,即与屏幕等宽,设置高度为300像素;(画布的作用:作为图像精灵的容器,就是限制地鼠的活动范围)检查一下,你的屏幕是像上面这样的吗?如果是,那么恭喜你,你已经成功地完成了第一步!也证明你拥有完成的能力!下面我们就加快速度吧~42
2、同样在“绘图动画”中找到“图像精灵”,将“图像精灵”组件拖入到“画布1”中的任何位置,在组件列表底部单击重命名,改名为“地鼠”,设置其图片属性为之前上传的地鼠图片。(示例为:)(图像精灵:作为用户点击的目标,就是地鼠)3、在组件面板中找到“用户界面”的“按钮”,拖动“按钮”放在“画布1”的下面,改名为“重新开始按钮”,并设置其文本为“重新开始”;(重新开始按钮:重新设置得分)4、在组件面板中找到“传感器”中的“计时器”,拖入,它将落在预览窗口下方的“非可视组件”区域;(计时器:控制地鼠的移动频率)5、在组件面板中找到“多媒体”中的“音效”,拖入,它也将落在“非可视组件”区域。(音效:当地鼠被击中时震动或发出响声)6、在组件面板中找到“界面布局”中的“水平布局”拖动组件放在“重新开始”按钮的下方,保留“水平布局1”的默认名称;(水平布局1:放置“命中”和“命中数量”两个标签)7、在组件面板中找到“用户界面”中拖动两个“标签”组件到水平布局1”中;将左侧标签改名为“命中”,设置其文本为“命中:”(确保冒号后有一个空格);将右侧标签改名为“命中数量”,设置其文本为“0”;(两个标签:分别显示“命中”和“命中数量”)8、拖入第二个“水平布局”将其放在“水平布局1”下面,将两个标签拖放在“水平布局2”中,左侧标签改名为“失误”,设置其文本为“失误:”(确保冒号后有一个空格),右侧标签改名为“失误数量”,设置其文本为“0”。(水平布局2:放置“失误”和“失误数量”两个标签;两个标签:分别显示“失误”和“失误数量”)43
现在,你的屏幕是不是这样的呢?(地鼠的位置和图片可能不同)现在所有的组件都大功告成了,让我们喘口气,将屏幕切换到逻辑设计版,然后进入下一步:四、逻辑设计(为组件添加行为)还记得刚刚说过的我们最终要达到的效果吗?看起来是不是很复杂?别担心,我们一步一步来——第一步:地鼠随机位置出现的实现地鼠移动的内在原理有些繁琐,请耐心地看完,这对我们移动地鼠来说很关键。要理解地鼠如何移动,需要了解安卓的图形定位机制:(0,0)XY画布(以及屏幕)可以看作是由x(水平)坐标和y(垂直)坐标织成的网格,就像平面直角坐标系(如果你知道的话),只不过,数学中的直角坐标系的原点(0,0)是在左下44
角,但是在手机中,零点坐标为(0,0)是在左上角!!x坐标向右为增大,y坐标向下为增大。一个“图像精灵”的x、y属性表示它距离左上角的位置,因此当地鼠位于屏幕左上角时,他的x和y值都是0。为了将地鼠的移动限制在屏幕之内,(要不它要确定x和y的最大值,这要用到地鼠和画布的宽度及高度属性。(地鼠的宽度和高度属性值与上传的图片的大小相同,而在创建画布1时,你设置的高度是300像素,宽度为“充满”,即等于屏幕的宽度)如果地鼠图片的宽度是36像素,画布宽度是200像素,那么地鼠的x坐标最低可以为0(靠近屏幕左侧边缘),而最大为164(200-36,或画布宽度-地鼠宽度),这样才能保证地鼠不超出屏幕的右侧边缘。同样,地鼠顶部的y坐标范围可从0到画布高度-地鼠高度。你可能会想,假如AppInventor中有一个内置过程,可以自动将图像精灵移动到屏幕上的某个随机位置,那岂不是很好?可惜没有,不过我们可以自己来创建一个过程!(就叫地鼠移动吧)就像内置过程一样,自己创建的过程会显示在“过程”抽屉中,需要时可以随时调用它。如果你看懂了上面的解释,那么做起来应该不难,如果没有理解得很清楚,那也没关系,按照下面的图从对应颜色的抽屉找出相应的块吧~已经完成了“地鼠移动“的过程,现在该调用它了。如右图所示:1、点击Screen1抽屉,并拖出“当screen1初始化”块;2、单击“过程’抽屉,你会看到一个“调用地鼠移动”块,把它拖入“当screen1初始化”块。(太神奇了!你自己创建了一个新的过程代码块,不是吗?!)45
小知识:过程抽象过程抽象是计算机科学的重要手段之一,就是命名然后调用一组指令(如这里的地鼠移动)。之所以叫做“抽象”,是因为过程的调用者(在实际项目中,调用者很有可能不是过程的开发者)只需要知道过程的功能(如移动地鼠),而不需要知道过程的实现方法(生成两个随机整数)。就像在实际生活中,不同的工程师设计出汽车的不同部件,没有人了解所有的细节,而司机只需要如何使用(例如,踩下制动踏板把车停下来),而无需了解如何制造这些接口。如果没有过程抽象,不可能实现那些大型程序,因为它们的代码量太大,对个人来说是力所不及的。与复制和粘贴代码相比,过程抽象的优势在于:1、由于过程的代码独立于其它部分的程序,因此更易于对过程的测试;2、如果代码中有错误,只需要对局部进行修改;3、如果需要改变过程的实现(或功能),如确保地鼠不连续出现在同一个位置,只需要修改一处的代码;4、将大块代码拆分成代码片段,有助于对应用做深入剖析,并加以实现(“分而治之”)。5、给过程一个有意义的命名,将有助于提高代码的可读性,更易被别人(或一个月后的自己)读懂;接着,我们要让地鼠每一秒移动一次,这就需要用到Clock组件。设置“计时器1”的“计时间隔”为其默认值1000(毫秒),即1秒,(如右图,其实也不用设置)在“当计时器计时”块中,无论设定什么动作,它都会每秒钟执行一次,除非你想让它以其它时间间隔来执行动作。以下是具体做法:1、单击“多媒体”-“计时器1”,找到并并拖出“当计时器计时”2、单击“过程”抽屉,将“调用地鼠移动”块拖到“当计时器计时”块中,如下图所示。(如果你觉得地鼠移动得太快或太慢,可以在组件设计器中设置“计时间隔”,来增加或减小地鼠的移动频率,这个间隔频率其实可以用来改进程序实现游戏的简单、困难程度)第二步:记录成绩刚才我们创建了四个标签,其中初始值为0的“命中数量”和“失误数量”,希望以此来记录用户的成绩:当用户命中地鼠一次,或失败一次(直接触碰到屏幕)时,对应标签中46
的数字增加,为此要用到“当画布1被触碰”块,它表示画布被触摸到,并记录了触摸点的x和y坐标(我们不必关心),以及是否碰到了图像精灵,也就是地鼠(这是我们关心的),如下图所示。可以理解为:当触碰到画布时,检查图像精灵是否也被碰到。应用中只有一个图像精灵,就是地鼠,如果碰到地鼠,则“命中数量”中的数字在原本的基础上+1,否则“失误数量”中的数字在原本的基础上+1,请发挥你的聪明才智,自己试着创建这些块吧!注意:1、“如果,则,否则”的创建方法:先拖入“如果,则”块,然后为其添加“否则”块(点击“如果”左边的蓝色方块,在弹出框中将“否则”块拖入“如果”块),如下图所示。2、数字块“1”可以在“数学”抽屉中拖出“0”块再改为“1”,还可用复制粘贴,也可以直接打出“1”再按回车键。就像这样:第三步:重置分数我们要在“当重新开始按钮被点击”块中设置“命中数量”和“失误数量”的值为0。如下图所示:47