01.Scratch飞机大战
写在开始
Scratch是麻省理工学院的一个团队研发的一款面向少儿的图形化的软件设计和开发工具,团队自称为“Lifelong Kindergarten Group”,可以理解为"终身幼儿园团队"。几乎所有的孩子看到这个软件都会一眼喜欢上它,进而建立起编程的欲望。
Scratch的官方网址:https://scratch.mit.edu
作为一个软件教育培训从业者,在尝试使用Scratch编写了一些程序后发现这款软件其实不仅仅适用于小朋友。对于很多跨行业学习编程的成人,这款软件也能提供让无基础的学习者理解软件编程中的一些概念。
比如,我在给很多跨行业学习编程的成人学员讲解“循环”概念时,一些学员往往需要一段时间来理解下面的这部分Java代码,对于从0开始计数的边界值问题,初学者往往也很头疼。
for(int i = 0; i < 10; i++){
System.out.println("你好")
}
如果换成Scratch来表述上面这个循环10次输出你好的功能,可能只需要两块“积木”
输出10次你好
这往往很容易理解。
所以我决定将我之前基于Scratch编写的一个飞机大战的小程序写一个教程,提供给需要了解Scratch的人。如果你读完整篇文章觉得对你有帮助,请别吝惜你的喜欢,谢谢。
Part 1 开始Scratch编程
首先,我们需要一个编写Scratch的工作环境,可以选择在线开发或者下载离线IDE工具
- 在线开发环境:https://scratch.mit.edu/projects/editor/?tutorial=getStarted
- 下载离线工具:https://scratch.mit.edu/download
下载离线工具时请选择对应的操作系统版本
选择操作系统版本和下载
下载后正常安装软件即可。
打开在线开发环境或打开离线工具进入编程主界面
试着做一个小功能
- 从左侧的积木中找到“事件”中的“当旗子被点击”,拖动到中央空白处
- 从左侧的积木中找到“运动”中的“移动10步”,拖动到中央空白处,将数字10改成100
- 将两个积木组合到一起,如下图
点击右上方的绿色旗子
点击旗子开始执行
屏幕中的小猫朝着面对的方向移动了100步
小猫移动了100步
虽然很多积木你还不了解怎么用,但Scratch的基本操作你已经掌握了。随着深入的学习,你可以了解更多的积木的用途,从而搭建出更复杂的程序。
Part 2 背景和角色
2.1 背景
2.1.1 选择预设背景图片
首先,我们需要为项目添加背景。游戏的故事背景,呃...是在宇宙中吧,那么我们可以自己选择一张喜欢的宇宙背景或者是工具中预设的背景。
此处我选择了工具中预设的Stars背景
鼠标移动到右下角的选择背景按钮上,点击“选择一个背景”
在打开的窗口中选择喜欢的背景,此处我们选择“Stars”
选择了Stars背景
可以看到小猫所处的背景已经更改为Stars的效果
背景更换效果
2.1.2 上传自定义背景
点击“上传背景”,上传自己喜欢的图片作为背景
上传背景
这是上传背景的效果
上传背景效果
2.1.3 删除不使用的背景
右下侧“舞台”可以管理所有已设置的背景。
点击当前背景(下图中的“背景3”)
点击舞台背景
整个工具编程了背景设置界面。
此时点击下图上方的选项卡可以在“代码”,“背景”和“声音”之间切换
左侧红框内是已经设置好的三个背景,分别是“预设的空白背景”,“Stars”和“上传背景”。可以点击左侧背景小图标上的x进行删除。
界面变化
此处我们删除背景1(预设的空白背景)和背景3(本地上传的背景),只保留我们需要的Stars背景
删除多余的背景
现在我们完成了背景的设置
2.2 角色
2.2.1 删除预设角色
此时点击右下方工作区的小猫(角色1),点击x删除小猫角色
删除预设的小猫角色
2.2.2 添加预设角色
点击右下方的角色按钮可以添加系统中的预设角色
选择角色 选择喜欢角色
我们此时不需要使用预设角色,可以点击左上的“返回”回到编程页面
2.2.3 上传角色
点击“上传角色”从本地计算机中上传绘制好的角色图片。
本小节结尾处有资源链接
我们上传了资源“craft_player.png”,效果如下。
新的角色
可以看到资源在整个背景下非常大,方向是朝向右侧。通过调整上图红框的“大小”和“方向”来更改飞机的显示大小和朝向。
使用鼠标拖动屏幕的飞机可以更改飞机的位置
调整后的效果
最后我们依次上传其他角色并调整大小和方向
上传所有角色并调整
背景和角色我们设置完成
角色图片资源请访问百度网盘
链接: https://pan.baidu.com/s/1sTO-qETQon-LSRMtdWw1Fg
提取码: aw7f
Part 3 坐标,事件及运动
本小节主要是添加家控制的飞机角色(craft_player)的相关动作和时间
选中角色craft_player,我们需要将它控制在屏幕底部,并且可以在按下←键和→键时可以在底部左右移动
坐标
首先,我们需要确定整个屏幕的坐标,scratch设置屏幕中心为坐标原点(0,0),x轴正向为右,y轴正向为上,具体见下图。
坐标系
如果我们想让craft_player在屏幕底部,通过设置合适的坐标即可
设置craft_player在屏幕下方中间
初始事件
在craft_player的代码选项卡中添加“事件”积木
初始事件积木
我们希望当游戏开始时,craft_player能在屏幕的底部中央,刚才已经得出坐标应该是(0,-150)
所以我们希望当初始事件执行时,我们的飞机在那里,通过在运动中找到如下两个积木,这两个积木的主要作用是设置craft_player的坐标位置。
设置坐标位置积木
我们此时将craft_player的x坐标设置为0,y坐标设置为-150,并与初始事件积木组合到一起
积木组合
这个“事件”积木表示当按下键盘上的某个按键时发生的事件
按键积木
此处我们将其改为按下←键触发
按下←键触发事件
找到“动作”中"将x坐标增加"的积木
增加x坐标积木
将它与按下←键的积木组合到一起,并调整数值,当按下←键时,x坐标是一直减少的,所以将积木中的数值设为-10。
组合积木
此时点击绿旗子开始,按下←键会发现craft_player可以一直向左
同理,按下→键的功能类似,只不过是需要增加x坐标
组合积木
整体代码,此处无法上传动图显示效果,可以点击←键和→键控制飞机在底部移动。
完工效果
Part 4 循环控制和显示隐藏
接下来我们进行craft_player发射单个子弹的操作
首先选择角色“bullet_player”
选择bullet_player角色
在中间空白处开始编程,当游戏开始时让子弹在craft_player角色的机头位置出现。
选择初始事件积木
初始事件积木
选择“运动”分类中的“移到随机位置”积木
移动位置积木
选择为“移到craft_player”位置
移动位置积木
将两块积木组合至一起
积木组合
点击绿旗子开始后,显示效果如下
显示效果
bullet_player(子弹)与craft_player(飞机)位置重叠,我们需要调整bullet_player的坐标,使其向上移动,根据上一小节坐标的描述和实际情况我们调整如下
调整子弹在玩家y坐标上方30的位置这样子弹就在飞机的上方出现
实际效果
接下来让子弹动起来,子弹每隔一小段时间应该继续向上移动。
此处我们使用“重复执行”控制,让子弹不断的去调整自己的y坐标,直至屏幕顶部。
重复执行调整子弹y坐标
实际效果(无法以动图方式演示),注意下图红框内子弹已发射至屏幕顶部
子弹发射至顶部
此处可以选择有条件的重复执行,当子弹坐标高于180时隐藏子弹
首先找到“运算”中的“大于”比较
在“运动”中找到“y坐标”
y坐标
组合积木并调整为“y坐标>180”
组合积木调整比较内容
在“控制”中找到“重复执行直到”积木
有条件重复执行
组合“重复执行”和“y坐标>180”积木
组合积木
替换之前的无条件重复的积木,最终积木组成如下
组合积木
在,事件开始时添加“外观”中的“显示”,在结尾添加“外观”中的“隐藏”
完整实现现在我们完成了单个子弹发射的功能
Part 5 克隆体
上一小节我们讲了如何发射一颗bullet_player(子弹),本小节我们利用克隆功能完成子弹的自动发射功能
首先点击craft_player角色,查看代码。找到“控制”中的“克隆”积木。这个积木的作用是复制某个角色。
克隆积木
子弹是一直发射的,所以我们找到“控制”中的“重复执行”积木,并将两者结合,调整“克隆”积木为“克隆bullet_player”,如下图
组合积木
将这部分积木与原有的积木组合
组合积木
点击绿旗子执行的效果如下
执行效果
可见子弹生成的间隔太短,所以很密集。
调整“重复执行”中的代码,让子弹的生成有一定的间隔,找到“控制”中的“等待x秒”积木,调整数值,组合积木如下
组合积木 执行效果
但现在有个问题,移动飞机后,发现子弹没有移动
执行效果
原因在于bullet_player中的代码,是当“绿旗子”触发时,才执行一系列操作,飞机移动时,克隆的子弹并没有随着飞机移动。
原积木组合
原因找到了,主要是触发的事件不正确,在craft_player(飞机)角色中我们不断的克隆了bullet_player(子弹),所以子弹中应该以“当作为克隆体启动”事件触发,我们将触发“事件”由“初始事件”改为“当作为克隆体启动”。同时当子弹隐藏时,将克隆体(自身)删掉
如下图
新积木组合
可以看到执行效果,子弹可以随着飞机移动生成了
执行效果
Part 6 广播(施工中)
敌机生成
Part 7 侦测和逻辑组合(施工中)
碰撞检测
Part 8 外观控制(施工中)
敌机毁灭