Scratch全国少儿编程竞赛获奖作品《穿越时空的大战》解析上篇

网友投稿 2019-11-23 13:58

Scratch全国少儿编程竞赛

获奖作品解析
《穿越时空的大战》

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

作品说明

游戏主人公在名侦探柯南的帮助下,体验了最新的科技发明——AI机器人和时光机。乘坐时光机回到过去之后,在AI监测系统的帮助下,还原出了事实的真相,并成功带领自家花园里的植物利用高科技装备战胜僵尸,保卫家园的故事。
游戏中运用到了变量、循环嵌套、克隆体、列表、字符串连接等功能,并用到了多种算法,包括遍历算法、排序算法、求和、求平均值和最值等算法。
另外,游戏中还有很多原创的角色,如太阳花,AI防御网等。

正文https://cdn.china-scratch.com/timg/191125/135S03Y1-0.jpg

2019年第五届全国青少年创意编程与智能设计大赛已经落下帷幕,本届大赛吸引了全国30个省市的青少年参与,一共有9668份Scratch创意编程作品入围了全国比赛,有886名选手参加了Scratch创意编程比赛的线上终评。今天我们要学习的内容就是从近千名选手近万份作品中脱颖而出获得小学1-3年级组一等奖的作品,它就是齐嘉懿同学创作的《穿越时空的大战》。从上面的作品说明中我们可以了解到这个作品中包含了各种各样的角色、功能和算法,作为一名三年级以下的小学生,将这么多的知识点搞懂,并且融合在一个作品中着实是不容易,可见要获得一等奖没点真功夫是不行的,那到底是骡子是马,获奖是否实至名归,下面果冻老师就和大家赶紧一起将作品拆解开来,详细的分析一下吧。
好,我们这就开始!

点击绿旗

点击Scratch软件的小绿旗,代码开始运行。一上来,齐嘉懿同学就向所有人展示了他良好的编码习惯,为什么这么说呢?我们来看一看:

https://cdn.china-scratch.com/timg/191125/135S0AI-1.jpg

这是一段初始化变量的语句,写在背景中,点击绿旗后,齐嘉懿同学第一步做的就是将游戏中涉及到的几个重要的变量进行初始化,僵尸数量设置为20,坦克数量设置为30,sun设置为0,并且将暂时不用的变量、列表隐藏掉,这些代码很普通呀,就是简单的给变量赋值语句,老师为什么要夸赞呢?
接触过代码式编程的同学应该知道,如果要使用一个变量通常分三步,分别是声明、初始化和调用,声明变量一般都是写在程序的开头,并且所有的公共变量统一写在一起,这样的写法并不是必须的,但它是一种编码规则,对于成千上万行代码的中大型程序来说,这样的规则非常有利于开发者调试程序和维护代码,对于不是原开发者的工程师来说,这样的规则也有利于代码的阅读和理解。
齐嘉懿同学在他的作品中就使用到了代码式编程的规则,将重要变量的初始化(Scratch中变量的声明就是创建变量的过程)写在了一开始,虽然我们使用Scratch一般只完成几十几百行的小程序,但是能够培养这样的编程习惯对于同学们今后学习Python、C++等编程语言是非常有益的,所以果冻老师强烈建议大家现在就按照这种习惯写Scratch语句哦!
回到游戏中,接收点击绿旗事件的角色还有一个:

https://cdn.china-scratch.com/timg/191125/135S04c7-2.jpg

这个角色的造型借用了植物大战僵尸的图片。

https://cdn.china-scratch.com/timg/191125/135S0D14-3.jpg

点击绿旗后舞台区会立即显示这张图片,并作为游戏的开始界面。

https://cdn.china-scratch.com/timg/191125/135S02454-4.jpg

图片中有一行“点击空格键开始游戏”的提示文字,所以在代码中拖入等待按下空格键?的语句。当游戏者按下键盘上的空格键后,继续执行下面的代码,游戏会切换成游戏说明的背景。
在之前的作品中,一个角色响应另一个角色,基本上都是通过广播,一个角色发送广播,另一个角色接收广播,这样这两个角色就通过广播联系起来了。在这里,齐嘉懿同学又教我们了一招,在事件模块中有一个当背景换成XX的语句,我们使用它可以响应开始角色切换背景的动作,而接收响应的角色就是开始游戏按钮(角色2):

https://cdn.china-scratch.com/timg/191125/135S05461-5.jpg

当游戏显示说明的界面后,这个按钮就会显示在舞台区的右下角:

https://cdn.china-scratch.com/timg/191125/135S1B06-6.jpg

点击开始游戏按钮,游戏会切换到主角妈妈的房间中,不知道是谁把妈妈的房间搞得乱七八糟的,游戏主角被妈妈误解臭骂了一顿,于是他要去找少年侦探团帮忙,所以接下来,名侦探柯南就正式登场了。

https://cdn.china-scratch.com/timg/191125/135S120X-7.gif

熟悉的背景音乐出现!同学们有没有发现,名侦探柯南的角色实际上只是一张背景图片,而真正说话的角色是它:

https://cdn.china-scratch.com/timg/191125/135S1H17-8.jpg

可是柯南在说话的时候,我们却看不到这个紫色的方框,这是怎么回事?原来在代码中这个紫方框通过虚像效果被隐藏掉了,齐嘉懿同学厉害的地方在于他知道虚像效果可以使角色透明不可见,但是却不能让“说的话”隐藏,正是由于Scratch软件的这个特性,才能实现图片柯南在说话的效果。

https://cdn.china-scratch.com/timg/191125/135S12464-9.jpg

柯南说话是一个字一个字出现的,类似于打字的效果,同学们还记得不记得,在《记忆碎片》这篇文章中,游戏的一开始也播放了一段打字的动画,那个动画的原理是每多一个字就创建一个造型,然后不断的切换造型实现的。这里呢,齐嘉懿同学又教给大家另一个方法,完全用代码实现,几行代码就能搞定,这可比创建一大堆造型要方便多了。上面的截图中已经贴出了打字动画的代码。
首先,我们需要定义三个变量,分别是:汉字、进行中的汉字和查找字符。
变量汉字用于存储柯南要说的话,它的内容并不会显示在屏幕上,这个变量的意义就是将它的文字一个一个取出来,然后再赋值给进行中的汉字这个变量。
进行中的汉字这个变量呢,是柯南真正要说的内容,代码中每循环重复一次,这个变量就会多存储一个文字,直到它的文字和变量汉字的内容一样为止。
那怎样把变量汉字中的文字一个一个取出来放到进行中的汉字中呢?这就要用到第三个变量:查找字符,它是一个数字型变量,用于记录当前取到了第几个文字,它从1开始,每循环重复一次,查找字符变量的值都增加1。
在Scratch的运算模块中,有三个处理字符串的语句:

https://cdn.china-scratch.com/timg/191125/135S1D02-10.jpg

第一个语句用于连接两个字符串,我们可以将它们拼接在一起组成一个字符串。
第二个语句可以取出一个字符串中指定的一个字符。
第三个语句返回一个数字,表示字符串的长度。
我们将这三个语句中的字符串用变量替代,再加上重复执行和说语句的配合,就实现了名侦探柯南一字一字说话的动画效果。理解了三个变量与三个字符串语句的作用后,我们再去看代码逻辑是不是一下子就非常清楚了呢!
有同学提出,这种代码实现打字动画的方法有一个缺点,或者说是限制。对,就是这种方法只适用于说语句,也就是说打字的效果是角色“说”出来的。如果我们要实现《记忆碎片》中的全屏式打字动画,那还是乖乖的一个一个建造型吧。
游戏中,名侦探柯南告诉我们,如果想知道事情的真相,就必须通过时光机进入时光隧道回到过去,但是需要足够的能量才能解锁时光机,于是,我们要与AI机器人进行数学知识互动问答,每参与一个问答增加2点能量,充满12点能量,时光机就可以启动了。
代码中,说话专用角色会广播交互模式并等待,等待什么呢?就是等待能量值达到12的时候,代码才会往下继续。
https://cdn.china-scratch.com/timg/191125/135S15436-11.jpg

交互模式

接收交互模式广播的角色有多少个呢?一共有七个,一个机器人与六个按钮:

https://cdn.china-scratch.com/timg/191125/135S21007-12.jpg

角色可真不少,但是它们的代码基本是一样的,很简单:

https://cdn.china-scratch.com/timg/191125/135S21433-13.jpg

机器人与按钮们在屏幕中显示在规定好的位置上,就是这样的:

https://cdn.china-scratch.com/timg/191125/135S2AO-14.jpg

咦?!左边怎么还有个成绩单的列表,它是哪儿来的?仔细看看源码,原来它是在最后一个按钮中通过代码添加进来的。
https://cdn.china-scratch.com/timg/191125/135S21103-15.jpg

成绩单列表中存储了40个35到100之间的随机数字。六个黄色的按钮就会对这40个随机数进行求和、求平均数、求最高分等数学运算操作。
因为篇幅有限,果冻老师不会把六个按钮的运算逻辑都贴在这里讲解,所以我看了看,挑了一个最复杂的按钮进行分析,就是求最高分和最低分的差:

https://cdn.china-scratch.com/timg/191125/135S24249-16.jpg

这个按钮里面包含了求最高分和求最低分两个按钮的运算过程,学一个按钮就相当于学会了三个按钮,一举三得呀。

https://cdn.china-scratch.com/timg/191125/135S321M-17.jpg

点击这个按钮后会发送“最高分和最低分的差”的广播,并且等待接收广播的角色完成运算后,继续执行隐藏按钮并将点击次数和能量值这两个变量分别增加1和2的代码。
那接收广播的角色是谁呢?就是AI机器人:

https://cdn.china-scratch.com/timg/191125/135S32603-18.jpg

它接收到“最高分和最低分的差”的广播后,经过一段小小的思考就会说出答案:

https://cdn.china-scratch.com/timg/191125/135S353P-19.jpg

算的好快呀!到底算的准不准呢?这就得看它背后的计算逻辑了:

https://cdn.china-scratch.com/timg/191125/135S3M92-20.jpg

整个运算的逻辑可以分为三部分:找出最大值、找出最小值、计算它们的差。
找出最大值使用到两个变量,最大的数字和查找位置。首先将成绩列表中的第一个数字赋给最大的数字这个变量,接着从第二个开始(每一轮循环将查找位置的变量值加1)将列表中的数字逐个与最大的数字变量进行比较,如果小于变量不用管,如果大于就将这个值赋给变量,这样循环执行完后,最大的数字这个变量中存储的就是最大值了。
找出最小值的过程刚好与最大值相反,是一个不断记录更小的值的过程。
最后,将最大值减去最小值就是结果的差值了。
很简单的是不是?齐嘉懿同学将数学知识与游戏内容完美的结合在一起,真是不服不行呀!
数学问答任务到这里就结束了吗?还没有。齐嘉懿同学更厉害的地方在于他还细心的为每一个按钮增加了防连点的功能,防连点的意思就是当按下一个按钮,运算结果还没有出来时不能点击其它按钮,点击其它按钮是没有作用的。机器人的大脑和人脑一样,只有一个,它可不能同时运算多个数学公式哦。
这个防连点的功能是怎么实现的呢?其实很简单,我们只需要创建一个防连点的角色:

https://cdn.china-scratch.com/timg/191125/135S324Z-21.jpg

然后在角色的造型选项卡中将填充设置为透明,轮廓也设置为透明。同学们应该都知道,Scratch软件舞台区的大小是480×360,于是我们就在造型中画一个480×360大小的透明矩形:

https://cdn.china-scratch.com/timg/191125/135S42496-22.jpg

这样,我们就创建了一个和舞台区大小形状一样并且透明不可见的矩形角色,那实现防连点就很简单了,只需要在机器人运算的时候将这个矩形角色盖住所有的按钮就可以了,透明效果可以保证我们看到所有的按钮,但是当我们点击按钮时,实际上点击的是这个透明矩形,按钮的事件当然就不会被触发了,这就是防连点的原理。

https://cdn.china-scratch.com/timg/191125/135S42211-23.jpg

同学们有没有注意到,机器人的代码最后一行广播了解锁,这个解锁的意思是解开防连点的功能,让透明的矩形角色隐藏掉,这样按钮就又可以点击了,聪明!。
每点击一个按钮,能量值这个变量的值就会增加2,当我们点完六个按钮后,能量值被填满,这时名侦探柯南再一次出现,他告诉我们时光机已经开启,乘坐时光机会回到过去,游戏者会变成指挥官并操作鼠标与入侵者进行战斗。
同时,屏幕上还会显示乘坐时光机的按钮:

https://cdn.china-scratch.com/timg/191125/135S45F1-24.jpg

下一篇文章中,我们就乘坐时光机的按钮回到过去,并参与激烈的入侵者大战,是成功是失败我们拭目以待!

总结

齐嘉懿同学在他的作品中如同开挂般向我们展示了高超的Scratch编程技术,游戏还没有真正开始,文章仅仅写了一半,我们已经学会了统一变量初始化规则、背景切换的代码响应、角色透明说话不透明、编码实现打字效果、按钮防连点这些不太常见但是很实用的功能或者编码技巧,更不用说变量、列表、字符串处理、数学算法这些基础的Scratch知识点,都一一在作品中进行了展示。作为竞赛一等奖的作品真的是让我们大开眼界,吊足了大家的胃口,迫不及待的想继续看游戏的后半部分,是不是呀?

--end--

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