
1.3 离线第1个Scratch小游戏——小猫追球
前面我们通过在线的方式,简单介绍了一个小动画的制作方法,聪明的你相信已经跟着老师学会了。接下来我们制作一个离线的小游戏:小猫追球。

1.3.1 什么是离线
Scratch除了通过浏览器在线制作的方式外,同时还给大家提供了离线编辑的工具,可以直接安装到电脑上,这样即使不能随便上网也能随时做设计。
1.3.2 Scratch离线编辑工具的下载与安装
Scratch官方网站下载网址为https://scratch.mit.edu/download。
Scratch离线编辑工具早期一共有两个版本,即Scratch 1.4与Scratch 2.0。自从2019年开始,Scratch官方正式启用Scratch 3.0的版本,所以本书也直接使用3.0最新离线版本。

点击“下载”按钮,选择下载到本地的哪个地方,再点击“下载”按钮进行下载。

下载完成后,通过点击按钮进行安装。

安装完成后自动弹出以下界面。

选择“No, thanks”后进入主界面,Scratch 3.0离线版安装完成。
1.3.3 Scratch儿童编程区块详细介绍
Scratch 3.0主界面分为8个区,分别是:主菜单与选项卡、积木区、脚本区、造型区、声音区、舞台、角色区、舞台控制区。下面我们将对每一个区进行详细介绍。

1. 主菜单与选项卡
主菜单中含有常用的文件菜单,可以新建项目,把保存在电脑的文件上传到项目中进行修改制作,也可以把做好的项目保存到电脑中。
选项卡主要分成“代码”“造型”“声音”。“代码”选项卡可以调出积木区,提供脚本编写的各类积木;“造型”选项卡可以进入图形制作区,修改、制作各个角色外观、动作;“声音”选项卡可以进入声音选项,为角色提供声音播放功能。
2. 积木区
Scratch 3.0积木区主要分了9大分类模块,分别是运动、外观、声音、事件、控制、侦测、运算、变量、自制积木。从3.0开始,积木区分类的下面多了一个“添加扩展”的项目。如果你以前用过2.0版本,就会发现少了画笔的模块,因为它已经被放到扩展项目里了。扩展项目内除了画笔,还有各种高级的功能模块,包括音乐、视频侦测、文字朗读甚至还有乐高机器人的一些相关控制模块,3.0版本功能更强大也更具有兼容性。

点击“画笔”这个模块后,积木区就会多了一个【画笔】的分类模块,我们就可以直接使用里面的功能了。

积木区内每一片积木都相当于是一条指令,你可以试着给你的角色添加一块积木,例如运动区内的【移动10步】,点击一下这片积木,角色就会移动10步,再点击,再移动10步。积木之间可以组合起来,赋予角色更丰富的行为。积木上白色图形内的数字或文字叫参数,是可以根据需要进行修改的,具体可以在后面的章节有更多机会使用。
试一试
尝试把动作的【移动10步】与外观的【说你好!】组合起来,并交换它们的组合顺序,看看角色有什么变化。再试着修改一下积木的参数,看看角色又有什么变化。
3. 脚本区
让角色能够按照我们的想法行动起来,只有角色是不够的,还需要给它发出一系列的指令,我们需要给它编写程序,在编程前先选择对应的角色或舞台,然后把积木从积木区拖到脚本区,各个积木的组合都需要在脚本区内完成。Scratch采用积木式的编程方式,与基于文本的编程语言相比,最大的好处是可以避免输入不当引起的语法错误,避免初学者因为遇上大量的错误调试而降低学习的热情。

在拖动积木时,当这块积木靠近一块积木时,显示一个灰框,表现两块积木能合并在一起。
注意
在制作项目的过程中,通常不是把所有积木都拖动完了才去试着让角色动起来,而是拖动几块,点击一下积木试试角色的反应。我们把这个叫作调试。在调试过程中,可以告诉角色是不是初步按照我们的想法行动,避免了把所有积木组合后如果角色不按我们的想法做再重头开始调试的麻烦。
4. 舞台
舞台是角色移动、绘画、交互的场所。舞台宽为480步长,高为360步长,中心点是X=0,Y=0 。X轴为-240到240,Y轴为-180到180。

舞台左上角摆放了用于运行程序的绿旗和停止程序的红点按钮,右上角分别是缩小舞台尺寸、常规舞台尺寸、最大化舞台按钮。
5. 角色区
角色区用于添加角色、删除角色、修改角色属性(属性包括角色的名字、舞台的位置、角色的大小和方向、是否显示等)。当修改角色方向时,系统还提供一个方向罗盘,除了可以通过转动罗盘修改角色的方向。

试一试
在舞台拖动角色,观察一下角色区X和Y的变化,把大小100改成200,把方向从90改成180,看看角色的变化。
6. 造型区
在造型区内,可以对角色、舞台进行制作或修改。例如,一个角色可以有多个造型,准备多个造型的目的是在某些脚本运行下切换到合理的造型。我们尝试一下,点击左边第2张造型进行切换,就能看到小猫另一个走路的姿势;再尝试在左边的一个造型上点击右键,使用复制,这样就又多增加了一个造型,可以尝试用右边提供的功能调整一下这个造型。造型区的功能相当于小朋友平常用的画笔工具,相信大家多尝试一下,就能运用得很好了。

7. 声音区
角色除了动作、造型外,还可以发出声音,这样你做出来的角色和动画都会栩栩如生。例如,当角色很高兴或是很伤心的时候,发出来的声音是不是都不一样呢?敲钟的声音和打鼓的声音是不是也不一样呢?这些声音都会让程序更生动哦!

声音区提供上传本地wav或mp3的声音文件、通过电脑麦克风录制音频、在Scratch提供的音乐库中选择音乐、编辑音乐等功能,这里就不做详细介绍了,大家可以自己尝试一下。
8. 舞台控制区
舞台控制区提供舞台背景上传、从库中随机或人工选择、进入编辑背景等快捷功能。
1.3.4 小猫追球游戏介绍
上面介绍了关于Scratch 3.0各类常用功能区的基本功能,下面我们开始动手制作小猫追球这个游戏。

1. 游戏玩法
小球是始终跟随着鼠标位置移动的,而小猫则会不断面向小球方向并向小球移动。
2. 素材准备
直接从角色库调出角色Ball和Cat 2。

3. 制作详细步骤
在角色区加入Ball和Cat 2两个角色。
选择角色Ball,从积木区选择事件,把【当绿旗被点击】的积木拖到脚本区,选择运动,把【移到鼠标指针】卡合起来,点击绿旗测试一下,Ball只移动了一次。这是因为【移到鼠标指针】只是一次的指令,如果我们想让它持续保持跟踪移动,就需要不断重复移动的动作,这就用到了积木区控制里面的【重复执行】积木。因为我们是重复【移到鼠标指针】这个动作,所以把【移到鼠标指针】卡合到【重复执行】里面。

选择角色Cat 2,如果觉得这种叫法不好,可以改个名字!修改角色区左上角角色旁边圆角距形里的字就可以直接改名了。这里告诉大家一个小知识,这类圆角距形通常被称为输入框。例如,我们把名字改成“小猫”,那么这个角色在程序里就叫“小猫”啦!

改好名之后,我们现在开始给小猫写程序了。当然,也是从点击绿旗开始,所以首先放的还是【当绿旗被点击】,然后小猫需要面向小球,在积木区里选择【运动】,找到【面向鼠标指针】(“鼠标指针”旁边是有一个白色下三角按钮,表示除了鼠标指针,我们还可以选择其他角色),点击下三角按钮,显示两个选项,找到Ball这个角色,选中它!

小猫面向Ball后,就需要追过去了哦!我们再从【运动】上找一块合适的积木,例如【在1秒内滑行到随机位置】,把它拖到脚本区与上一块积木卡合在一起,然后我们可以点击下三角按钮,还是选择Ball。试着点击积木,看看小猫是不是追过去了。

当你把Ball拖到另一个地方时,小猫不看也不追了!为什么小猫就只追一次呢?跟小球开始时只跟鼠标一次的道理一样,因为我们只给了它一次的指令,如果想要小猫一直追球,那么面向Ball和追Ball的动作就需要不断地重复了,所以我们还是需要用到【控制】里面的【重复执行】积木。

现在,点击绿旗开始,把小球不断移到别的地方,小猫也追着小球跑了。这个小游戏就这样做出来了,是不是很简单呢?
1.3.5 开动大脑拓展一下
我们可以通过调整哪一块积木让小猫跑得慢一点呢?