
1.4 小猫进圈
教学目标:学会使用绘图工具,认识坐标。
坐标用来描述一个点的位置信息。
就像世界地图中的经纬度,经度表示左右位置关系,纬度表示上下位置关系。世界地图上的任意一个城市的坐标,都可以用一组经纬度表示。例如北京位于东经116°20′,北纬39°56′。

与世界地图一样,在Scratch舞台中,想确定一个角色的位置,只要知道这个角色的水平位置信息和垂直位置信息即可。这就是下面介绍的平面直角坐标系中的x坐标和y坐标。

其中,x坐标表示左右的位置关系,可视区域范围是[-240,240]。y坐标表示上下的位置关系,可视区域范围是[-180,180]。舞台的非可视区域也是存在的,在4.4节会提到。
开发需求001:
为舞台背景填充蓝色,并绘制4个椭圆,椭圆的大小要能容下小猫,内部填充白色。程序开始时,小猫位于最左侧椭圆内,全程面向右侧。按下右移键,小猫就跳到右边的椭圆里;按下左移键,小猫就跳到左边的椭圆里。小猫不能跳出两端的椭圆外。见图1.4.1。

图1.4.1
分析:
按下左、右方向键触发事件左、右移动。
在Scratch中,程序想要被执行,必须有一个“刀形积木”作为开始。
刀形积木包括:

具体步骤:
1.准备素材。

下面重点介绍如何绘制舞台背景:
(1)背景填充蓝色。切换成位图模式,选择填充工具,涂成蓝色,如图1.4.2所示。
(2)画出一个椭圆。颜色选白色,类型选实心,如图1.4.3所示。
(3)画出全部椭圆。先选择,再复制,然后粘贴。依次拖到下一个位置,粘贴,如图1.4.4、图1.4.5所示。

图1.4.2

图1.4.3

图1.4.4

图1.4.5
关于矢量图和位图的区别:
矢量图是根据几何特性来绘制图形,构成这些图形的元素可以是点、线、矩形、多边形、圆和弧线等,它们都是通过数学公式计算获得的。它的特点是放大后图像不会失真,和分辨率无关。
位图是由像素点组成的。当放大图像时,像素点也跟着放大了,就会出现类似于马赛克的效果。
通过点击转换按钮,观察小猫角色的矢量图和位图的区别。

(矢量图)

(位图)
2.小猫初始化。程序见下图。

3.按下左右键,开始跳动。
可使用两种方法:
方法一:按下右移键作为一段脚本的开始。程序见下图。

方法二:循环侦测右移键是否按下。程序见下图。

两种方法均可,但它们也有一些区别,后面章节将进行细致介绍。这里使用方法一。
依据题中坐标图示,舞台长480步,高360步。现在有4个椭圆排成一排,那么每个椭圆之间的距离就是480/4=120(步),再考虑到椭圆周边存在空隙,经过反复调试,确定每次移动115步。因为题中要求小猫全程向右,为了方便,直接使用“将x坐标增加……”积木。程序见下图。

4.把小猫锁定在4个椭圆内,不能跳出椭圆外。
因为小猫在左右移动的过程中,x坐标改变,y坐标不变,所以可以对小猫的x坐标进行判断。在当前程序中,小猫位于最左侧椭圆内时,它的x坐标为-180,位于最右侧椭圆内时,它的x坐标为165。
方法一:允许小猫跳出圈外,一旦跳出,则立刻拽回来。程序见下图。

方法二:只有在满足特定条件下,小猫才能进行跳圈。程序见下图。

完整程序:

开发需求002:
在程序001的基础上,如果要求4个椭圆必须完全一样,并且严格按照等间距分布,有什么好的方法?
分析:
使用背景绘制工具不可能实现等间距分布,无论怎么绘制,都会出现误差。这里就需要椭圆是一个角色,是角色的话,就可以用程序来实现等间距分布。
具体步骤:
1.准备素材。

填充蓝色舞台背景,创建白色椭圆角色,如图1.4.6所示。

图1.4.6
2.这里可以复制成4个椭圆角色,用程序实现等间距排列。那么有没有可能用一个椭圆角色能否实现效果呢?答案是可以。需要用到类似于复制的功能。在Scratch中,有两个积木,可以实现复制。见以下两图。


关于图章和克隆的区别:
图章:图章属于画笔功能。执行图章后,可以在舞台上留下跟角色一样的痕迹。这个痕迹是没有生命的,它只是画在了舞台上(不涉及图层问题)。需要注意的是,角色在隐藏的状态下,仍然可以使用图章。删除图章使用“全部擦除”积木。
克隆:克隆才是真正的复制。执行克隆后,会在舞台中留下跟角色一样的克隆体。这个克隆体是有生命的,可以对克隆体进行编程(涉及图层问题)。需要注意的是,克隆体会继承本体的一切属性,包括位置、方向、大小、颜色、显示隐藏等。如果本体在隐藏的状态下进行克隆,那么克隆出来的克隆体也是隐藏的。删除克隆体使用“删除此克隆体”积木。
题目中只要求在舞台上产生4个等间距分布的椭圆,因为4个椭圆除了在舞台上显示,没有其他功能,所以使用图章即可。
3.将椭圆角色隐藏,移到初始位置,盖一个图章,再移到下一个位置……重复执行4次。见图1.4.7。

图1.4.7
试一试:
重新绘制舞台背景,填充渐变的蓝白色,用黑线将舞台分割成类似“井”字形的9个区域。当绿旗被点击,小猫移到舞台中心,用键盘的上、下、左、右来控制小猫移动。每按下一个键,小猫都会移到对应方向的相邻区域内,如果没有区域可以移动了(撞到了舞台边缘),则小猫像穿墙一样出现在相反方向最远端的区域内。小猫全程都面向右,不能改变朝向。见图1.4.8。

图1.4.8
当小猫移动到最右端时,此时按下右移键,小猫就会移到最左端的区域内。见1.4.9。

图1.4.9