Scratch全国少儿编程竞赛获奖作品《古诗拼图》解析

网友投稿 2020-01-02 11:41

Scratch全国少儿编程竞赛



获奖作品解析

《古诗拼图》

本文介绍的作品是全国青少年创意编程与智能设计大赛创意编程比赛一等奖获得者高铂峻同学的参赛作品。

https://cdn.china-scratch.com/timg/200104/114115JG-0.jpg作品说明
https://cdn.china-scratch.com/timg/200104/1141155526-1.jpg

这是一个古诗拼图的游戏。用鼠标点击屏幕,进入游戏界面。先要选难度,再点start开始游戏。游戏过程中,点击help显示提醒。开始游戏后,点击红点旁的字块,它会跟红点换位置,当所有字块,按古诗的顺序拼好后,才能成功。

01
正文

古诗词是同学们小学语文课程中必学的内容,大家小时候一定都阅读过像《唐诗三百首》《宋词三百首》这样的书籍,《静夜思》《登鹳雀楼》《水调歌头·明月几时有》这些著名的诗词几乎人人会背诵,今天呢,高铂峻同学就带来了一部有关古诗的Scratch作品,他将杜甫的《绝句· 迟日江山丽》这首唐诗与拼图游戏结合在了一起,通过拼字排序的游戏方式来加深对于这首古诗的记忆。那接下来我们就一起看看这个作品是如何在Scratch中实现的吧。

点击绿旗

响应点击绿旗事件的角色有两个,汉字方块与背景。

https://cdn.china-scratch.com/timg/200104/11411B000-2.jpg

它们的代码都很简单,主要呢就是初始化游戏的一些设置和变量。

汉字方块中设置了角色的大小与方格大小这个变量的值。

https://cdn.china-scratch.com/timg/200104/11411A494-3.jpg

每个方块的大小被设置为64,也就是其原始大小的64%,而方块大小这个变量的值被设置为65,比上面的大小多1,这个变量可不是用来设置角色大小的哦,它在后面主要用于方块间距离的判断。

背景中,设置了游戏的封面,初始化了古诗内容、难度这些变量。

https://cdn.china-scratch.com/timg/200104/1141162321-4.jpg

古诗内容变量中存储的就是古诗按照正确顺序书写出来的所有文字,它在后面用来对比判断拼图结果是否正确。

同时,游戏中还会循环播放着一段背景音乐。

其实,响应点击绿旗事件的角色还有一个,就是它:

https://cdn.china-scratch.com/timg/200104/11411KF4-5.jpg

这个说明角色中并没有点击绿旗的代码,而是设置了“当背景换成封面”的事件:

https://cdn.china-scratch.com/timg/200104/11411M606-6.jpg

通过背景的代码我们知道,点击绿旗之后,第一步就将游戏换成了封面的背景,所以说明角色中的当背景换成封面的事件也立即被触发了,这就是为什么说明角色间接的响应了点击绿旗的事件。

老师在造型选项卡中看到说明角色一共有三个造型:

https://cdn.china-scratch.com/timg/200104/11411JE2-7.jpg

这三个造型在游戏中分别提供游戏的说明、正确答案提示和游戏成功的提示,后面两个造型的作用我们会在下面的代码中依次碰到。

到这里,点击绿旗的代码就介绍完了,舞台区这时就出现了游戏的首页:

https://cdn.china-scratch.com/timg/200104/11411VA3-8.jpg

游戏说明的文字告诉我们点击屏幕进入游戏,选择难度并开始游戏,游戏中可以查看提示信息,按照古诗的顺序排列好,就成功完成游戏任务了。

好,接下来我们就点击屏幕进入游戏吧。

https://cdn.china-scratch.com/timg/200104/11411R262-9.jpg

舞台区会切换成游戏的背景。

https://cdn.china-scratch.com/timg/200104/11411S501-10.jpg当背景换成游戏https://cdn.china-scratch.com/timg/200104/1141204447-11.jpg

当我们用鼠标点击屏幕之后,游戏就会进入拼图的界面。

https://cdn.china-scratch.com/timg/200104/1141203236-12.jpg

响应当背景换成游戏事件的角色一共有四个:

https://cdn.china-scratch.com/timg/200104/1141204B9-13.jpg

其中有两个按钮,一个是开始按钮,一个是帮助按钮,代码中通过移到语句将它们显示在固定的位置上。

以帮助按钮的代码为例:

https://cdn.china-scratch.com/timg/200104/11412122O-14.jpg

代码中,通过自制积木的方式给两个按钮添加了鼠标悬停放大的效果。

https://cdn.china-scratch.com/timg/200104/11412111K-15.jpg

背景中,通过显示变量语句让难度和正确方块数量这两个变量显示在屏幕上,游戏难度可以在点击start开始按钮之前通过滑动屏幕上的数字滑块进行改变。

https://cdn.china-scratch.com/timg/200104/11412133B-16.jpg

最后一个响应当背景换成游戏事件的角色是汉字方块,果冻老师为什么要把这个角色放到最后说呢?因为它是拼图游戏中最核心最复杂的逻辑,也是实现拼图功能最关键的角色。

当背景换成游戏后,汉字方块角色首先会进行初始化铺排。

https://cdn.china-scratch.com/timg/200104/1141226105-17.jpg

在铺排之前,代码先设置了两个变量的值,选中字编号变量表示小红点在拼图方块中的位置,也就是我们要移动的方块位置,唐诗《绝句· 迟日江山丽》一共有20个汉字,所以会在1和20之间随机取一个数并保存在变量中。正确方块数量变量中存储的就是古诗的所有汉字数目,也就是20。

设置完两个变量后,代码就会进入初始化铺排的自制积木中。

https://cdn.china-scratch.com/timg/200104/1141234030-18.jpg

汉字方块角色明明只有一个,可是游戏中却出现了20个方块并组成了一首诗,读过果冻老师文章的同学一定知道这里使用了克隆的方法,将一个角色克隆20次就得到了它的20个化身,每个化身再赋予它不同的造型就可以得到20个不同的汉字方块。

那问题来了,如何排列摆放才能将这20个汉字方块组合成一首诗呢?不要告诉老师可以一个一个设置坐标,这种方法太笨拙了。其实我们可以通过数学计算得出每个方块摆放的位置,这就是上面这段代码所做的。

为了让汉字方块整体摆放在屏幕的中间,我们需要对起始方块的位置进行计算,也就是说左上角第一个汉字方块的位置是非常重要的,初始化铺排代码块的第二、三行代码就是分别计算第一个汉字方块的X与Y坐标。

为了更清楚的了解起始方块的坐标是如何计算的,果冻老师在汉字方块上做了两个标记:

https://cdn.china-scratch.com/timg/200104/1141253I8-19.jpg

第一个标记是黄色的圆点,它表示汉字方块整体的中心点,也就是舞台区X、Y坐标为(0,0)的点。第二个标记是绿色的圆点,它表示古诗左上角第一个汉字方块的中心点。所以,我们的任务就是,计算出绿色圆点相对于黄色圆点的X、Y坐标值,很明显,在水平方向上绿色圆点与黄色圆点相距两个方格大小,而在垂直方向上绿色圆点与黄色圆点相距1.5个方格大小。

有了上面的结论,再看代码是不是就很清晰了呢?

第一个汉字方块的X坐标计算过程:古诗内容的字符数是20,用20÷8=2.5,然后将2.5这个数字向下取整,得到2,最后用方格大小×2,就是我们需要的X坐标值。在代码中,还给这个值减去了10,让汉字方块整体向左移动一点距离,给右边的start和help按钮留出显示的空间。

Y坐标的计算也是类似的,而且更简单,直接用方格大小×1.5就可以了。同样,也减去10,让汉字方块整体稍稍上移一点。

有了关键的X坐标与Y坐标值后,接下来我们要做的就是通过坐标值摆放所有的汉字方块。

我们观察一下这首古诗,总共有20个汉字,一共显示为4行,那么每行就有5个汉字方块。我们已经有了第一个汉字方块的坐标,于是第二个汉字方块的坐标就是给第一个汉字方块的X坐标增加一个方格的大小,Y坐标不变,而第三个汉字方格的X坐标再增加一个方格的大小,以此类推,可以将第一行汉字方格排列出来。

第二行的第一个汉字方格呢,它的X坐标与第一行第一个汉字方格的相同,而Y坐标增加了一个方格的大小,第二行第二个方格的X坐标增加一个方格的大小,Y坐标不变。按照这个原理我们就可以排列出第三行、第四行的所有方格了。

所以,通过上面的分析过程,代码中需要两个重复执行,它们是嵌套的关系,第一个重复执行运行4次,每次会进行古诗水平一行的排列,第二个重复执行运行20÷4=5次,按顺序每次排列一行中的一个汉字方格。

重复执行中还会不断的切换角色的造型与古诗编号变量的值,这样不同的克隆体就可以显示不同的汉字造型,并且存储不同的古诗编号值,这个值就对应它在古诗中的位置。最终,《绝句· 迟日江山丽》这首唐诗就会按照正确的顺序显示在屏幕上了。

初始化铺排完成后,代码会发送选中字消失的广播,意思就是将选中的汉字方块隐藏并用红点角色代替。

所有的方格克隆体都会接收到这个选中字消失的广播,但是进行替换的方格只有一个。

https://cdn.china-scratch.com/timg/200104/11412615H-20.jpg

OK,接下来,我们就要选择游戏难度并点击start按钮开始正式的拼图任务啦。

https://cdn.china-scratch.com/timg/200104/11411S501-10.jpg重新开始https://cdn.china-scratch.com/timg/200104/1141204447-11.jpg

点击start按钮后,它会发出重新开始的广播。

https://cdn.china-scratch.com/timg/200104/11412BO6-23.jpg

接收这个广播的角色仍然是汉字方块角色,重新开始的意思就是将所有的汉字方块打乱,我们需要重新进行排列。

同样的,所有的克隆体都会接收到这个广播。

https://cdn.china-scratch.com/timg/200104/11412C207-24.jpg

我们选择的游戏难度会在这里用到,比如难度设置为20,那么这里就会进行20次方格交换的动作,难度值越大,方格被交换的次数就越多,打散的就越凌乱。

可是,红点角色的上下左右一共有四个汉字方格,那应该交换哪个呢?还记得取随机数语句吗,使用它从上下左右四个方向中随机选取一个方向并保存在移动哪个的变量中。

在接收移动一步的代码中就会用到移动哪个这个变量。

https://cdn.china-scratch.com/timg/200104/11412HI3-25.jpg

而真正实现方格交换的逻辑是写在移动一步这个自制积木中的,这个自制积木还带有一个输入项,叫做用户是否在玩,因为电脑自动打乱方格与用户拼字同时用到了移动一步的自制积木,所以这个输入项就是用来判断并区分这两种情况的。这里我们传入数字0,表示是电脑在自动打乱方格。

https://cdn.china-scratch.com/timg/200104/11412KI3-26.jpg

汉字方块与红点角色在位置交换的过程中涉及到了两个变量,分别是“交换前,位置是否正确”和“交换后,位置是否正确”,它们用于存储交换前后汉字方块的位置是否正确,如果正确则用1表示,如果不正确则用0表示,这里的1和0其实代表布尔值True和False,运算符“与”可以理解为一个判断语句,它前后的两个等于运算式如果都成立,那么与语句的值即为1(True),如果前后两个等于运算式有一个不成立,那么值即为0(False)。

“交换前,位置是否正确”和“交换后,位置是否正确”这两个变量最主要的作用就是在随后的代码中判断是否要给“正确方格数量”这个变量的值增加1还是减少1。如果“交换前,位置是否正确”是1,而“交换后,位置是否正确”是0,表示我们将一个位置正确的方格移到了错误的位置,这时就要将“正确方格数量”的值减1;反之,如果交换前,位置是否正确”是0,而“交换后,位置是否正确”是1,表示我们将一个位置错误的方格移到了正确的位置,这时就要将“正确方格数量”的值加1。

接着,如果“用户是否在线”这个输入项传入的值是1的话,表示是用户在操作拼字,同时,如果所有的汉字方块的位置都拼对了,也就是说“正确方格数量”这个变量的值等于了20,那么就会发送全部成功的广播,拼字的任务就完成了!

交换位置的过程很简单,使用移到语句就能实现两个角色的位置交换。

汉字方块的代码:

https://cdn.china-scratch.com/timg/200104/11412Q164-27.jpg

首先,将汉字方块的X、Y坐标分别保存在“选中字X坐标”和“选中字Y坐标”两个变量中,这两个坐标值就是后面红点角色要移到的坐标点。接着,将汉字方块移到选中字替补(即红点)角色的位置上,然后发送广播通知红点角色。

红点角色接收到广播的代码:

https://cdn.china-scratch.com/timg/200104/11412V157-28.jpg

是不是很简单呀,将它移到原来汉字方块的坐标位置就行了。

好,当我们将所有的汉字方格都按顺序排列好后,代码就会发出全部成功的广播,屏幕上会显示出成功的提示。

https://cdn.china-scratch.com/timg/200104/1141291434-29.jpg

总结

到这里,拼字游戏的所有代码就介绍完了,虽然我们在屏幕上的操作过程很简单,就将文字与红点交换一下,但是这后面的代码实现却很复杂,涉及到了很多的变量,很多的判断,这需要同学们具有非常强的逻辑思维、观察力和思考能力,把游戏语言转化为编程语言的能力可不是一天两天能练成的,不要心急,每天努力一点点,你一定会成为一名编程大神的。


END

声明:本文章由网友投稿作为教育分享用途,如有侵权原作者可通过邮件及时和我们联系删除:freemanzk@qq.com