5. “随机”应变

5.1. 教程介绍

上节课我们在完善小猫吃鱼游戏的时候,在小猫吃到鱼之后,让鱼出现在屏幕的随机位置,增加了游戏的有趣性。

这里我们用到的是随机数,“随机数”积木块可以让我们得到一定数值范围内的一个随机的整数。

在游戏中,随机的设定随处可见。

比如精灵移动到任意位置。

../../../_images/random1.gif

比如飞机大战中随机的出现的敌机等等。

../../../_images/random2.gif

随机的存在,让游戏充满了不确定性,也让游戏更加的吸引人。

今天,我们就通过生成随机数,来做几个小项目。

首先我们一起来确认一下随机数积木块生成的数字到底是不是随机的。

5.2. 项目一 验证随机数

5.3. 项目目标

每次按下按键A,屏幕显示生成的随机数。多试几次,看看这个随机数是不是真的没有规律。

5.4. 项目操作

1.首先我们需要创建一个变量,变量就是一个变化的量,在这个项目中就是随机数。

我们之前的游戏中,用到的得分和生命值在我们游戏过程中会发生变化,它们也是变量。我们当时没有创建“得分”和“生命值”变量,是因为在调用“得分”和“生命值”积木块的时候,内部已经帮我们创建好了。

而这次,我们需要自己创建一个变量。

📍点击变量工具箱中的设置变量,为我们的变量取名为:随机数。

变量创建完成后,我们可以得到3个积木块,从上往下依次是“变量值”积木块,“给变量赋值”积木块,“修改变量值”积木块。

../../../_images/random3.png
  1. 我们需要在按键按下时,显示随机数。

    📍找到“当按键A按下”积木块拖取到代码区任意位置。

    ../../../_images/random4.png
  2. 为随机数这个变量设置数值。

    📍拖取将“随机数设为”积木块到“当按键A按下”积木块内部,设置的值为“生成随机数”积木块得到的数值。

    ../../../_images/random5.png

4.把随机数在屏幕上显示出来。

📍游戏工具箱中的“显现”积木块可以把里面的内容显示在屏幕的中间。拖取“显现”积木块到“将随机数设为”积木块下方。

../../../_images/random6.png

📍我们把“随机数”变量积木块拖动到“显现”积木块后面的内容里。

../../../_images/random7.png

但是我们发现这时候显现积木块前面有个黑色的感叹号,为什么会出现这种情况呢🤔?

因为显现后面的内容要求是字符串,而我们的随机数是一个数字,数字不能直接作为显示的内容。

怎么解决这个问题呢🤔?

5.将数字转化为文本。

📍点开工具箱中的高级,点击下方的文本工具箱,找到“将数字转为文字”积木块。这个积木块可以把数字转为文字,比如0->“0”, 1->“1”。

../../../_images/random8.png ../../../_images/random9.png

现在,按下按键A看一下每次屏幕上显示的值,是不是一个随机的数呢🎮?

../../../_images/random10.gif

有的同学说,这个就显示一个数字,我不解释的话别人不知道我做的是什么。既然今天介绍了“显示内容”积木块,那我们就把项目完善一下,让它显示的内容更加丰富,更有提示性。

📍首先,我们在一开始的时候,提示一下玩法,告诉别人:按下按键A生成随机数。

../../../_images/random11.png

📍然后,在显示随机数的时候,显示:随机数为:**(随机数值)。

📍这个时候,我们显示的内容有两个,一个是“随机数为:“, 另一个是随机数的值。我们可以用文本中的“组合字符串”积木块,把这两个文本结合起来一起显示。

../../../_images/random12.png

这样,第一个文本框中输入“随机数为”,第二个文本框中放入随机数变量。

📍在显示的时候,可以“将数字随机数转为文字”积木块拖取到第二个文本框,如下图显示。

../../../_images/random13.png

📍你也可以直接用随机数的变量,如下图所示。

../../../_images/random15.png

为什么可以直接用变量呢🤔?

因为组合字符串这个积木块可以自动的把数字转换为文字。

这下,我们显示的内容就比较完善了,让你的小伙伴也一起试试吧🎮!

../../../_images/random16.gif

5.5. 项目二 屏幕颜色变变变

5.6. 项目目标

每次按下按键A,让我们的屏幕显示随机的颜色。

5.7. 项目操作

1.首先,按下按键A,我们用“设置屏幕颜色”积木块来给屏幕设置一个颜色,颜色可以自己选一个,我选择了粉色。

../../../_images/random17.png

这里我们看到,屏幕的背景颜色选择一共有16,怎么能从16个颜色中选择任意的一个颜色呢🤔?

2.我们一直都用的图形化编程,今天我们一起来看一下这个图形化程序对应的JavaScript语言是什么样子的。我们点击方块后边的{ }JavaScript来切换到JS语言。

../../../_images/random18.png

对应的程序如下:

../../../_images/random19.png

第一行:对应图像化程序中的当按键A按下积木块。

../../../_images/random20.webp

第二行:对应设置屏幕背景颜色积木块,我们可以看到设置背景颜色积木块后面参数是3,也就是说3代表的是粉色。

../../../_images/random21.webp

现在我们回到图形化程序中,把粉色改为橙色。

../../../_images/random22.png

我们可以看到对应的JS程序中,设置背景颜色中的参数变为4。

../../../_images/random23.webp

大家可以多改几个颜色,看一下对应JS程序中的参数是多少。

那么,如果我们想得到一个随机的屏幕颜色,是不是可以把背景颜色设为0-15的随机数呢🤔?

一起试一下!

3.我们把范围为0-15的”随机数“积木块放到设置背景颜色积木块中:

../../../_images/random24.png

为了验证一下这个颜色是不是和数值相对应,我们可以同时把随机数值也显示出来。

../../../_images/random25.png

4.当然,我们的程序要尽可能的做到完整,同样的,在一开始我们还是加上文字提示

../../../_images/random26.png

好了,接下来下载到掌机中看一下效果吧🎮!

../../../_images/random27.gif

下载到游戏掌机

../../../_images/random28.png

5.8. 总结

今天我们通过随机数的两个项目:

1 验证了随机数是不是真的随机的;

2 学习了怎么在屏幕上显示字符;

3 学习了数字转化成文字,以及组合字符串的使用;

4 了解了颜色的秘密,知道图形化程序和JS代码的对应关系。