最新消息:

Scratch编程之飞机大战

Scratch 少儿编程 4825浏览 1评论

友情提示:视频教程观看时请手动设置清晰度。

写在开始

Scratch是麻省理工学院的一个团队研发的一款面向少儿的图形化的软件设计和开发工具,团队自称为“Lifelong Kindergarten Group”,可以理解为”终身幼儿园团队”。几乎所有的孩子看到这个软件都会一眼喜欢上它,进而建立起编程的欲望。
Scratch的官方网址:https://scratch.mit.edu
作为一个软件教育培训从业者,在尝试使用Scratch编写了一些程序后发现这款软件其实不仅仅适用于小朋友。对于很多跨行业学习编程的成人,这款软件也能提供让无基础的学习者理解软件编程中的一些概念。
比如,我在给很多跨行业学习编程的成人学员讲解“循环”概念时,一些学员往往需要一段时间来理解下面的这部分Java代码,对于从0开始计数的边界值问题,初学者往往也很头疼。

for(int i = 0; i < 10; i++){
    SySTEM.out.println("你好")
}

如果换成Scratch来表述上面这个循环10次输出你好的功能,可能只需要两块“积木”

 

01.Scratch飞机大战
输出10次你好

 

这往往很容易理解。

所以我决定将我之前基于Scratch编写的一个飞机大战的小程序写一个教程,提供给需要了解Scratch的人。如果你读完整篇文章觉得对你有帮助,请别吝惜你的喜欢,谢谢。


Part 1 开始scratch编程

首先,我们需要一个编写Scratch的工作环境,可以选择在线开发或者下载离线IDE工具

  • 在线开发环境:https://scratch.mit.edu/projects/editor/?tutorial=getStarted
  • 下载离线工具:https://scratch.mit.edu/download

下载离线工具时请选择对应的操作系统版本

 

01.Scratch飞机大战
选择操作系统版本和下载

下载后正常安装软件即可。

打开在线开发环境或打开离线工具进入编程主界面

01.Scratch飞机大战
开发界面介绍

试着做一个小功能

  1. 从左侧的积木中找到“事件”中的“当旗子被点击”,拖动到中央空白处
  2. 从左侧的积木中找到“运动”中的“移动10步”,拖动到中央空白处,将数字10改成100
  3. 将两个积木组合到一起,如下图
01.Scratch飞机大战
组合两个积木

点击右上方的绿色旗子

 

01.Scratch飞机大战
点击旗子开始执行

屏幕中的小猫朝着面对的方向移动了100步

 

01.Scratch飞机大战
小猫移动了100步

虽然很多积木你还不了解怎么用,但Scratch的基本操作你已经掌握了。随着深入的学习,你可以了解更多的积木的用途,从而搭建出更复杂的程序。


Part 2 背景和角色

2.1 背景
2.1.1 选择预设背景图片

首先,我们需要为项目添加背景。游戏的故事背景,呃…是在宇宙中吧,那么我们可以自己选择一张喜欢的宇宙背景或者是工具中预设的背景。
此处我选择了工具中预设的Stars背景
鼠标移动到右下角的选择背景按钮上,点击“选择一个背景”

01.Scratch飞机大战
选择预设背景

在打开的窗口中选择喜欢的背景,此处我们选择“Stars”

01.Scratch飞机大战
选择了Stars背景

可以看到小猫所处的背景已经更改为Stars的效果

 

01.Scratch飞机大战
背景更换效果
2.1.2 上传自定义背景

点击“上传背景”,上传自己喜欢的图片作为背景

 

01.Scratch飞机大战
上传背景

这是上传背景的效果

 

01.Scratch飞机大战
上传背景效果
2.1.3 删除不使用的背景

右下侧“舞台”可以管理所有已设置的背景。
点击当前背景(下图中的“背景3”)

 

01.Scratch飞机大战
点击舞台背景

整个工具编程了背景设置界面。
此时点击下图上方的选项卡可以在“代码”,“背景”和“声音”之间切换
左侧红框内是已经设置好的三个背景,分别是“预设的空白背景”,“Stars”和“上传背景”。可以点击左侧背景小图标上的x进行删除。

 

01.Scratch飞机大战
界面变化

 

此处我们删除背景1(预设的空白背景)和背景3(本地上传的背景),只保留我们需要的Stars背景

 

01.Scratch飞机大战
删除多余的背景

现在我们完成了背景的设置

2.2 角色
2.2.1 删除预设角色

此时点击右下方工作区的小猫(角色1),点击x删除小猫角色

 

01.Scratch飞机大战
删除预设的小猫角色
2.2.2 添加预设角色

点击右下方的角色按钮可以添加系统中的预设角色

 

01.Scratch飞机大战
选择角色
01.Scratch飞机大战
选择喜欢角色

我们此时不需要使用预设角色,可以点击左上的“返回”回到编程页面

2.2.3 上传角色

点击“上传角色”从本地计算机中上传绘制好的角色图片。
本小节结尾处有资源链接

01.Scratch飞机大战
上传角色

我们上传了资源“craft_player.png”,效果如下。

 

01.Scratch飞机大战
新的角色

可以看到资源在整个背景下非常大,方向是朝向右侧。通过调整上图红框的“大小”和“方向”来更改飞机的显示大小和朝向。
使用鼠标拖动屏幕的飞机可以更改飞机的位置

 

01.Scratch飞机大战
调整后的效果

最后我们依次上传其他角色并调整大小和方向

 

01.Scratch飞机大战
上传所有角色并调整

背景和角色我们设置完成

角色图片资源请访问百度网盘
链接: https://pan.baidu.com/s/1YDEM-yr4wqriEuoOY9BwRw 提取码: fmw9


Part 3 坐标,事件及运动

本小节主要是添加家控制的飞机角色(craft_player)的相关动作和时间
选中角色craft_player,我们需要将它控制在屏幕底部,并且可以在按下←键和→键时可以在底部左右移动

坐标

首先,我们需要确定整个屏幕的坐标,scratch设置屏幕中心为坐标原点(0,0),x轴正向为右,y轴正向为上,具体见下图。

 

01.Scratch飞机大战
坐标系

 

如果我们想让craft_player在屏幕底部,通过设置合适的坐标即可

 

01.Scratch飞机大战
设置craft_player在屏幕下方中间
初始事件

在craft_player的代码选项卡中添加“事件”积木

 

01.Scratch飞机大战
初始事件积木

 

我们希望当游戏开始时,craft_player能在屏幕的底部中央,刚才已经得出坐标应该是(0,-150)
所以我们希望当初始事件执行时,我们的飞机在那里,通过在运动中找到如下两个积木,这两个积木的主要作用是设置craft_player的坐标位置。

 

01.Scratch飞机大战
设置坐标位置积木

我们此时将craft_player的x坐标设置为0,y坐标设置为-150,并与初始事件积木组合到一起

01.Scratch飞机大战
积木组合

这个“事件”积木表示当按下键盘上的某个按键时发生的事件

 

01.Scratch飞机大战
按键积木

此处我们将其改为按下←键触发

 

01.Scratch飞机大战
按下←键触发事件

找到“动作”中”将x坐标增加”的积木

 

01.Scratch飞机大战
增加x坐标积木

将它与按下←键的积木组合到一起,并调整数值,当按下←键时,x坐标是一直减少的,所以将积木中的数值设为-10。

 

01.Scratch飞机大战
组合积木

此时点击绿旗子开始,按下←键会发现craft_player可以一直向左
同理,按下→键的功能类似,只不过是需要增加x坐标

 

01.Scratch飞机大战
组合积木

整体代码,此处无法上传动图显示效果,可以点击←键和→键控制飞机在底部移动。

 

01.Scratch飞机大战
完工效果

Part 4 循环控制和显示隐藏

接下来我们进行craft_player发射单个子弹的操作
首先选择角色“bullet_player”

 

01.Scratch飞机大战
选择bullet_player角色

在中间空白处开始编程,当游戏开始时让子弹在craft_player角色的机头位置出现。
选择初始事件积木

 

01.Scratch飞机大战
初始事件积木

选择“运动”分类中的“移到随机位置”积木

 

01.Scratch飞机大战
移动位置积木

选择为“移到craft_player”位置

 

01.Scratch飞机大战
移动位置积木

将两块积木组合至一起

 

01.Scratch飞机大战
积木组合

点击绿旗子开始后,显示效果如下

 

01.Scratch飞机大战
显示效果

bullet_player(子弹)与craft_player(飞机)位置重叠,我们需要调整bullet_player的坐标,使其向上移动,根据上一小节坐标的描述和实际情况我们调整如下

01.Scratch飞机大战
调整子弹在玩家y坐标上方30的位置

这样子弹就在飞机的上方出现

 

01.Scratch飞机大战
实际效果

接下来让子弹动起来,子弹每隔一小段时间应该继续向上移动。
此处我们使用“重复执行”控制,让子弹不断的去调整自己的y坐标,直至屏幕顶部。

 

01.Scratch飞机大战
重复执行调整子弹y坐标

实际效果(无法以动图方式演示),注意下图红框内子弹已发射至屏幕顶部

 

01.Scratch飞机大战
子弹发射至顶部

此处可以选择有条件的重复执行,当子弹坐标高于180时隐藏子弹
首先找到“运算”中的“大于”比较

01.Scratch飞机大战
大于比较

在“运动”中找到“y坐标”

 

01.Scratch飞机大战
y坐标

组合积木并调整为“y坐标>180”

 

01.Scratch飞机大战
组合积木调整比较内容

在“控制”中找到“重复执行直到”积木

 

01.Scratch飞机大战
有条件重复执行

组合“重复执行”和“y坐标>180”积木

 

01.Scratch飞机大战
组合积木

替换之前的无条件重复的积木,最终积木组成如下

 

01.Scratch飞机大战
组合积木

在,事件开始时添加“外观”中的“显示”,在结尾添加“外观”中的“隐藏”

01.Scratch飞机大战
完整实现

现在我们完成了单个子弹发射的功能


Part 5 克隆体

上一小节我们讲了如何发射一颗bullet_player(子弹),本小节我们利用克隆功能完成子弹的自动发射功能
首先点击craft_player角色,查看代码。找到“控制”中的“克隆”积木。这个积木的作用是复制某个角色。

 

01.Scratch飞机大战
克隆积木

 

子弹是一直发射的,所以我们找到“控制”中的“重复执行”积木,并将两者结合,调整“克隆”积木为“克隆bullet_player”,如下图

 

01.Scratch飞机大战
组合积木

将这部分积木与原有的积木组合

 

01.Scratch飞机大战
组合积木

点击绿旗子执行的效果如下

 

01.Scratch飞机大战
执行效果

 

可见子弹生成的间隔太短,所以很密集。
调整“重复执行”中的代码,让子弹的生成有一定的间隔,找到“控制”中的“等待x秒”积木,调整数值,组合积木如下

 

01.Scratch飞机大战
组合积木
01.Scratch飞机大战
执行效果

但现在有个问题,移动飞机后,发现子弹没有移动

 

01.Scratch飞机大战
执行效果

原因在于bullet_player中的代码,是当“绿旗子”触发时,才执行一系列操作,飞机移动时,克隆的子弹并没有随着飞机移动。

 

01.Scratch飞机大战
原积木组合

原因找到了,主要是触发的事件不正确,在craft_player(飞机)角色中我们不断的克隆了bullet_player(子弹),所以子弹中应该以“当作为克隆体启动”事件触发,我们将触发“事件”由“初始事件”改为“当作为克隆体启动”。同时当子弹隐藏时,将克隆体(自身)删掉
如下图

 

01.Scratch飞机大战
新积木组合

可以看到执行效果,子弹可以随着飞机移动生成了

 

01.Scratch飞机大战
执行效果

Part 6 广播

接下来,这个小节我们介绍如何生成敌机
利用之前所学的知识,我们可以很容易的生成敌机
选择craft_enemy(敌机)角色,先点击“隐藏”,将角色本体隐藏。

 

01.Scratch飞机大战
隐藏敌机本体

 

同理,bullet_enemy也可以以此方式隐藏

在craft_enemy(敌机)的编程区域完成积木组合,当“初始事件”开始后,“重复执行”,每隔3秒“克隆自己”
积木组合如下:

 

01.Scratch飞机大战
积木组合

接下来,当敌机作为克隆体出现时,我们需要控制它在随机位置的顶部出现,出现后每隔一段时间向下飞行一段距离,直至到达底部,完整积木组合如下

 

01.Scratch飞机大战
完整地积木组合

 

上述积木组合用之前小节所学的知识完全可以自行实现。

Part 7 变量

如果按照之前的发射玩家子弹的方式编写,是不可行的,因为玩家控制的飞机(craft_player)在整个屏幕中只有一个,而敌机(craft_enemy)是克隆体,在屏幕中可能同时出现多个。
解决办法是我们通过敌机克隆体发射子弹时向一个公共变量赋值,敌机子弹(bullet_enemy)的克隆体通过访问公共变量进行初始化
首先我们在“变量”中“建立一个变量”,名字是ex

 

01.Scratch飞机大战
新建变量

 

这个时候可以看到下面有两个选项

  • 适用于所有角色:这个变量存储的数字可以在不同角色间访问,用于传递数据。
  • 适用于当前角色:这个变量只限当前角色,不能在角色间共享。
    可以理解为它们分别是“全局变量”和“局部变量”
    同时我们也建立“全局变量”ey,这样通过两个“全局变量”ex和ey将敌机(craft_enemy)发射子弹瞬间的坐标记录,让敌机子弹克隆体(bullet_enemy)去访问坐标完成自己初始化的操作

    01.Scratch飞机大战
    建立变量ex和ey

在敌机的移动逻辑中添加生成子弹的积木,敌机(craft_enemy)角色修改后的全部内容如下

 

01.Scratch飞机大战
敌机角色craft_enemy完整积木

设置敌机子弹(bullet_enemy)角色的全部内容如下

 

01.Scratch飞机大战
敌机子弹bullet_enemy完整积木

实际运行结果如下,可以看到敌机的子弹非常密集

 

01.Scratch飞机大战
运行效果

这是主要由于移动和生成子弹的间隔都是0.05秒

 

01.Scratch飞机大战
问题原因

解决这个的办法是,我们可以利用一个计数器变量,再“重复执行”中进行累加,即每隔0.05秒计数+1,当到达20的倍数时,我们再执行克隆子弹的操作,0.05×20 = 1秒,也就是说子弹可以每隔1秒才发射一次,但移动还是每隔0.05秒进行移动
简历一个“局部变量”用于计数器,名字是count

 

01.Scratch飞机大战
计数器变量

调整敌机(craft_enemy)角色的积木如下

 

01.Scratch飞机大战
调整后的敌机角色积木组成

运行效果

 

01.Scratch飞机大战
敌机发射子弹的时间间隔变长

至此,敌机的生成和子弹发射全部完成


Part 8 侦测和逻辑组合

我们希望当子弹碰到敌机时,敌机毁灭。这个时候我们需要检测当我们子弹在飞行时,是否碰到了敌机。此时我们需要在bullet_player(子弹)的飞行过程中进行检测
此时我们可以认为某个子弹在以下两种情况下会消失

  • 没有碰到敌机,飞出边界。这部分功能我们已经实现了
  • 碰到敌机,敌机毁灭,子弹消失。
    两者满足其一即可,此时我们需要进行逻辑判断

与,或和非是编程中最重要的三个个逻辑

  • 与:( 条件A 与 条件B )表示两个条件必须同时满足
  • 或:( 条件A 或 条件B )表示两个条件满足其一即可
  • 非:( 非条件A)表示与条件A相反

体现在积木中是“运算”中的如下三个积木

 

01.Scratch飞机大战
与,或和非

此时,子弹(bullet_player)角色在飞行中的重复执行条件需要进行更改
原来的积木组合如下

 

01.Scratch飞机大战
原有积木组合

此时需要多加一个“或”条件,更改如下

 

01.Scratch飞机大战
添加”或”条件

另一个条件是子弹(bullet_player)角色碰到了敌机(craft_enemy)角色。在“侦测”积木分类中可以找到“碰到xxx”积木

 

01.Scratch飞机大战
碰撞检测积木

选择后组装积木得到积木组合如下

 

01.Scratch飞机大战
bullet_player组合

运行效果

 

01.Scratch飞机大战
子弹碰到敌机不会穿过

同理,将敌机子弹(bullet_enemy)角色修改当碰到飞机(craft_player)时也消失

 

01.Scratch飞机大战
敌机子弹(bullet_enemy)完整积木组合

Part 9 外观控制

当敌机(craft_enemy)被子弹击中时,应该触发销毁效果。
我们首先需要做的是,为敌机设置一个局部变量表示生命值(health),当敌机被子弹击中后减少它的生命值,直至生命值为0停止继续飞行并销毁敌机
利用之前小节提到的变量声明使用,碰撞检测和逻辑条件组合,修改敌机(craft_enemy)的积木如下

 

01.Scratch飞机大战
敌机craft_enemy的代码

上传敌机毁灭的造型

 

01.Scratch飞机大战
造型窗口

选择资源文件上传

 

01.Scratch飞机大战

添加代码当敌机生命值为0时,产生旋涡特效并切换为毁灭状态。
每个0.02秒敌机模型旋转15,执行4次后切换为毁灭状态,停留0.3秒后消失

 

01.Scratch飞机大战
切换特效

完整敌机代码如下

 

01.Scratch飞机大战

您必须 登录 才能发表评论!

网友最新评论 (1)

  1. 想咨询一下,资源链接在那儿
    dongwc4年前 (2020-11-04)