倒数计时器 ( 大数字版 )

在“倒数计时 ( 基本版 )”里已经可以实作基本的倒数计时器，这篇教学将会更进一步，将倒数计时器改成“大型数字”的版本，并可以打开“设定画面”来进行倒数时间的设定。

快速导览：

• 绘制角色造型
• 积木程序原理 ( number )、积木程序原理 ( setting )
• 积木程序原理 ( start )、积木程序原理 ( reset )
• 积木程序原理 ( bg )、积木程序原理 ( ok )
• 变数设定
• 完成效果

绘制角色造型

使用“绘画”工具建立角色“number”，作为倒数计时的“显示数字”，使用“文字”工具在画布中输入数字，尺寸大约 56x124 ( 左侧造型可以看到实际尺寸 )。

绘制 10 组造型，造型内容是 1～9 和 0，并根据造型内容设定造型名称为 1～10 ( 数字 0 的名称为 10 )。

使用“绘画”工具建立角色“setting”，作为倒数计时的“设定按钮”，点击后会弹出设定画面，使用“方形”工具在画布中绘制一个白色长方形，尺寸大约 279x86。

白色长方形的长宽尺寸如下图所示，可以将数字 00:00 完全包覆，根据个人设定的不同进行调整。

使用“绘画”工具建立角色“start”，作为倒数计时的“开始/暂停按钮”，点击后会开始倒数计时或暂停，角色中有三组造型，分别使用“方形”工具在画布中绘制一个绿色、红色和橘色长方形，绿色的文字为 START，红色的文字为 STOP，橘色的是 TIME's UP，尺寸大约 241x67。

使用“绘画”工具建立角色“reset”，作为倒数计时的“重新设定按钮”，点击后会将倒数时间归零重置，使用圆形和方形工具绘制按钮，尺寸大约 70x67。

使用“绘画”工具建立角色“bg”，作为倒数计时的“背景/设定面板”，角色包含两组造型，第一组是背景画面，名称设定为 bg，使用文字工具绘制。

角色“bg”的第二组造型是是设定面板，名称设定为 popup，使用方形工具和文字工具绘制，尺寸大约是 405x282，几乎将整个舞台遮蔽。

使用“绘画”工具建立角色“ok”，作为倒数计时的“确认设定按钮”，点击后会设定倒数时间，使用方形工具和文字绘制按钮，尺寸大约 122x55。

所有角色完成后，隐藏 ok 角色，并将其他角色在舞台上如下图的配置进行排列。

积木程序原理 ( number )

点击“number”角色，从左侧积木清单里新增函数“显示数字”，函数里使用 x、y 和 num 三个参数，并勾选“执行完毕再更新画面”，这个函数会负责将放在 num 里的数字，转换成大型文字的方式显示。

“显示数字”函数里，使用 num_string 变数将 num 数字转换成文字，并在只有个位数字时于前方补 0，接着依序取出十位数和个位数，根据数字替换造型，接着透过“画笔”积木的“盖章”功能，在画面中盖下对应的造型。

完成后简单执行函数，舞台上就会出现大型数字。

新增函数“显示时间”函数，勾选“执行完毕再更新画面”，这个函数会负责显示目前倒数的时间。

设定点击绿旗的时候，将“分钟”和“秒”变数为 0，并执行“显示时间”函数，函数内容使用“显示数字”函数，在指定的位置显示“分钟、与“秒”变数的数值。

设定收到广播“start”的时候，如果“分钟”和“秒”都不为 0，就会进行每秒一次的重复循环，每次重复时将秒数减少 1，并换算分钟和秒数，当重复结束后发送“end”广播消息以及播放闹钟音效。

按照下图设定收到广播“ok”、“reset”和“stop”的行为，ok 表示倒数时间设定完成要显示时间，reset 表示时间归零重设，stop 表示暂停倒数，其中 reset 和 stop 会透过“停止这个对象的其他程序”来停止倒数的重复循环。

积木程序原理 ( setting )

点击“setting”角色，点击绿旗时除了定位，也设定图像效果“幻影”为 99.9 ( 由于设定 100 会造成“当角色被点击”积木无法点击，所以要设定为 99.9 使其“看不到但又点得到”，不过使用重复循环的方式仍然可以点击，参考“点击隐藏的角色” )，接着设定当角色被点击时，如果 state 变数为 stop 时就会发送 setting 广播消息，避免在倒数过程中还可以同时进行设定。

积木程序原理 ( start )

点击“start”角色，点击绿旗时除了定位，设定 state 变数为 stop，切换造型为 start，并设定面朝 90 度 ( 因为倒数结束时会抖动按钮表示时间到，所以一开始先定位角度 )。

设定点击 start 角色时，停止其他所有重复的程序 ( 停止抖动效果 )，并根据目前的名称发送对应的信号和切换对应的造型。

设定收到广播“stop”和“reset”信号的程序，两者差异在于 reset 需要额外设定面朝 90 度以及停止其他重复循环。

设定收到广播“end”信号时表示倒数结束，除了将 state 设定为 end 以及改变造型，也会透过重复循环制作抖动效果。

积木程序原理 ( reset )

点击“reset”角色，设定点击角色时，发送 reset 信号。

积木程序原理 ( bg )

点击“bg”角色，设定点击绿旗时，将造型改成 bg 并移动到最上方第二层，同时隐藏“分钟”和“秒”变数，收到 setting 信号时改成 popup 造型并显示变数，收到 ok 信号时又换成 bg 造型和隐藏变数，这个做法主要可以让角色在“背景”与“设定画面”之间做切换。

积木程序原理 ( ok )

点击“ok”角色，设定点击绿旗时，这个角色会随着 bg 角色而显示或隐藏，当 bg 角色是 popup 造型时会显示，是 bg 造型时会隐藏，点击角色时后发送 ok 的广播消息。

变数设定

点击“bg”角色，从左侧积木清单里，将“分钟”和“秒”变数勾选显示，并在舞台中使用鼠标在变数上按右键，选择“滑杆”。

设定为滑杆后，继续按右键选择“变更滑杆数值范围”，将“秒”变数的数值范围设定为 0～59，“分钟”变数的数值范围设定为 0～99。

完成后点击数字打开设定画面，将按照下图将变数排列到适合的位置。

完成效果

所有角色的程序都完成后，点击绿旗，点击数字就能设定倒数时间，点击 START 就开始倒数，时间结束后会产生抖动效果。

范例解答

范例解答：Scratch 教学 - ( 具备设定画面、大型数字 )

意见反馈