Skip to content

「图形化编程」Scratch 初识

konglong

上节教程 我们用 micro:bit 实现了一个简单的螺旋线动画,并且在最后留了一个悬念,就是下面这个图形,细心的你可能发现了,这个图用 micro:bit 是没办法做出来的,没错,用 micro:bit 无法直接画出这样的图形,这就需要请出今天的主角 – Scratch
zhengfangyuan

什么是 Scratch

scratch-logo

Scratch 是由大名鼎鼎的麻省理工学院 (MIT) 开发的面向青少年的编程平台,别小看这只丑丑的猫咪,它能做的事情可多了,不但能制做交互动画,让角色在舞台上作出各种动作,还能编写音乐,通过自带的画图工具创建你自己的精灵,同时能够制作游戏,甚至还兼容 micro:bit,是不是很棒呀

先来看看官方的介绍视频吧

Scratch 同时支持很多的扩展库,比如可以画乌龟图形,开头那个花花的图形就是我用 Scratch 画的,或者用 Scratch 对 micro:bit 进行编程,还有支持图像识别,乐高,音乐创作的扩展库,可玩性大大增加

Scratch 的软件 同时支持本机 App 和 在线编程两种形式,所以你即使没有网络也可以通过本地安装的 Scratch 应用进行编程

Scratch 的流行也离不开 活跃的社区,在社区里,你可以看到每时每刻都有来自世界各地的小伙伴将他们的作品分享到社区里,你可以通过访问它的 官网 来看看其他用户分享的作品,同时 Scratch 社区提供了大量高质量的官方教程,不用愁找不到学习资料啦,顺带说一句,我也悄悄混进了官方翻译组,说不定你哪天看到的教程就是我翻译的啦。

界面介绍

这里以 在线编程网站 为例,界面比 makecode 编程网站稍微复杂一些,直接看图吧
jiemian

大致可分为 6 大区域

  1. 最上面的菜单栏,可以打开之前的项目,本地上传新的项目,或者点击 教程 查看官方教程,此外还可以把你的作品一键分享到社区(需要登陆)
  2. 左边的积木区,列出了各个分类下的不同积木,同时需要注意左上角有不同的 tab 分页,比如造型用来显示角色精灵的不同造型,而声音代表当前角色不同状态的声音,可以通过变换造型和声音,达到生动的效果
  3. 中间的是代码区,你的积木块将会放置在这里进行编程
  4. 右边上半部分是运行窗口,用于查看编程的结果,注意上面有一个绿色小旗,代表开始按钮,而红色的 8 边形按钮代表停止运行程序
  5. 右边下半部分左侧是精灵区,用于添加或更换不同的精灵,我们可以一次添加很多精灵,并且给每个精灵添加不同的代码,这样就让他们有不同的行为啦,你可以试着点击那个蓝色小猫咪图标,来看看 Scratch 预置了哪些可爱的精灵造型吧
  6. 右边下半部分的右侧是背景区,用于更换运行窗口的舞台背景

调整语言

第一次打开 Scratch 网站,如果显示的不是中文,你可以通过点击左上角那个地球图标,然后在弹出的窗口里选择 简体中文 就好啦

yuyan

注册账号

你可以通过点击右上角的 加入 Scratch 来创建一个账号,这样你就可以保存所有的作品到你的帐号里而不怕丢失啦,同时也可以一键分享你的作品,让大家大吃一惊吧

下载安装本地应用

如果你更习惯在本机编程,那么可以在本地安装 Scratch 应用,通过 这个链接 进行下载

download

然后一路 下一步 安装就好啦

你好! Scratch

下面我们来做一个简单的程序,

  1. 打开 Scratch 桌面应用 或者 在线编程网站
  2. 在 事件 分类下找到 当 绿旗 被点击 并拖动到编程区
  3. 在 运动 分类下找到 移动 10 步 并拖动到编程区
  4. 在 外观 分类下找到 说 你好! 并拖动到编程区,然后把文字改为 你好!Scratch

helloscratch

点击运行窗口的 绿色小旗,就能看到效果啦

hello-runc500

更换精灵和背景

为了让舞台不那么单调,我们来换一下背景,并且换掉这个丑丑的猫咪(虽然看多了觉得它还有点萌)

  1. 点击右下角的 猫咪精灵 Sprite1,
  2. 在左侧的代码区切换到 造型 tab 页
  3. 在左下角点击 小猫图标,点击 放大镜
  4. 在打开的窗口中选择一个你喜欢的精灵造型,这里我选了一个大恐龙
  5. 依次删除原来的 猫咪精灵 造型

猫咪就换成了大恐龙啦
huanjingling

接下来我们来换背景,

  1. 点击右下角 舞台 里的 空白背景1
  2. 点击左侧代码区切换到 背景 tab 页
  3. 在左下角点击 图片小图标,点击 放大镜
  4. 再打开的窗口中选择一个你喜欢的背景,这里我选了篮球场
  5. 删除原来的 空白背景

大功告成
huanbeijing

最终效果

来看看最终效果吧
konglong

是不是比刚才好多啦

今天就到这里吧

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x