9. 神奇的循环

9.1. 教程介绍

在上节课程中我们讲解了自动驾驶,同学们了解了地图的绘制,以及精灵和图块的重叠事件积木块的使用,相信同学们的图形化编程知识又增加了不少。💡

在编程游戏中一个效果的实现会有有好多种编程思路:

比如判断猫吃鱼的条件由设置判断坐标轴一样→ 两个精灵重叠;设置随意颜色由设置不同颜色→ 调用选取随机数积木块;设置地图指示牌由设置指示牌精灵位置→ 在地图中放置指示牌图块。

可见,同样的游戏效果可以有不同的编程方式,我们在编程中可以多利用发散思维,寻找编程的最优解。

这节课,我们通过编程游戏项目《种草莓》来了解循环积木块的使用,以及不断优化编程出一个简洁逻辑清晰的程序。

9.2. 种草莓

想到种草莓是不是脑海里想到了“开心农场”游戏里面蔬菜整齐分布的场景:

🍇🍈🍉🍊🍋🍌🍍🍎🍏🍑

这节课,我们来利用编程创建一个“开心农场”,需要设置草莓的草地背景,草莓的形象,草莓的位置,一起来编程一下!

9.3. 设置草莓位置

每个精灵大小是16*16像素,所以第一个的草莓的坐标为(8,8),第一排Y坐标不变, 草莓的X坐标为前一个草莓位置数值+16。比如第一个草莓位置(8,8),第二个草莓位置(8+16=24,8),以此类推。👇

../../../_images/course9.1.png
../../../_images/course9.2.png

设置到后面同学们可能会有所疑惑了:这样一个个设置草莓样式和位置是不是太麻烦了点,不想做一个没有感情的种草莓机器,那有没有简单的编程办法呢?😕

🍓 🍓 🍓

9.4. 循环积木块的使用

这里可以用到“重复N次”循环积木块。

积木块含义:

设置指定的次数来重复运用内部的程序。

积木块位置:

循环工具箱-》重复N次,执行()

种满第一排的草莓需要十个草莓,因此设置重复10次,将“草莓样式”积木块和“设置草莓位置”积木块拖取到循环积木块里面。👇

../../../_images/course9.3.png

现在的草莓重复种在了(8,8)的位置,如何设置种满一排呢?

循环积木块的作用是重复运行内部的积木块,那么我们只要设置草莓的位置基于上一个草莓位置的变化,就可以不断重复设置草莓位置了。

在前面的种草莓我们已经找到了位置规律,即:

草莓位置X(新)=草莓位置X(旧)+16

这里的X每次都会以16个数值幅度增加,我们可以使用变量积木块。

变量

在之前在”随机应变“游戏中讲过,变量几乎在编程游戏中都会使用到,一个游戏中可以包含多个不断变化的变量。变量可以放置在需要的事件中,也可以设置数值和数值变化幅度。

我们在变量工具箱中设置一个变量“X”。将变量X积木块替换设置草莓位置的X值。👇

../../../_images/course9.4.gif

变量工具箱中的另外两个积木块从上往下分别用来设置特定的数值和设置变量的变化幅度。👇

../../../_images/course9.5.png

我们把第一个草莓的X坐标设为8(精灵大小16*16,坐标为精灵中心点位置,即(8,8))。将变量工具箱中“将X设为8”积木块拖取到“当开始时”积木块内部。👇

../../../_images/course9.61.png

后面的草莓的X坐标值都是在前一个坐标值+16,以16为幅度更改X坐标。👇

../../../_images/course9.7.png

想要看到草莓一个个种下的效果,我们可以加一个延时。👇

../../../_images/course9.81.png

现在,第一排的草莓就种好了,模拟器看看效果吧!👇

../../../_images/course9.91.gif

接下来,我们来种第二排草莓,第二排与第一排相比,Y坐标+16,我们需要增加一个Y坐标变化16幅度的循环,种两排就是循环两次。并且在第一排草莓种好之后,我们要将草莓的初始X坐标设置为8。👇

../../../_images/course9.11.png

那么草莓的进入循环的顺序应该是这样的:👇

1.种植第一排草莓( X8(+16 /9次),Y8 )

2.从第一行换到第二行:( X8,Y8(+16/1次))

3.种植第二行的草莓( X8(+16 /9次),Y16)

TIPS:进入循环事件中就进入了循环的第一次,因此后面的以16为幅度的变化次数为循环的总次数减1次。

整个屏幕可以种8排草莓,我们想要种满屏幕的话,只要将原来的Y坐标重复2次改为重复8次就可以了。👇

../../../_images/course9.12.png
../../../_images/course9.13.png

保存图片,导入到Arcade编辑器查看编程。▴

现在我们是先种第一排,然后第二 第三排,如果想要换个方式,先种第一列,然后第二 第三列,这样的话要怎么办呢?😕

按照同样的办法,我们先让内部Y坐标循环8次,再让外部X坐标循环10次。👇

../../../_images/course9.14.png
../../../_images/course9.15.png
width

300

上面的程序已经可以让我们轻松的种草莓了,还有更加简洁的程序设计嘛?😕

作为一个合格的设计师,我们对程序的设计有着更高的要求,比如更加简洁明了。

是的,我们还有更加简洁的编程方式。

🍓 🍓 🍓

9.5. 优化编程方式

我们看到循环里还有这个积木块,和之前的不同的是,这里面还有一个index的值。👇

../../../_images/course9.16.png

积木块含义:设置指定的次数循环运行内部的程序,index作为索引变量指代循环运行的第N次,可以放置到循环积木块内部的积木块中依次运行每一次的程序。

之前的种草莓程序中,设置第一排草莓X坐标循环了十次,但是我们并不知道当前的循环是第几次,而这个积木块,第几次循环可以用“index”变量积木块表示。

知道是第几次循环可以给我们带来什么样的便利呢?😕

我们不需要给X设置变化幅度来设置X坐标值了,可以直接通过简单的数学计算,得出每次的坐标。

对于第一排的草莓,每个草莓的X坐标可以这样表示:👇

第一个草莓, index=0, 坐标X= 8

第二个草莓, index=1, 坐标X=16*1+8

第三个草莓, index=2, 坐标X=16*2+8

第四个草莓, index=3, 坐标X=16*3+8

。。。

我们可以用数学工具箱中的“数学公式”积木块表示X坐标值:👇

../../../_images/course9.17.png

将“X坐标公式”积木块替换之前的“X变量”积木块,修改后的程序如下:👇

../../../_images/course9.18.png

同样的,我们也用这个方法修改Y坐标和循环次数:👇

../../../_images/course9.19.png

添加了循环Y坐标后我们发现,种草莓程序上出现了一些问题,游戏并没有按照一排一排的种,而是对角线自动种草莓了,这是为什么呢?😕

因为每一个“对于0至N的index”积木块中的index只能指代一个循环的序数数值。现在的程序中出现了两个index变量,因此设置Y坐标的循环积木块中的index我们要重新创建一个新的变量inedxy来替换,不然会和内部的index混淆。👇

../../../_images/course9.20.gif

现在,用这么简单的一段程序就可以实现种草莓了,不用给X Y设置初始值,也不用修改X Y的值了,这样的程序是不是看起来更加的简洁?👇

../../../_images/course9.21.png

学会了使用循环积木块之后,我们还可以很方便的自己设计一块地形,然后来种草莓,只需要找到规律,然后修改循环内部位置的算法就可以了。

🍓🍓🍓

可见,对于编程语言就和解答题目一样,我们在做题时寻找着题目的最优解,在编程中不断推导出简洁优美,逻辑性强的程序语言。在一次次遇到问题,思考问题,解答问题的过程闭环中,完成思维能力和编程能力的螺旋式提高。

9.6. 问答考验

常量和变量的关系

解析:变量是在游戏中可以变化的量,如之前随机应变游戏中创建随机数变量,种草莓中X坐标变量,index变量,这里变量的数值可以按照变化幅度变化;常量是不可以变化的量,如游戏中的精灵,大小不能变化。

循环是否可以嵌套,是先执行里面的循环,还是外面的循环?

解析:先执行内部的循环,在执行外部的循环

———————————— END ———————————————

../../../_images/course6.37.gif