第1章 初体验——用积木编程

“学习四法则是解释、示范、模仿、重复,目的是创建一个即使在重压下也能保持的正确习惯。为了确保这个目的,我创造了八条规则,那就是——解释、示范、模仿,重复,重复,重复,重复,再重复。”

——雷夫.艾斯奎斯

电脑中最有意思的地方在哪里,可能回答有许多,但编程应该是可能解答之一。的确,在许多人心中,编程是一件有趣的但却很难的东西。因为难,使得很多人望而却步,最终难得体会其中的有趣。难的东西中可能包含的趣味,因为难却没有体会到;简单的东西太简单却少乐趣,其中有趣更难体会;这象个迷咒,挥之不去。多年来,一直想找一种工具或一块“入门砖”来帮助破解这个迷咒,既简单易学,又可以体会编程的趣味。当我遇上Scratch时,终于长出了口气。它就是这块“砖”,其外表象砖,这是其一,其作用也正象入门砖,简单易学,会动鼠标会拖动就会编程。 正因为有了这块砖,给了一种积木式的编程工具,可以直观生动地来学习编程。因为虽然难,但并不代表学不会和不能体会,破解这个艰难过程本身,就是一项有意思的挑战。难的东西至少乍看上去是复杂的,如何将这种复杂变简单?用积木来编程,给了人们一种用简单方式来学习的最好的工具,所以先不要思考难或不难,先动手来做,动手兼动脑开始体验程序之旅吧。 本章要和大家一起来做一下经典的小游戏——贪吃蛇。 但最先做的又不是贪吃蛇,而是超级简单的一个游戏“小狗吃香蕉”,最终的贪吃蛇游戏的完成过程,就是从“狗吃蕉”一步步模仿与复制的过程。所以说,制作或做的过程中,重要的是模仿,动鼠标想办法复制出来,其他的暂时先不要计较。模仿又是分阶梯的,有不同的阶段。将贪吃蛇分两个版本,简单的“蛇吃鼠”和能够吃后长身子的“贪吃蛇”,前面的简单后面的复杂一些。 在作出“蛇吃鼠”之前,先对应作一个小游戏:小狗吃香蕉。本章就是从这个小游戏着手的。做游戏之前,先来了解一下Scratch的真面目。

1.1Scratch简介

1.1.1什么是Scratch——积木式编程 Scratch是一款专门为编程初学者和爱好者订制的图形化编程工具,是美国麻省理工学院媒体实验室的作品,是在乐高积木的拼装式组装工作感召下发明的积木式编程作品。只要用鼠标拖几下,不需了解英文,不需了解太多细节,就可以实现声音动画并茂的创作。同下面的三种玩具比较一下,就能体会出什么是Scratch。 看到Scratch后,首先联想到的与其对比的是乐高积木,积木大部分人都玩过,而在积木中乐高积木给人印象尤其深刻。几年前我也买过一套乐高洋房积木,至今拼出的洋房还放在我家的书架上,乐高的积木非常精巧,并配有相关的图纸,玩这种积木很有成就感,孩子们就象一个建筑师或设计师一样,可在工地上建造自己漂亮的楼房,最后楼房建成的那一刻,确实能体会到一种幸福的成就感。要说乐高积木的优点可以数出很多,当然也有缺点,它唯一的缺点是太贵了点,一套普通积木动辄成百上千块。但买过这一套之后,三四年下来,一直保存的很好,过一阶段还要同孩子一起再次动手重做一下。其实Scratch的创意就来源于乐高积木,通过它,程序也可以象垒积木一样来完成,并且程序在价格上更便宜,几乎是免费的。

enter image description here

图 1.1乐高积木赛车

因为Scracth可以实现动漫设计的特点,人们很容易将Scratch同另外一款动漫与游戏制作工具Flash比较。Scratch同Flash相比,有许多方法上的相似特点,Scratch显得短小易懂,Flash则是个大个头。由于Scratch脚本完全实现了图形化,不需要作者写英文式代码,只要将鼠标拖动几下,便可以通过积木代码将创意实现,这样对于编程初学者或任何其他学习者来说,入门的门槛大大降低。图形的优点在于,初学者不需要对英文的编程语句进行了解,只需根据直观判断,就可以做出自己想要的结果,这正象积木玩具一样,任何人只要脑子里有个原形,就可以发挥自己的创意进行拼装。 另外一个非常容易让人对比的的东西是乐高机器人,乐高的机器人是加上了CPU的积木,这些东西比不加CPU的积木要贵很多,动辄几千元,用Scratch相对于用这些可编程机器人,成本上来说要小很多,因为Scratch软件是完全免费的,只要有一台电脑,就可以下载下来发挥自己的创意,当然如果你已经有了自己的机器人,Scratch还是一种可以对机器人进行编程的很好的工具。

Scratch就是这样一种东西,既是一种创作工具,又是一门很有趣的计算机语言,在玩中将计算机中最难的也最有趣的内容学会了,了解了。其实,从本质上来说,选择哪一种编程的语言并不重要,因为各种语言从原理上来说是相通的,但选择一种入门的语言又非常重要,易学易用直观易上手。 后面,我们首先通过一个小游戏来体验一下Scratch。游戏的主角是一只饥饿的小狗狗。

1.1.2三个版本两种方式的Scratch 如何获得Scratch 现在Scratch有两个版本,一个是可以下载到本地电脑的,一种是可以直接在网页上使用的。下载版包含Mac版,Windows版和Linux版三个版本,这三个版本功能上是相同的。而不论下载的方式还是网页的方式,这两种方式的版本,功能上非常相似,相对来说网页版的功能稍稍多一点。 下载版的程序下载地址为:http://scratch.mit.edu/scratch_1.4/

图 1.2 scratch下载页

安装Scratch到自己的电脑上 下载版本的Scratch根据操作系统的不同可分成三个版本,根据自己的电脑选择其中一个,将文件下载下来,下面选择的是Windows版的,也就是上图中的第二个。用鼠标点击,就可以下载相应的文件了。 文件下载后,会在电脑上形成如下图所示的名为ScratchInstaller1.4.exe的安装文件。

图 1.3 Scratch安装文件

双击安装文件,直接选择Next(下一步),通过默认的方式,就可以将Scratch安装在自己的电脑上,后面找到小猫样式的图标,双击就可以运行它了。

图 1.4 Scratch安装文件 还有一个网页版的,其特点是不需要安装,但必需要上网,这样可在浏览器中直接应用Scratch:

图 1.5网页版界面

1.1.3 Scratch界面

图 1.6 Scratch界面

本机版安装后运行,界面如图,一只洋洋得意的小猫出现。如何看这个界面呢?可以将我们的作品整体比喻为一出戏剧。整体三部分,最右边是与演戏的舞台和演员角色相关的,上面的较大的部分是展示区,将来我们的作品就在这个区域中展示。展示区有两个要素,一个是舞台背景,一个是上面的小猫,下面则是对上面这两个东西进行调整的设置区域。最左边的是各种积木代码区,类似于演员们的剧本集,将各种种样的角色可能要说的话归类,将来表演的时候不是随便说随便表演,而是以这些东西为依据,它一共分成八大类,有了它们,演员们可以以此为据活灵活现表演了。中间的部分干什么呢?下面的较大区域是放置当前演员的表演话语,即代码,每个演员每个时期的表演内容不尽相同,根据时间的前后关系,可从左边的代码中抽取相应的东西放置其中。 还有一点忘记说明了,即如何开演这出戏和结束这出戏?右上角的绿旗和圈圈的作用在于此。先介绍这么多,后面用到时还有详细介绍和应用。

1.1.4小结 与Scratch相关的情况就介绍完成了,下面我们就可以开始体验过程了。 本章要和大家一起来做一下经典的小游戏——贪吃蛇。但最先做的又不是贪吃蛇,而是“小狗吃香蕉”,最终的贪吃蛇就是从“狗吃蕉”一步步模仿与复制的过程。所以说,制作或做的过程中,重要的是模仿,动鼠标想办法复制出来,其他的暂时先不要计较。模仿又是分阶梯的,有不同有阶段。将贪吃蛇分两个版本,简单的“蛇吃鼠”和能够吃后长身子的“贪吃蛇”,前面的简单后面的复杂一些。在作出“蛇吃鼠”之前,先对应作一个小游戏:小狗吃香蕉。本章就是从这个小游戏着手的。

课后作业  根据应用,请说明一下Scratch是干什么的?它与普通的积木有何区别与联系?  角色和造型有什么区别和联系?  Scratch如何安装,请描述一下安装过程,并说明安装完成后其在电脑中的具体位置,其文件夹中project和media下面分别放置了什么内容?如果我想找一个类似的项目来学习,可以从哪个文件夹中找到?  什么是安装程序,什么是可执行文件,有何特点?  与Scratch安装文件相关的英文单词有哪些,其意思分别是什么,请总结一下。

1.2“小狗吃香蕉”编程之旅开始 下面就开始体验之旅,游戏的名字叫“小狗吃香蕉”。 实例体验:小狗吃香蕉 创意描述:小狗阿欢最喜欢的食物是肉骨头,今天它迷了路,这只迷路的小狗,在墙角上焦急地寻找着食物,在又晕又饿的时候,出现的不是肉骨头,却是一串串的大香蕉,小狗该怎么办...... 制作过程: 制作的过程中主要三部分内容,角色安排和舞台布置,以及代码拖入。 前两部分主要功能是设置环境,将与创意案例相关的背景和角色纳入,为后面的代码部分提供素材。通过下面的三步就能搞定。

1.2.1角色与背景制作

第一步:小猫变小狗——主角闪亮登场

图1 打开Scratch,会出现图1所示画面,中心主角是一只小猫,这也是软件为什么叫Scratch的原因——猫的尖叫声的英文就是scratch。工作区很明显地分成三大部分,最左边的是编程积木存放区,中间是积木代码和角色造型或声音区,最右边是幕布舞台和舞台下对角色的处理。 此步要做的工作是将主角变换一下,由小猫转成小狗。在图1双击角色1对应的小猫,然后在图中新增角色边上的三按钮中间按钮“从文件夹中选择新角色”,从文件夹animal中找到小狗的图案,就可以得到图2中的狗狗。为了最终实现狗狗的走动,要用到这个狗图的三种造型,通过单击图2中的“造型”,通过中间的“插入”按钮,可将其他两个加入,现在小猫转换成小狗,成功。

图2 友情提示:角色与造型要分清,角色包含多个造型,造型是实现动画的分动做。

第二步:两块大香蕉——再加两个角色

图3 只有小狗还不行,因为创意中还需要另一个配角,即香蕉,点击图3所示增加角色按钮中间的“从文件夹中选择新的角色”按钮,可以从另外一个文件夹things中选择香蕉。为了便于比较,选择两块大香蕉。三个角色放上后,还要学会将角色放大或缩小,因为用原始图片相对于整个窗口,香蕉与狗狗都有点大,通过缩小按钮再将三个角色调的小一点。

第三步:小狗的避难所——调整背景

图4 只有角色还不行,还要给角色们一个活动空间,即舞台背景。这里输入现成的背景方法和角色一样,还是选点一下舞台,再通过“输入”按钮来完成,图上的背景是在nature文件夹的下面,象一个墙角,比较符合本题的故事背景。当然也可以自己画,这样可以更好地发挥创意。 现在,故事的主角配角都有了,不过除了非常零乱地放在一起外,他们之间还没有任何的联系,怎样让故事继续下去呢?下面该编程积木上场了。

1.2.2实现基本功能代码

上面有了狗狗了,也有了香蕉了,但它们之间没什么动作,只是作出一个很简单的狗吃香蕉的表面。还样不够,还必须实现游戏的主要功能,能动,会叫。此过程是针对上面的角色进行创意设计,上面建立的角色们如果没有本次的积木代码,就是呆板图片,通过代码,它们将会一个个活灵活现地表现出来。为了最终达到活灵活现,首先需要将角色基本的功能实现,即小狗跑动起来和吃到香蕉,这就是下面要解决的两个问题。

问题一:让小狗随鼠标动起来

图5 第一个问题是让图上的小狗如何动起来?键盘鼠标都可以,为了方便,通过鼠标来控制它。首先再来熟悉一下这个窗口,最左边的就是积木代码栏,有各种类型起到不同作用的积木代码,只要从上面的按钮代表的类别中点一下,下面就出现相应的代码类,中间的一栏用来放程序中要用到的积木代码,这些代码就是控制角色的。最右侧则是执行查看窗口,只要点一下“绿旗”,程序开始执行,点一下圆形按钮,执行结束(如图5所示)。 需要说明的是,像其他计算机语言程序设计一样,程序要有一个开始的标志,图5中的小绿旗正起到这样的作用,通过选择“控制”代码栏,然后就在下面出现与控制相关的积木式代码,第一个即是开始控制标志,点击一下并用鼠标左键将其拖入中间的脚本窗中,将来我们只要点击一下图中最右一栏上方的绿旗小标志,程序就可以执行了。 将小狗狗同鼠标建立关系实质就是为角色狗狗加脚本,双击角色1狗狗,再单击中间栏中的脚本,现在将积木代码放在中间区域,就可以控制狗狗了。问题关键在于检测小狗与鼠标指针的距离,如果距离超过某个值,则就向鼠标方向移动,这样就可实现狗跟着鼠标跑的效果了。在程序中(如图6示),控制类代码起到了骨架的作用,第一块和最下面的一块框架都是控制类代码,后面这块起到了重复执行的作用,因为执行过程中,鼠标控制狗狗的行动方向是一直持续的。除了用到控制类代码,还要用到另外四大类代码,一类是外观的,切换小狗的不同动作,以实现动画的目的;另外是动作的,“面向鼠标指向”,“移动多少步”属于此类;第三类是为了监测小狗与鼠标距离而用到的“侦测”类代码,侧测最终放到第四类代码“数值与逻辑运算”中,这两类代码共同放到循环支架当中,共同起到判断的作用。

图6 除了将这些代码调好,还要调整小狗角色的一个翻转参数,使其只能“左右翻转”(如图6相应标志所示)。 现在点一下绿旗,小狗就可以变换着动作在整个舞台上随着鼠标指向移动了。

问题二:让狗狗吃到香蕉

让狗狗“吃”香蕉的问题,实质上就是狗这个角色与香蕉相遇后香蕉消失,就基于这些功能,下面加一下代码。首先双击角色2,即第一块香蕉,然后点代码栏中的脚本。狗吃到香蕉即狗的图与香蕉的图相遇时,香蕉消失,这个检测放置的位置,在狗即角色1的脚本中做可以,也可以做在香蕉的脚本上,归根结蒂还是在不停地检测二者是不是相碰。

图7 第二块香蕉与第一块香蕉代码是一致的,所以一开始的时候可以先不放上角色3,等角色2代码做好后,再复制一个就可以了。但这样的香蕉在执行的时候让人明显感到有些痴呆,因为原先待在哪里,后来又出现在哪里,这是也是后面要解决的问题。 但不管怎么说,一个小狗啃香蕉的原型出现了,面在只要点一下绿旗,小狗狗就可以满屏飞奔找香蕉了!

1.2.3 从基本原型不断丰富 前面做的小狗啃香蕉虽然能够执行,也能让狗狗吃到香蕉,但明显有些地方差强人意,距活灵活现还远得很,最重要的有三个问题:一是狗狗满屏乱飞,与背景不一致;另外一点是香蕉出现的很呆板,每次都在同样的地方出现;还有,狗狗是无声的,能不能让它叫起来,下面逐一处理它们。

问题一:如何把小狗限定在墙角下方

在调试的过程中不难看到,这只小狗太灵活了,只要是屏幕上的区域,它无所不到,最好还是将它根据背景做一下限定,整个屏幕是在一个平面直角坐标系当中,屏幕正中间正是坐标(0,0)所在的位置,所以在此背景中,狗狗主要在下方行动,所以主要限定其纵向坐标y,其值可以限定为不能小于-40。

图8

问题二:让香蕉活起来,让狗狗叫起来

不过为了继续给狗增加香蕉,消失后的香蕉还要在屏幕上再次出现,而再次出现之后,最好其位置还是不能预测的,所以,香蕉位置的代码还要增加,另外,为了突出效果,狗狗吃香蕉后最好要有点感叹,也就是增加声音。 第一个效果的实现,主要是控制香蕉出现的坐标,让其纵坐标x与横坐标y都改成随机数,随机数就是一种在某个范围内不确实出现哪个数的数,有了这种方式,还需要注意,因为狗狗在变换造型,所以直接让其放在前面所述的循环类框架中,会出现香蕉满天飞的情形,所以外面用循环,在里面用一个分支来控制是否遇到了狗狗。值得一提的是,角色3的另一块香蕉完全可以通过角色2来复制,这样在代码编辑上可以省去不少力。

图9 至于狗狗的声音,可以选择自己录音,也可以从系统文件夹中找到相应的录音。

1.2.4小结 有不同动作能跑能发声的游戏实现了,虽然它有许多缺憾的地方。重要的是一个原型出现了,这个原型就是我们后面不断丰富完善的基础。除了完善这个游戏的功能本身,如果思路稍转,只要将上面的三角色与背景变换一下,还能做出类似大鱼吃小鱼之类的更多的小游戏,如果要做贪吃蛇,是否也能受到一些启示?Scratch程序就是这样一种积木式软件,非常适合中小学生们来玩出自己的动画作品,且声音图形并茂,它的积木,将学生们从繁琐的计算机语言英语语句的压力下释放了出来,可以将更多的精力放到如何去构建自己的创意上。

课后作业

 如何保存自己的积木程序?我建立了一个积木程序,其名字是:小狗,如何找到这个文件,它的特点是什么?  图片有哪几种格式?如何才能在电脑中找到小狗图片,如何使小狗实现走路的动作?  狗狗吃香蕉这个动作在上面的程序中,是如何实现的?声音、影像又有哪些格式,请查阅读一下相关资料。  如何将Scratch程序调成英文版本?  类似的公式1+2=4,如何分析这个最终的结果,结合逻辑判断去分析、学习条件的塑造与应用  本题中用到的坐标系和我们在数学中学到的坐标系有哪些不同点?  把小狗限定在墙角的原理是什么?

 设计一个自己的动画小游戏,在Scratch表演出来并与同学交流。 
 总结通过Scratch制作作品的一般流程及注意事项。

1.3 “狗吃蕉”变“蛇吃鼠” 直到现在,好象还没有开始“贪吃蛇”的工作,其实不然,前面的“狗吃蕉”就是一个变味的贪吃蛇,下面需要将其逐步转化,实现贪吃蛇的效果。但不是一下子进化到“贪吃蛇”,这中间还有一个过渡产物——“蛇吃鼠”。 “蛇吃鼠”的来源是上面的“小狗吃香蕉”,正象两个不同的题目上的文字,只要将蛇来替代小狗,将鼠来替代香蕉,“小狗吃香蕉”自然而然就变成“蛇吃鼠”了。就这么简单。所以,如果遇到一些小狗吃香蕉类似的问题,请继续回头去找答案。当然,复制占很大成分,但又不是百分百的复制。 1.3.1准备工作 本节主要是准备工作,将各种角色和背景布置妥当,为后面的代码部分搞好前期工作,主要有蛇头制作,背景搭配,蛇尾和老鼠放置。其中蛇是利用网络上的图片修改而成的,老鼠则是系统图片中选取的,蛇尾选择了直接画。当然,蛇头和老鼠的制作方法也是多样的,通过上面的几种办法,可以做出自己最终喜爱的角色来。

实例体验:贪吃蛇 创意描述:小蛇贪得无厌,每吃完一块食物身体便增加一节,...... 创意来源: 经典游戏贪吃蛇 制作过程: 此过程中主要设置环境,将与创意案例相关的背景和角色纳入,为后面的代码部分提供素材。通过下面的三步就能搞定。 第一步:小猫变蛇头——主角闪亮登场

图1 打开scratch,会出现图1所示画面,中心主角是一只小猫,这也是软件为什么叫scratch的原因——猫的尖叫声。为了不至于使工作半途而废,先将文件保存,点菜单“文件”中的“存档”,然后选择相应文件夹,并给文件起上名字,本例中的名字为贪吃蛇(如图1所示)。工作区很明显地分成三大部分,最左边的是编程积木存放区,中间是积木代码和角色造型或声音区,最右边是幕布舞台和舞台下对角色的处理。 此步要做的工作是将主角变换一下,由小猫转成蛇头。变换角色并不难,有两种方式,一种是直接在角色文件夹中找,另一种是自己做,由于本例中没有合适的蛇头,所以需首先从互联网上搜索一张蛇的图片,然后截取其头部。

图2 双击小猫角色,然后点击“造型”按钮(如图2所示),点“插入”,找到从互联网上下载的现在的蛇的图片。现在蛇图成了角色的一个造型了,我们只取蛇头部分。先通过X形按钮将前面的两个小猫的造型去掉(如图3所示),再点“编辑”按钮,进入到蛇图象的编辑状态(如图4所示)。

图3 图象编辑器中(如图4),利用橡皮工具,将蛇多余部分去除,只要头部和舌头。在图中主要用到两个工具,一个是橡皮,一个是放大(如图5),橡皮的作用是将除头以外的多余部分去掉,而放大工具是为了调整蛇头,使其在角色图象中比较适中,避免后面运动过程中由于头部过小图像的其余部分影响整体效果。

图4编辑前的蛇图

图5 编辑后的蛇头

现在,蛇的头部有了,但这样还不行,为了最终实现蛇头活动的状态,要用到蛇头的两种造型,通过造型中蛇头角色边上的 “复制”按钮,可以再克隆一个相类的蛇头(如图6示),因为两个造型直接复制是一样的,这样实现不了动画,所以还需要将其中的一个,通过图4的编辑工具橡皮将舌头去掉。另外,还要利用缩小工具将蛇头调整的大小适中(如图6示)。现在小猫转换成蛇头成功。

图6 友情提示:角色与造型要分清,角色包含多个造型,造型是实现动画的分动做。 第二步:小蛇尾巴与蛇的食物——再加两个角色

只有小蛇还不行,因为创意中还需要另一个配角,即蛇的食物,这里我们通过老鼠来完成这个配角。点击图6所示增加角色按钮中间的“从文件夹中选择新的角色”按钮,可以从文件夹animals中选择老鼠(如图7所示)。 而蛇的尾巴可以通过“绘制新角色来完成”(如图7),利用编辑工具中的椭圆,直接画了一个实心椭圆实现此尾巴,点“确定”。这一部分是同“小狗吃香蕉”不太一样的地方,这是为贪吃蛇埋下的伏笔,当然我们也可以在此再放一个老鼠,不过在后面制作贪吃蛇时,需要回过来做出修改。复制是必要的,但更重要的是复制时根据需要适当变通。

图7 到此,三个角色全部完成,三个角色放上后,要利用工具将角色放大或缩小,因为用原始图片相对于整个窗口,老鼠与小蛇可能都有点大,通过缩小按钮再将三个角色调的小一点。

第三步:小蛇的表演场——调整背景

只有角色还不行,还要给角色们一个活动空间,即舞台背景。这里输入现成的背景方法和角色一样,还是选点一下舞台,再通过“输入”按钮来完成,本例的背景选用一个比较喜欢的单一颜色,为什么要用单一的颜色呢?这主要也是为后面的贪吃考虑的,这样比较便于后面实现动画的擦除效果。当然也可以象狗吃香蕉中选风景式图片,到时做贪吃蛇时需回过来修改。 现在,故事的主角配角都有了,不过除了非常零乱地放在一起外,他们之间还没有任何的联系,怎样让经典的贪吃蛇游戏能够表演下去呢?下面该编程积木上场了。

1.3.2简装版贪吃蛇出炉 要制作精彩的贪吃蛇,还要从最简单的版本“蛇吃鼠”开始,从一个痴呆一点的版本,逐步进化,最后形成贪吃蛇。当前的首要任务,是将这个简装版的贪吃蛇游戏搞定。 蛇吃鼠的过程,是针对上面的角色进行创意设计,上次建立的角色们如果没有本次的积木代码,就是呆板图片,通过代码,它们将会一个个活灵活现地表现出来,而为了最终达到活灵活现,首先需要将角色基本的功能实现,即小蛇跑动起来和吃到老鼠,这就是下面要解决的两个问题。

问题一:让蛇头按想要的方向跑起来

让蛇头跑起来简单,在“动作”积木代码中有“移动()步”的积木块,只要填上一个值,就向前移动几步,所以问题是让蛇头按我们要求的方向跑起来,所以还需要控制其走向,即顺时针或逆时针“旋转()度”。只要将这两类积木用好,蛇头最终就可以转了。 那用什么来控制这个方向呢,可以通过鼠标或键盘上的按键,我们就通过空格键来吧,只要按一下空格,就让这个蛇头旋转90度。所以代码也就有了(如图8)。

图8 现在执行起来,蛇头会随着空格键按下后旋转移动,但方向感不太漂亮,所以还需要设定其只能“左右方向转动”(如图8所示)。 另外,这个小蛇还显得不够拉风,只是呆呆地在屏上运动着,造型有两个,所以还需要他在行走的时候不断伸出舌头来,即不断在两个蛇头的伸舌和无舌图片之间变换(如图9示),只要将外观中的“下一个造型”积木拖入即可。

图9

问题二:小蛇吃老鼠

让小蛇吃老鼠的问题,实质上就是蛇头这个角色与老鼠相遇后老鼠消失,就基于这些功能,下面加一下代码。首先双击角色老鼠,然后点代码栏中的脚本。小蛇吃到老鼠即蛇头的图与老鼠的图相遇时,老鼠消失,这个检测在蛇头即角色1的脚本中做可以,也可以做在老鼠的脚本上,归根结蒂还是在不停地检测二者是不是相碰,在老鼠的脚步本中,代码如下(如图10示)。通过这些代码,就可以一次吃掉老鼠。但只是让老鼠出现一次使游戏显得非常弱智,所以还应该让老鼠吃掉后不停地出现。

图10 问题三:让老鼠活起来:出现捉摸不透位置的老鼠 为了继续给小蛇增加老鼠,消失后的老鼠还要在屏幕上再次出现,而再次出现之后,最好其位置还是不能预测的,所以,老鼠位置的代码还要增加,此效果的实现,主要是控制老鼠出现的坐标,让其纵坐标x与横坐标y都改成随机数,随机数就是一种在某个范围内不确实出现哪个数的数,在某一个时间间隔内吃掉的老鼠再随机地即位置不确定的出现,这样就实现了蛇吃鼠的游戏(代码如图11)。

图11 到此为止,一个简单的蛇抓鼠游戏实现。在这个游戏中,通过空格可以调整蛇头的运运方向,每次将顺时针方向旋转90度,当蛇头碰到老鼠时,老鼠将消失即被吃掉,但不久后,一个新的老鼠又在屏幕上出现,可以通过空格控制蛇头继续下一轮吃鼠游戏。这个游戏仅仅实现了蛇吃鼠,距“贪吃”蛇的标准还有差距。后面将研究如何实现“贪吃”。

1.3.3小结 至此,“狗吃蕉”全然变脸,“蛇吃鼠”摆上台面。比较一下二者,相似的地方多,不同的地方也有。其基本的制作过程是类似的,只是在个别地方稍稍不同,第一点是游戏的控制方式变了,前者通过鼠标控制,后者通过空格键控制。老鼠或香蕉消失的方式并无二样,消失后的再次出现更是异曲同工,如果再次蛇头换回狗,将老鼠换成香蕉,两者只是运行的控制方式稍稍不一样罢了。 这就是我们继续改进的原型。有了这个原型,还需要进一步努力,使其最终实现贪吃——即实现贪吃蛇游戏。

课后作业:

 请描述一下贪吃蛇和狗狗吃香蕉有何区别与联系。  在互联网上如何查找一幅和蛇有关的图片,请描述一下过程。

 从程序执行时执行情况的角度,请对积木块的语句重新归类  随机数的特征是什么?如果做一个福利彩票30选7的模拟程序,应该如何做出来?

1.4 “蛇吃鼠”变“贪吃蛇”

蛇吃鼠已经完成,但只有蛇头与老鼠唱戏,距离贪吃蛇的要求还差很远。如何实现贪吃的效果呢?首先需要解决的是蛇的身子问题,蛇不只有头,还有转动弯曲变形的身子,即有尾蛇;其次,蛇身子画出后,还必须因定一个长度,第三,为了实现贪吃,蛇身子又还要随着需要长身子,即每吃完一次老鼠,蛇身子都要有所成长,这样才是贪吃的效果。下面就重点解决这几个问题。

1.4.1有尾蛇产生 问题一:蛇头蛇尾联动,让小蛇产生身子 只有蛇头与老鼠的关系还看不到蛇的效果,需要增加蛇身的效果,蛇身由于要弯曲变形,直接通过角色来完成效果不理想,可以通过画笔来画。 蛇身子本质上就是在背景上涂颜色,为了增加所涂的效果,可以变换几种颜色,涂颜色要用到积木代码中的“画笔”类代码。主要用到“落笔”,这说明开始画东西了,大小和颜色分别通过“将画笔的大小设定为 XX ”“将画笔的颜色设定为XX”,通过移动角色即可向相应的方面画上面指定大小与颜色的图案了,颜色的变化只要将相应的值变化就行了(如图12所示)。

图12

1.4.2定长蛇的秘密 问题二:蛇头蛇尾联动,产生小蛇固定长度的身子

上面的方式可以产生蛇身子,但却不能控制蛇身的长度,怎么处理这个问题呢?可以通过蛇尾来完成将上面产生的颜色擦除,即通过底色将蛇身子处涂掉,间接起到控制蛇的身长。由于这个身长后面还需要随着吃到老鼠的增加而增长,所以要将长度严格控制,也就是需要记住蛇经过的坐标,这样才能实现画出身子后,再将其擦除掉。 所以首先需要定义一个变量“蛇长”,它用来表示蛇的长度。然后定义两个链表“蛇x”与“蛇y”来放蛇身子经过的坐标。上面两种变量都在“变量”积木代码中(如图13所示)。

图13 有了上面的变量与链表,下面就可以调整蛇尾了,蛇尾的目的是在蛇的长度超过蛇规定的长度时将其截短,截短的方法是通过底色将前面画笔涂上的颜色去除掉(如图14所示)。不仅如此,还需要重新调整蛇头的代码,因为蛇尾与蛇头要配合起来,才能共同起到画出定长蛇身的作用(如图15所示)。

图14

图15

1.4.3贪吃蛇就这么简单

问题三:让小蛇吃到老鼠并增加身长 蛇身子出现了,但不变的身子长度还达不到“贪吃”的效果, 如何实现贪吃呢,还需要根据每次捉到老鼠后来增长蛇的身子,因为蛇身子对应于变量“蛇长”,所以只要将老鼠对应的代码做出相应的调整,在每次老鼠被吃掉后使这个量增长,即可实现上述效果,蛇的身子加长了,贪吃的效果也就实现了(如图16所示)。

图16

贪吃蛇还可以贪得更精彩 现在,寥寥数句,一个贪吃蛇小游戏就有了,它的贪吃的基本功能都有,身子可以不断根据吃到的食物增长,可以顺时针方向在空格的控制下转弯,但将它同经典贪吃蛇比比,还有许多东西需要改进和增加,这个贪吃蛇其实还可以变得更精彩,有兴趣的朋友可以接下来继续试一下。 Scratch程序就是这样一种积木式软件,只要用鼠标拖动一下,一个作品就有了。它非常适合初学者玩出自己的动画作品,且声音图形并茂,它的积木,将初学者从繁琐的计算机语言英语语句的压力下释放了出来,可以将更多的精力放到如何去构建自己的创意上。

1.4.4小结 本章的难点不在画出蛇身子,而在蛇身子的固定长度上。本质上是根据头的位置画出蛇身子,而再根据一定长度将多余的部分擦掉。而擦除的过程,从本质上看也是画,只不过是用同底色相同的颜色画出来。这也使得背景的颜色要用纯色且同画蛇身的颜色区别较大,才能使蛇被擦除后不致有印痕。

课后作业 什么是变量?变量有何特征?与数学上的变量有何区别与联系? 什么是链表,它有何特点?

1.5 积木代码功能详解 用了这么多的积木块,具体有什么作用,在什么场合下选择呢?下面详细讲解。对于八类积木块,让其可执行积木的一个重要原则是:外形相似叠加,自上而下执行。 不管什么样的积木,在应用上需自上到下排列,这与实物积木有些相反,执行的过程也是自上而下,先有了上面的积木起作用,才有下面的语句起作用;另一个原则是外形上的可连接,将一个正方形与圆连到一起,一定会有空隙。同样的道理,一类积木与某一类积木必需是可连接的,才能够执行,也就是说,积木不是随便堆积到一起就能执行的,有许多积木与另一些积木是不可连接的,也就是说积木也有一定规则,需细细观察其外形的相似性,利用好这种相似以创造出最佳的能满足需要的组合。 下面将贪吃蛇的全部积木再次集中到一起,以方便大家比较与应用。后面将对八大类积木代码逐一解释对比说明。

1.5.1 贪吃蛇体验积木代码 下图中将在贪吃蛇制作过程中用到的代码都罗列了出来,细细观察一下,也没有多少代码,就用它们,一个活灵活现的小游戏出现了。这些代码还可以简化,当然还可以在此基础上增加功能。有兴趣的读者不妨一试。

图 1.7蛇尾角色代码

图 1.8蛇头角色代码

图 1.9老鼠角色代码 贪吃蛇的积木可分为三大部分,分别对应到游戏中的三个角色,蛇头,蛇尾和老鼠,蛇头是游戏的核心,通过它来调动整个游戏运行,蛇尾是为了实现固定长度的贪吃蛇服务的部分,是这个游戏的精彩所在,老鼠是弱者,代码中最重要的功能是消失与消失后的不确定出现。 这些代码能不能通过别的代码来替代,需要作出哪些改进,这就需要对各种语句有更深入细致的了解。 1.5.2“控制”类语句 什么是控制?控制本质上就是对整个事物有决定权有主导力量。控制类语句或积木块的作用由此可见重要性,其在所有的语句中起到主导作用,是整个程序的骨架部分。这些控制结构,仍然需要其它类语句进行配合,在学习的过程中,要注意同其他语句关联学习。这些积木块或决定程序的开始或终止,或决定某一程序与别的程序的响应,或决定程序内部的某种结构,下面来看一下。

决定程序开始和结束 对于任何程序来说,开始和结束是两个最重要的东西,尤其是开始。在控制语句中首当其冲就是与这两个功能相关的。

图 1.10 控制语句开始

与开始相关的有四个块,这些块的特点是只向下联系不向上联系。其实这四个开始各有特点,首先是通过绿旗执行,这是程序开始的最原始的模式,另外还可通过键盘来控制开始,还可以通过鼠标点击相应角色,当然还有角色之间的交互,接收到某些信息开始。

图 1.11控制语句结束

程序之间交互的语句 涉及两个角色间的信息交互时,可以用到控制中的广播功能和接收功能,所以这种语句是配对使用的,不能单独出现一个。

图 1.12 广播和接收 其中的“接收到”语句也是开始执行的语句之一。在贪吃蛇案例中,蛇头角色和蛇尾角色交互,实现蛇身子的定长。

程序内部结构的语句 最多的语句是和程序结构相联系的语句,这些语句分两大类,分支结构的和循环结构的语句。分支结构的主要有四种,循环结构的也有四种,这四种中,有一种既可看作分支,又可看作循环。 分支结构:

图 1.13 分支结构 分支结构中,前两种是最常用的,第一种只有一个分支,代表符合情况的执行,不符合情况的则不需执行,第二种则分两种解析。六边形中放条件,这个条件在“数字与逻辑运算”语句中会详细解释,看这个条件有两种情况,条件成立和条件不成立。“如果”式的语句,只是执行条件成立时的功能,而“如果,否则”式的语句,则在上面执行条件成立时的功能,在下面执行条件不成立时功能。 最后一个和“如果”式相似,只不过它可能要执行多次,条件成立就重复,条件不成立就结束。所以这个条件其实是利用了分支的特点来实现重复,即循环。 第三个“直到”型的,符合条件则一直等着,只要不符合条件,则就执行下面的东西。

循环结构: 循环结构有四种:

图 1.14 循环结构 最常用的主要是前两种,即“重复执行”和“重复执行()次”,这两个从其外表上看就一目了然,前者可以不停地执行,而后者则只执行规定的次数。或者说只要程序不结束,前者一直处在执行状态,而后者则要根据事先规定好的次数执行这么多次,不可能比它多。这些特点也决定了,前者只能向前承接积木功能,不可能在后面加上功能,而后者则可以向前承接功能,也可以在其后加入语句。 后面两种中,第一种其实是利用分支特点来重复,这个特点是根据条件来判断,符合条件就重复,不符合条件就退出来。后者其实也是根据条件来重复,只不过它是先执行重复内容,然后判断,所以对于同一个条件,从执行次数多少上来看,后者比前者要多一次,这种情况要尤其要注意条件的设定,很容易将条件设得正好相反。

1.5.3“数字和逻辑运算”和“变量”类 此两部分语句是为塑造各种公式和条件而服务的,在控制语句中的条件,就是通过它来控制的。要塑造公式,必然要用到变量,所以两部分密不可分。 变量 变量有两类,一个是单个的变量,还有成组的变量,这两种变量在定义时都涉及一个应用范围,即此变量是对于某一个角色有效,还是对所有角色有效。在贪吃蛇中有一个变量“蛇长”,它的作用是蛇吃掉老鼠后,使蛇的身子增加,因为吃老鼠的判断是在老鼠角色中,而增加蛇身子则是在蛇头角色中,所以变量设置的范围是针对所有角色。 多个变量就是语句中的链表,在贪吃蛇案例中,多个变量用来记录蛇头走过的坐标,这些坐标是后面擦除多余的蛇身子的依据。

图 1.15变量和链表 在图1.15中建立了一个变量a和一个“蛇长”链表。变量只有四项内容,给予一个值,使其值增加,显示和隐藏。其中第一项尤其需要注意,这个与公式相联系,可以实现外形相似而变量内容变化的功效,是实现循环的依据。而链表涉及的内容要多一些,也是增加删除及调用其中的某一项等内容,需要在单个变量的基础上深入理解。

数字和逻辑运算 算术运算

图 1.16 加减乘除运算式 算术运算包括最基本的加减乘除运算,还包括其他的乘方,取余等,这些都有其公式,重要的不是单个的运算,遇到的往往是各种运算符组成的复杂的式子,式子可以通过自身与相互间的组合来实现,运算的优先级也体现在这种组合之中。

图 1.17 其他运算式

关系逻辑运算

图 1.18 关系与逻辑运算公式 条件判断中用到的六边形,其最基本的原型都在这些公式中,即>,<,=,以及“且”和“或”关系,及不成立。那如果要做出一个>=该如何做,可以通过且将>和=公式组合起来。在应用中,可以灵活组合,通过关系运算符>,<,=来组织各种变量和公式,然后再通过“且”和“或”等组织成最终需要的公式。

随机函数

随机是程序中最另类的一种,因为它的魅力在于不确定,随机的不确定也有一个确定的大致范围,积木代码中以整数为基础,可以选定某一个范围内随机出现某一个整数。贪吃蛇中通过随机函数实现老鼠被吃掉后再次出现位置的不确定,因为这个不确定性,增加了游戏的可玩性。

图 1.19 随机函数

其他

图 1.20 字符相关的功能 这几个是与字符相关的功能。因为除了对数值型数据的操作,还可能用到文字。

1.5.4“侦测”语句 顾名思义,此类语句就是探听系统或角色的状态,或角色与角色之间、与鼠标、键盘相关的状态。包括位置检测,声音、时间、键等的侦测。 可分为三大类,第一类与位置变化相关的。第二类与时间、按键、声音相关的,以及其他种类等等。 第一类中,最大的是以现在的角色为依据,将与其可能联系的东西的位置关系进行探测,一个是直接针对距离,另外还可以通过颜色及其名称。还有一些是对鼠标当前位置的测量。需要注意这些侦测的出现形式有圆形的也有六边形的,六边形的可直接成为条件在控制语句中使用,而圆形的则需要不是入到某些六边形的条件中,才能进一步发挥作用。

图 1.21与位置相关的控制类语句块

后面与时间相关的是计时器,只有两种操作,计时器归零和计显器的值。还有针对鼠标键的检测以及某一个键的检测。声音检测有两个,一个是音响值,另一个是声音是否响亮。 在贪吃蛇案例中,老鼠代码中在判断是否被蛇头吃掉时,就用到了这里面的侦测功能,即“碰到角色1”,当前角色老鼠与角色1蛇头是否相接触功能。

图 1.22 按键声音计时等控制积木块 还有与接收屏幕即时输入的信息的设置。这个可以实现在程序执行过程中输入相应的信息。

图 1.23 询问与回答语句块 1.5.5“动作”和“外观”语句 之所以将这两类语句归结到一起讲解,是因为动作和外观是实现动画的基本语句。动作倾向于角色在整个舞台上的表现,是角色的一种整体效果,而外观则对角色内部的特征进行控制,以实现更加生动的动画效果。 与动作相关的命令,有整体移动或控制的,也的通过控制坐标控制的,还有旋转以及与舞台边缘的控制等。外观则包括造型实现动画以及特效,角色间的图层控制以及整体显现和隐藏的效果等内容。 动作语句

图 1.24 动作整体控制语句 动作中整体控制相关的有四句,一个控制移动的速度,即“移动()步”,另外三条来控制动作的方向,根据时针旋转方向可以变化,也可以面向某一个角度移动。

图 1.25 与坐标相关等控制语句 可通过坐标来控制移动,坐标相关的语句有六条,一个是同时控制x,y坐标,还有是分别进行设定。另外,还可针对鼠标指针或其它角色直接移动。 最后一条是在移到边缘部分的一种处理方式。

外观语句 只有动作,实现的动画还是呆板的图片移动,要想实现动画以及活灵活现的动画,外观是进行细节方面的处理。首先需要注意的一个概念是角色和造型的关系,为了实现动画,一个角色需要制造至少两个相似但有差别的造型,以实现某一部分的动画效果,要想动画效果更加逼真,在更多的图片造型上下功夫是值得的。每个造型是编号的,可以直接控制到某个造型。贪吃蛇中通过两个造型实现了蛇头吐舌的效果。与造型相联系的语句块有三个。

图 1.26 造型语句块 另外,图形还可以实现特效变化,有相应的与特效相关的功能调整,涉及颜色,超广角镜、虚像等方面的调整。

图 1.27特效相关的语句块

另外,还有图片大小的调整,以及图片与图片间的层叠关系,即图层等内容。

图 1.28 角色大小与图层语句块

1.5.6“画笔”和“声音”语句 除了上面的几大类,画笔和声音也是很重要的辅助功能,虽然语句不多,但不可少。画笔一一种可通过语句来绘制各类线的语句块,而声音与动画实现的发声要求相关。 画笔就象一支现实中的画笔一样,要画,需要有准备工作,其粗细大小、颜色、什么时候开始画,什么时候停止等相关,需提醒的是,画笔的位置是角色当前的坐标位置。 贪吃蛇案例中对画笔进行了应用,利用画笔来画出蛇的定长的身子。定长身子是用画笔在蛇头后画出来的,而为了实现因定长度,多余的身子又通过与底色相同的的颜色擦除,所以在这个案例中,背景不能用不同颜色的图片,而要用同一底色,这主要是为了擦除服务的。

图 1.29 画笔相关积木块

另外还有声音。与声音类型相关的有录制的内容,也有鼓点、不同乐器的不同音符,还有音量的大小、节拍的调整等,通过起始设置和各个要素的综合平衡,可以得到想要的声响效果。

图 1.30声音相关积木块 将这两种积木块利用好,可以使作品更生动形象,成为优秀的多媒体作品。

1.5.7小结 八大类积木代码,各自有不同的颜色,各有各的功能,但总起来遵循的原则是“相似块可叠加,自上而下执行”,积木块的使用是可以很任意很灵活的,但不是一点规则没有,要设计出符合实际情况的步骤,需要动脑,多思考各种类型语句块的不同点及细微差异。 上面以贪吃蛇案例为辅助的对各类语句的说明,因受这个案例所限,不可能每种语句都用上,在实际应用中,还需要为断尝试,发挥创意。

1.6 提高:手机版“贪吃蛇” 本部分内容作为提高内容,可以在学完第2和第3章后再来学习,而且可以提前多用一下Scratch英文版,这样对其中用到的英文可以尽早熟悉。美中不足的一点是,下面的软件目前还没有中文版本。

1.6.1用积木实现贪吃蛇手机应用安卓版

智能手机成为越来越多用机用户的选择,各种各样的应用程序更是精彩纷呈,对于如何开发自己的应用程序,大部分菜鸟可望而不可即,代码太难了!其实没那么难,有了安卓老东家Google与世界名校麻省理工联合开发的积木程序App Inventor,动动鼠标之间,实现积木的堆叠过程中,一个精彩的应用几分钟就可以搞定了,如果算上系统安装的时间,有一个小时也能就完成安卓程序的开发了。 要实现积木拖出涂鸦程序,先要将自己的电脑环境调整好,这是一个费时费力的活,许多菜鸟在这一步退缩了。其实并不难,只要下面的三步就可将这个问题搞定。

三步开发环境整合 开发环境需要有下面三步要求,前两步是必备的,最后一步是可选的: 第一步:注册一个XXX@Gmail.com账号,这个账户既是电子邮件的账户,也是Android开发者账户,只要在www.gmail.com上选择注册,有五分钟可搞定,过程与一般电子邮件注册过程相似。 第二步:安装java虚拟机。其实许多朋友的电脑上有java虚拟机,因为上网时的网页经常要用到,可到下面地址下载:http://www.java.com/zh_CN/download/chrome.jsp?locale=zh_CN。此步约五分钟就可搞定。 第三步:关于浏览器的选择的,此系统是利用google的云开发环境,程序在浏览器环境下完成,考虑到可用性最好安装chrome浏览器。用别的浏览器也可以。好,有了上面的工作,下面就可以正式开工了。

贪吃蛇游戏制作过程

贪吃蛇游戏是经典的PC小游戏之一,如何将其移植到手机中是许多初学者思考的问题,下面将通过App Inventor开发Android版的贪吃蛇,程序在模拟状态和智能手机Android2.3版本下调试通过。制作的过程分两大步,第一步是制作蛇吃鼠标的游戏,第二步在前一步基础上,进一步实现贪吃效果。

1.6.2最基本原型:蛇吃鼠 制作的过程除了上面的两步,操作的范围有两大块,一是界面窗口,二是代码窗口,两部分需要配合起来使用,前者用来旋转各种组件,后者则用来放置控制组件的代码,这种方法与Visual Basic等语言无异,只是代码部分从结构上成为积木的形式,看起来更加直观。 界面制作过程 进入开发环境 开发环境有两部分构成,第一部分是控件开发窗口环境,第二部分是积木代码窗口环境,两部分开发环境的关系,与VB等开发工具类似,只不过代码的部分不再是英文字母,而是以图片形式的积木块显现,更简单直观易用。 首先,需要登录开发环境:开发环境的链接如下:http://beta.appinventor.mit.edu/ 输入前面申请的gmail电子邮箱用户名和密码,便进入开发环境中,开发环境分两部分,此一部分是界面设计部分(如图1所示)。此部分进入用时不到2分钟,主要问题是此部分是整个开发环境的基础,其中Open the Blocks Editor按钮,是进入积木代码编辑窗口的通道。此部分中的界面是英文的,这是对于大多数开发者的障碍。一般情况下,此部分七八分钟可搞定。 进入App Inventor,界面在界面窗口中进行调整(如图1示),其制作过程如下:用到screen一个,常用控件有8个,Screen1的Title是“贪吃蛇V1.0”。

图1 八个控件中,前三个在Palette中的基本控件Basic中,用到一个Canvas,用来作为蛇鼠争斗的舞台,主要调整两个量宽度与高度,分别为:width是fill parent(适应你窗口),height则是300pixels(300像素)。从palette面板Screen Arrangement(屏幕调整)中将一个HorizontalArrangement拖到Canvas下面,这个的作用是为下面的调整按钮位置服务的,从Basic中拖出两个的按钮Button,Button1的text为“方向控制”,它用来控制蛇头的移动方向,Button2是用来控制游戏进度的,其text为“重新开始”。在Cavas中放入两个Animation中的imageSpite,名称name分别改为imageSpiteSnake和imageSpriteMouse,这是将来的蛇头和老鼠。需要调整picture属性为相应的蛇头的图片和老鼠图片。此外,还需要两个Basic中的Clock控件,分别用来控制蛇移动的时间间隔和老鼠被蛇吃掉后隐蔽的时间,这两个Clock的Timerinterval来调整时间间隔。 界面完成后,可以加代码了。

代码制作过程

要转到积木代码编辑窗口,需要点Open the Blocks Editor,出现下载AppInventorForAndroidCodeblocks.jnlp文件的提示,先下载此文件,然后找开文件。点击Open the Blocks Editor,下载第一步中的knlp文件并将其打开,即可进入积木代码编辑窗口。如果打不开,可能是前面安装的过程中,java虚拟机安装有问题,需重新安装,并测试。 简版的代码主要分五大块,即图2中所示的五大部分,是基本功能完成时的代码,即能够实现蛇吃老鼠,并且蛇可以有一条一直存在着的身子。最开始可以不要求蛇的身子,只是蛇头能动,然后在动的基础上,能够与老鼠互动,即实现蛇吃鼠,第三步再加上能够划出蛇身子来,刚开始可以长度无限长,后面再进行限定长度。所以,即使对于这个原型,也可以找出更简洁的原型来。

图2 五大块代码中的1和2分别代表按钮Button2“再来一局”和button1“方向控制”。前者通过调整heading的值以改变蛇头走向(如图3示),0度代表正前方,减一个-90度则表示方向逆时针转向,方向成为正上方,所以通过这个按钮可以保证蛇头有四个方向,但只能是每次逆时针方向转,也就是说从向前到向后,需要按两下键,从向前变成向下,则需按三下键。后面可以通过增加按钮顺时针的方向,来改善按键效果,为了简化,本例中只用这一个按钮。 Button2中代码简单,是将Cavas里的内容清除clear(如图4示)。

图3

图4 Clock1中的代码是重头戏(如图5示),它与Clock2(如图7示)配合起来,实现蛇头的走动,并可以吃掉老鼠,当然还有蛇头后面的画出的身子。蛇头走动通过控制蛇头imageSpriteSnake的speed的值来调整,如果这个值越大,则越快,本例中用的是10。画出蛇身子是通过调整Cavas1的画点功能来实现,即Canvas1.DrawPoint,要用到两个坐标,正好是蛇头的x和y坐标,为了衔接得更加惟妙惟肖,可以对这两个坐标值稍加调整大小,画点有大小还有颜色,通过paintColor可调整颜色,现在调整的颜色值是红色red,大小通过lineWidth来调整。 蛇吃老鼠的实现,说白了就是比较蛇头与老鼠两者的坐标,为了更加灵活一些,这两个坐标不能绝对相等,要有个活动的余地,图5中下面的if else then do就是起到这个作用。Clock1中的代码实现了绝大部分的功能,Clock2只是配合一下,在蛇头与老鼠碰到一起后,使老鼠暂时消失几分钟。所以在加代码时,还需要配合调整一下两个的TimerInterval属性,Clock1的调整为100,而Clock2的调整为4000,这个数字都是毫秒,前者是0.1秒,后者是4秒,还要把Clock2的|Clock2.TimerEnabled初始值设为false。

图5

Clock2中用到一个自定义的过程MoveMouse,图6是其代码,其作用是使老鼠被吃后,以难以抓摸位置的方式在屏幕上出现,这种方式通过随机数Random integer方式出现。为了实现老鼠消失,只要控制ImageSpriteMouse.Visible属性即可,将其高为false则消失,设为True则重新出现。

图6

图7

模拟联机调试和下载

这样还不能说明我们的程序是完好的,如果有手机,可以联上手机,当然也可以通过模拟器来调试。打不开,则需要执行下面的操作: 下载并安装App Inventor Setup Software Package安装包程序,其下载链接如下: http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_2.exe 通过安装下载的安装工具包,现在图2中上部的New Emulator按钮,即起到模拟的作用,这个过程可能要长一些,视电脑配置情况和网络联接速度而定,当然,也可以下载更大号的Android SDK开发者工具包,这里面有更多的类型的安卓手机模拟器,只不过这里面的有些模拟器运行时间会更长,有些可能受微机性能限制不能用,相比起来,还是这个更简便一些。此按钮后面的Connect to Device会出现相联的手机或手机模拟器,通过这上面的联接功能,可以将现在的程序联机手机进行调试。此部分视调试电脑与手机的情况,时间长短不一,一般有半小时就可搞定。此外,调试好的程序还可下载到手机上,成为我们自己的应用,通过图1主界面窗口中Package for Phone中的Download to Connected Phone可以将应用程序下载到相应的安卓手机上。

1.6.3 改进原型后:贪吃蛇 界面调整

为了使贪吃蛇更加好玩,对界面进行了微调,增加了一个按钮(如图8中6所示),可以使蛇头顺时针和逆时针两个方向旋转。

代码调整:固定身子长度的蛇吃鼠

代码调整,在贪吃效果实现之前,需先实现身子定长,所以先设定身子长度的变量SnakeL,其初始长度定为10。定长的实现需要对蛇头经过的路线准确定位,定位用到蛇头所走的X坐标和Y坐标,通过设置两个List型的多变量列表,来旋转10个x坐标和10个y坐标的值(如图8中 7所示)。

图8

重点变化在Clock1中的代码,即3中的代码。其中要用到加入蛇头坐标的部分,而超过规定蛇长度10后,还需要将第一个坐标去除,然后再加入新的坐标,而第一个坐标去除之时,这个坐标位置又是擦除蛇身子的关键点。先将蛇身子定长为10,那么在坐标数量小于等于10时,需不断加入坐标,一旦超过10个,即从第11个开始,就需要以第一个坐标为基准,将这个最早的坐标擦掉,然后将此坐标去掉,加入新的坐标。所以此部分代码较上一个版本蛇吃鼠中代码有所增加。 蛇头是按照一定时刻间隔来走动的,每走动一次,首先即增加了上面的判断过程,判断的依据是蛇身的长度SnakeL,刚开始的值是10。增加坐标用到add items to list,因为分别有两个代表x和y坐标的list,所以需要用到两次,加入的值就是蛇头所在位置的x和y坐标值。如果超过SnakeL的值,则需要将最早的坐标值,即第一个坐标值为依据探险蛇身子,所以这里PaintColor需要用到底色,本例中是白色white,然后将这个坐标从list中去除,即用到remove list item,这里需注意的是index的值是1,即最早的那个坐标。 这个过程不断重复中,就实现因定身子长度的蛇吃鼠了,有了这个版本,离贪吃的蛇吃鼠就只有一步之遥了。

图9

贪吃效果实现:不断增长身子长度的蛇吃鼠 在蛇吃掉老鼠后,蛇的身长会增加,所以,只要在这种情形下,控制SnakeL的长度,使其增加就可以了。所以只要把Clock2.Timer中的代码稍作变化就行了,在其第一句加上使SnakeL增加的语句,set global SnakeL to SnakeL + Number 5,此句可使每次身长增长5。至此,贪吃蛇基本实现。

图10

1.6.4改进和小结 此版本贪吃蛇在运行的过程中虽然能够吃掉老鼠,也能够身子增长,但有许多不尽如人意的地方,首先,再来一局的初始化还需注意,身子的初始长度即SnakeL应做相应的调整,需变成初值10,其次,蛇在碰到自已的身子后,坐标值的颜色会初提前去掉,所以会出现断尾蛇,另外,智能手机是有声音的,为了更生动,可以加上音效。 美中不足是这个版本现在还没有中文版,这也是好事,因为积木的原因,代码没有想象的难。只要用心,完全可以做出来。 另外,可以比较一下Scratch中代码与AppInventor中代码的相同点与不同点,二者相比较,后者功能与设置上更加完备。

1.7本章小结 为了体验用积木来编程,本章介绍了经典游戏“贪吃蛇”的制作过程,请注意这里的“制作”,只要按照提示,任何人都可以做出来,就这么简单。能照葫芦画出瓢来,是一种功夫,需要耐心和模仿,这是学一样东西的基础。 这种模仿是从简单到复杂的,先有了“小狗吃香蕉”,而后从它转到“蛇吃鼠”,再往后从“蛇吃鼠”到“贪吃蛇”。两个转化的过程,最重要的功夫是复制,在复制的过程中不是生硬的拷贝,而是需要动脑筋,结合实际情况适当转弯。 只有复制和简单的思考这一点还不够,这样不能使我们在此基础上创新,运用所学,还需要对其内部进行思考和理解,如果没有这一步,只能停留在“蛇吃鼠”的阶段,我们可以看到,在“贪吃蛇”的阶段,其中“变量”的作用不容小视,这也是较难理解的地方所在。这些变量有体作用,如何在其他的程序中应用,如何根据情况作出不同的选择,后面的章节将回答这些问题。 本章的体验之旅,是学编程的第一关,也是第一次或第一遍的体验,即对积木式代码进行复制和模仿。