孩子趣味学编程之Scratch篇
上QQ阅读APP看书,第一时间看更新

2.4 代码画家

学习了魔法钢琴后,你是不是对顺序结构有了更深的理解呢?接下来,让我们一起学习一个新的小故事吧!

背景:白色背景

角色:画笔(pencil)

故事:这是一只多功能小画笔,可以根据你想要的,画出不同类型的线条。

玩法要求:

按下键盘上的1键,画笔画出一条直线。

按下键盘上的2键,画笔一次画出三条直线,三条直线间隔相等。

按下键盘上的3键,画笔一次画出三条直线,直线之间没有间隔,三条线粗细不同(见图2-17)。

图2-17 代码画家123

现在,我们一起看一下这个神奇的画笔是怎么实现的。

首先,打开Scratch,从背景库和角色库中选出我们需要的背景和角色。

因为背景是一个纯白色的,因此不需要从背景库中选择新的背景。从角色库中选出画笔之后,我们来看一下画笔这个角色的造型。

什么是造型?如果你看过舞台剧,细心的你会发现,舞台上的演员每次出场时穿的衣服,做的动作可能都是不一样的。如果你没看过舞台剧,那也没有关系,动画片里的人物在每集出场的时候是不是有时候也会穿不一样的衣服,做不一样的动作呢?

尽管他们穿了不一样的衣服,做了不一样的动作,但是你还能认出来这就是一个角色,是吗?这就是我们所说的一个角色可以有多个造型,但无论有多少个造型,他都是一个角色,这一点要特别注意。我们每次写程序,是写给这个角色的,这个角色的所有造型都属于这一个角色,因此,程序对所有造型都是有用的。

如何查看角色的造型呢?如图2-18所示,选中角色画笔,单击造型,可以看到造型区现在有两个造型。

图2-18 画笔的造型

每个角色都有一个造型中心(见图2-19)。造型中心指的是这个角色和舞台接触的地方。默认情况下角色库中的角色在造型中心的正中间。现在,单击右上角的加号,可以看到画笔现在的造型中心在画笔造型的中间位置。

图2-19 设置造型中心

思考一下

我们平时写字画画的时候,是笔的什么位置和纸在接触呢?

答案是笔的笔尖位置在和纸接触,在计算机上也是一样的,为了让舞台演示的效果更像是画笔在舞台上画线,我们将画笔的造型中心调整到画笔的笔尖。

调整造型中心的具体方法是:单击右上角的加号,看到有一个十字出现在画笔的中间,用鼠标左键单击十字后按住鼠标不要松手,这时候移动鼠标可以看到这个十字跟着鼠标光标移动,把十字中心缓慢移动到画笔的笔尖,这时候松手放开鼠标,画笔上的十字消失。再次单击右上角的加号,如图2-20所示,画笔的造型中心已经移到画笔的笔尖。

图2-20 造型中心在画笔的笔尖

完成这一系列准备工作后,就可以开始实现神奇的画笔功能了。

在分析画笔的程序之前,可以想一下,如果你要用笔在纸上画一条直线,需要怎么去完成呢?

我们一起分析一下你的动作:

1)拿出一张纸和一支笔,此时应该确定自己拿的笔是什么颜色以及笔的粗细。

2)把笔放在纸上。

3)确定这条直线的方向,手向着这个确定的方向带动笔在纸上移动一定距离。

4)把笔从纸上拿起来。

通过这四个步骤,你就完成了在纸上画一条线的任务,同样的方法,可以完成画笔在舞台上画一条线的任务。按照这四个步骤的顺序,我们来学习一下每一步在计算机中怎么实现。

2.4.1 画一条直线

怎么实现按下键盘上的1键,画一条直线呢?在这里,我们还是一步一步地去思考。

1)程序运行的起点:在脚本的事件中找到“当按下空格键”,将“空格”改为“1”。

2)拿出一张纸和一支笔:此时,我们的纸就是舞台的白色背景。笔就是我们的画笔这个角色,可以先确定画笔的颜色和粗细。确定画笔颜色和粗细的命令在脚本的画笔命令中,如图2-21所示。

3)把笔落在纸上:这里我们将画笔落在舞台上,在脚本的画笔中,有一个命令叫作“落笔”(见图2-22)。

4)确定直线的方向并移动手带动笔在纸上画线:当我们在生活中实际画线的时候,可以通过手控制笔的方向,在计算机里,我们直接用命令控制画笔的移动方向,确定好方向后,让画笔移动一定的距离。控制画笔方向和移动距离的命令在脚本的动作区域,分别是“面向90方向”和“移动10步”,如图2-23所示。

图2-21 画笔颜色和大小的设定

图2-22 落笔命令

图2-23 确定画笔方向和移动距离

要注意的是,“90”和“10”都是可以进行更改的,单击“面向90方向”这个命令的黑色小三角,可以看到有四个选择,分别是向右、向左、向上和下移。除此之外,你还可以通过键盘上输入的方式改变它的数字。

5)将笔从纸上拿起来:这里我们让画笔离开舞台。在脚本的画笔中有一个命令叫作“抬笔”(见图2-24)。

图2-24 抬笔命令

这样我们就把画笔画一条线的动作一步步分解分析完了,接下来要做的就是将这些分解的命令按顺序连接在一起。

试一试

组合完成之后,按下键盘上的数字1键,舞台上的画笔画出一条线了吗?

2.4.2 画三条直线,三条直线间有间隔

掌握了画一条直线的方法,相信你也可以完成画三条直线的任务,这里的难点是,怎么实现直线间有间隔呢?我们还是分步来看这个问题。

1)程序运行的起点。

当按下键盘上的2键。

2)按之前介绍的方法画第一条线。

3)把笔从纸面拿开,向之前确定的方向移动一段距离:如果在画第一条线时,你的最后一步是抬笔,此时你的笔应该不在舞台上。想象一下,我们在纸上画线时,如果需要线与线之间有间隔,是怎么实现的。

通常的做法是把笔从纸上拿起来,手拿着笔移动一段距离,确保间隔已经足够,再把笔放在纸上画线。同样地,在计算机上,我们可以控制画笔的移动。移动的命令在介绍画笔画线的时候已经讲过,相信大家可以独立完成。移动一段距离之后,我们再进入下一步,开始第二条线的绘制。

4)落笔,画第二条线。

5)把笔从纸面拿开,向之前确定的方向移动一段距离。

6)落笔,画第三条线。

2.4.3 画三条直线,三条直线粗细不同

当掌握了画一条直线的方法后,相信对你来说,画三条直线也很容易。这里的三条直线不再是三条有间隔的、等长、粗细相同的线。这次要画的线是三条粗细不同的直线。同样地,我们分步来看这个问题。

1)程序运行的起点。

当按下键盘上的3键。

2)画第一条线。

思考一下:画线的时候还需要抬笔的命令吗?

3)更改画笔的粗细,画第二条线。

画线之前,首先区分两个命令,还记得我们在魔法钢琴里面讲的“将角色的大小设定为100”和“将角色的大小增加10”这两个命令的区别吗?在讲画线的时候我们讲过,设置画笔的粗细用了一个命令,叫作“将画笔的大小设定为”。现在来看一下以下两个命令的区别。此处如果有不明白的地方,可以参考魔法钢琴中将角色大小变化的内容讲解(见图2-25)。

改变画笔的大小同样有两种方法(见图2-26)。

图2-25 改变画笔的大小

图2-26 改变画笔大小的两种方法(左图:方法一;右图:方法二)

4)更改画笔的粗细,画第三条线。


好的,现在我们已经实现了画笔的三个功能,赶快用你的键盘操作一下你的小画笔,看你能否成为神奇的代码画家吧!