Day22 ( 高级 ) 猫咪万花筒

猫咪万花筒

教学原文参考:猫咪万花筒

这篇文章会介绍,在 Scratch 3 里使用扩充功能的画笔,搭配函式、变数、盖章、换造型、定位、重复...等积木,做出一个猫咪万花筒的效果 ( 舞台上许多猫咪以镜射的方法不断移动、转动 )。

相关文章参考:扩充功能的画笔重复函式盖章换造型定位

角色设定

点击猫咪角色,切换到造型页签,复制另外三个猫咪造型,使用「横向翻转」和「直向翻转」功能,将四个造型翻转成下图的样子。

Scratch 3 教学 - 猫咪万花筒

按照下图的顺序排列。

Scratch 3 教学 - 猫咪万花筒

积木程序原理 ( 盖章 )

从左侧积木清单里,新增一个名为「动作」的函式,加入 x、y、deg、size、num、color 六个参数,勾选「执行完毕再更新画面」。

  • 万花筒效果会在画面上出现很多猫咪,因为每只猫咪都需要做对应的镜射旋转 ( 至少两只为一组 ),如果使用分身或角色,会造成程序相当复杂且不容易处理,所以这个范例会使用「盖章」来解决这些复杂的问题

  • 建立函式的目的,在於用同样的程序内容,控制舞台上使用盖章出现的每一个猫咪,大幅减少程序的复杂度

Scratch 3 教学 - 猫咪万花筒

编辑「动作」函式内容:

  • 显示角色 ( 因为函式结束後会隐藏角色,避免互相干扰 )。
  • 根据 xy 参数,定位到指定坐标。
  • 根据 deg 参数,面朝 90+deg 度 ( 预设 90 度,为了避免转错方向,所以使用 90+deg )。
  • 根据 size 参数,设定尺寸。
  • 根据 num 参数,设定对应的造型。
  • 根据 color 参数,设定图像的颜色 ( 参考「图像效果」 )
  • 盖章,将目前角色的样子,盖印在舞台上
  • 隐藏角色。

Scratch 3 教学 - 猫咪万花筒

编辑点击绿旗时的动作:

  • 新增 deg 变数,设定为 0。
  • 新增 size 变数,设定为 100。
  • 使用重复无限次积木,每次重复执行:
    • 清除画面笔迹。
    • 将 deg 变数增加 5。
    • 执行「动作」函式。

范例中动作函式的参数 x ( -100 )、y ( 50 )、deg ( 5 )、size ( 100 )、num 造型 ( 1 )、color ( 0 )

Scratch 3 教学 - 猫咪万花筒

完成後,点击绿旗,舞台上就会出现一只旋转的猫咪 ( 很像单纯用旋转控制角色 )。

Scratch 3 教学 - 猫咪万花筒

积木程序原理 ( 出现其他猫咪 )

加入另外三个「不同参数」的动作函式,点击绿旗,舞台上就会出现四只旋转的猫咪。

Scratch 3 教学 - 猫咪万花筒

Scratch 3 教学 - 猫咪万花筒

再加入另外四个「不同参数」的动作函式,点击绿旗,舞台上就会出现八只旋转的猫咪。

Scratch 3 教学 - 猫咪万花筒

Scratch 3 教学 - 猫咪万花筒

最後新增另外一个点击绿旗积木,使用重复无限次积木,让 size 变数的数值不断变大再不断变小。

Scratch 3 教学 - 猫咪万花筒

完成效果

完成後,点击绿旗,舞台上就会出现八只不同颜色的猫咪组成的万花筒效果。

Scratch 3 教学 - 猫咪万花筒

范例解答

范例解答:猫咪万花筒

延伸练习

如果已经熟悉了猫咪万花筒的原理,还可以尝试更多好玩的作法:

  • 尝试将猫咪变成更多的数量。

关於我

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


<<:  33岁转职者的前端笔记-DAY 22 成绩计算机练习笔记

>>:  GCP硬碟加大

Day12:今天来谈一下Microsoft-Defender-for-Endpoint的设定及管理自动化

在Microsoft Defender for Endpoint中有提供自动化调查和补救功能。 自动...

[DAY-10] 人才密度最大化 留任测试

理想上 一个组织只要慎用选择人才 这些精挑细选而来的员工就会永远发光发热 BUT 有时候是你用人辜...

JavaScript 之旅 (29):Logical assignment operators ( &&=、||= 和 ??= )

本篇介绍 ES2021 (ES12) 提供的 Logical assignment operato...

Day01 - 目前才看到第三章 Object

this&Object Prototype Ch3 Object 我的天,真的太久没翻你,试...

Adaptor 转接器模式

今天开始要介绍 Structural patterns。先前的 Creational pattern...