青蛙过河

教学原文参考：青蛙过河

这篇文章会介绍，如何在 Scratch 3 里使用多个角色，搭配重复、侦测碰到其他角色、定位、函式...等积木，实作一个青蛙过河的小游戏 ( 键盘控制青蛙移动，踩在漂浮的木头上通过河流 )。

相关文章参考：定位、重复、侦测碰到其他角色、函式。

角色设定

在角色编辑区，删除猫咪角色，加入「青蛙」角色，使用「绘画」功能，加入「木头」和「河流」两个空白角色 ( 参考：Scratch 角色设定 )。

点选「青蛙」角色，切换「造型」页签，删除青蛙的舌头，避免突出的舌头造成判断错误，并将「高度」调整为 30，对齐画布中心。

为什麽高度要设定为 30 呢？因为待会青蛙会采用 40 为单位进行上下移动，为了画面美观以及避免超过范围造成判断错误，所以使用 30。

点选「木头」角色，切换「造型」页签，使用方形工具，画出两个咖啡色的木头造型，比较大的造型 ( 名称 200 ) 尺寸设定为 200x38，比较小的造型 ( 名称 100 ) 尺寸设定为 100x38，对齐画布中心。

为什麽高度要设定为 38 呢？因为待会青蛙会采用 40 为单位进行上下移动，为了画面美观，保留木头之间会有一点缝隙可以看到下方的河流，所以使用 38。

点选「河流」角色，，切换「造型」页签，使用方形工具，画出蓝色的河流造型，尺寸设定为 480x280，对齐画布中心。

为什麽高度要设定为 280 呢？因为待会青蛙会采用 40 为单位进行上下移动，需要保留最上方和最下方的空间，让青蛙有出发和抵达的位置。

积木程序原理 ( 河流 )

点击「河流」角色，设定点击绿旗的时候，将河流移动到最下层，避免遮住青蛙或木头。

完成後，点击绿旗，舞台区里应该可以看见下图的画面。

积木程序原理 ( 木头 )

点击「木头」角色，设计出「许多木头在河流上漂动」的效果，首先编辑点击绿旗的程序：

• 当绿旗被点击时，隐藏本尊。
• 定位到舞台右侧下方 ( 324=240+100-16，-120 表示在贴近河流的下缘 )
• 使用重复七次积木，建立七个分身，每个分身向上移动 40 点，建立後更换造型。

由於角色在舞台边界时，会在舞台上突出 15 点，所以计算最边界的座标，使用边界值 ( 240 ) 加上角色的一半宽 ( 200/2=100 ) 在减掉 16 ( 为了让判断更准确，使用 16 ) 之後，就是角色在边界的座标位置。

新增一个名为「往右移」的函式，负责「短木头」往右移动的程序：

• 使用重复无限次积木，每次重复时执行：
  • 显示分身、并将 x 改变 2 ( 往右移动 )。
  • 判断如果 x 座标大於 273，将分身隐藏，移动回舞台左侧 ( -274 )。
  • 等待 0.1～1 秒後再次重复。
  • 判断如果碰到青蛙角色，新增变数 x 设定为 2 ( 新增变数 x 可以控制青蛙角色的移动 )。

因为短木头的长度为 100，所以角色在边界的座标为 -240-50+16 或 240+50-16。

新增一个名为「往左移」的函式，负责「长木头」往右移动的程序：

• 使用重复无限次积木，每次重复时执行：
  • 显示分身、并将 x 改变 -2 ( 往左移动 )。
  • 判断如果 x 座标小於 -323，将分身隐藏，移动回舞台右侧 ( 324 )。
  • 等待 0.1～1 秒後再次重复。
  • 判断如果碰到青蛙角色，新增变数 x 设定为 -2 ( 新增变数 x 可以控制青蛙角色的移动 )。

因为长木头的长度为 200，所以角色在边界的座标为 -240-100+16 或 240+100-16。

设定分身产生时的动作：

• 等待 0.1～3 秒後，再执行移动的程序。
• 判断如果造型名称是 200 ( 长木头 )，执行「往左移」函式。
• 判断如果造型名称不是 200 ( 表示是 100 短木头 )，执行「往右移」函式。

为什麽要使用 0.1 呢？如果随机数使用 0～3，数值只会有 0、1、2、3 的整数，如果使用小数点，就可以有 0.1、0.2...等的小数点随机数。

完成後，点击绿旗，木头就会开始在水上漂动，长木头往左漂，短木头往右漂。

积木程序原理 ( 青蛙 )

点击「青蛙」角色，编辑点击绿旗的程序：

• 将青蛙移动到最上层，避免被木头或河流遮住。
• 定位到舞台中间下方 ( 0, -160 )。
• 使用重复无限次积木，每次重复执行：
  • 新增变数 ok，设定为 1。
  • 判断如果碰到木头角色，就将青蛙的 x 座标改变为 x 变数的数值，因为 x 变数会依据木头的方向而有所不同，青蛙只要碰到木头，就会跟随木头移动。
  • 接着再判断如果掉到河里 ( 碰到河但是没有碰到木头 )，将 ok 设定为 0，亮度设定为 80，讲出「oh!!!」持续两秒，两秒後恢复原本的亮度，移动回舞台中间下方。

新增另外一组点击绿旗的程序，负责青蛙的左右移动：

• 使用重复无限次积木。
• 每次重复时，等待直到变数 ok 等於 1 再继续 ( 因为如果掉到河里时会让 ok 等於 0，不能进行移动 )。
• 如果按下向左键，将 x 座标减少 2 ( 往左移动 )。
• 如果按下向右键，将 x 座标增加 2 ( 往右移动 )。

再度新增另外一组点击绿旗的程序，负责青蛙的上下移动：

• 使用重复无限次积木。
• 每次重复时，等待直到变数 ok 等於 1 再继续 ( 因为如果掉到河里时会让 ok 等於 0，不能进行移动 )。
• 如果按下向下键，将 y 座标减少 40 ( 往下移动 )，判断如果 y 座标小於 -160，就将 y 座标设定为 -160，避免超过画面造成座标不是以 40 为单位移动。
• 等待直到放开向下键再继续，避免按下键盘时发生连续按压的状况。
• 如果按下向上键，将 y 座标增加 40 ( 往上移动 )，判断如果 y 座标大於 160，就将 y 座标设定为 160，避免超过画面造成座标不是以 40 为单位移动。
• 等待直到放开向下键再继续，避免按下键盘时发生连续按压的状况。

完成後，点击绿旗，就可以开始进行青蛙过河的游戏。

加入吃苹果机制

在角色面板里，增加一个 Apple 角色。

切换到造型页签，将尺寸调整为 30x30，对齐画布中心。

点击「青蛙」角色，在第一组点击绿旗程序里，加入碰到 Apple 的判断，如果碰到 Apple，将青蛙移动回舞台中间下方 (0, -160)，并发送 eat 讯息。

点击「Apple」角色，设定点击绿旗时，将 Apple 定位在舞台中间上方 (0, 160)，如果收到 eat 讯息，将 x 座标设定为 -220～220 的随机数。

完成效果

完成後，点击绿旗，就可以开始进行青蛙过河吃苹果的游戏。

范例解答

范例解答：青蛙过河

延伸练习

如果已经熟悉了青蛙过河的原理，还可以尝试更多好玩的作法：

• 加上「计时与计分」的机制。( 解答 )

关於我

大家好，我是 OXXO，是个即将迈入中年的斜杠青年，如果对我有点兴趣(笑，可以与我联系，一起来做点有玩又有创意的东西吧！

• OXXO.STUDIO 部落格
• OXXO.STUDIO 粉丝团
• Steam 教育学习网
• Steam 教育学习网粉丝团