搜尋

倒數計時器 ( 具備設定畫面、大型數字 )

在「倒數計時 ( 基本版 )」裡已經可以實作基本的倒數計時器,這篇教學將會更進一步,將倒數計時器改成「大型數字」的版本,並可以開啟「設定畫面」來進行倒數時間的設定。

快速導覽:

繪製角色造型

使用「繪畫」工具建立角色「number」,作為倒數計時的「顯示數字」,使用「文字」工具在畫布中輸入數字,尺寸大約 56x124 ( 左側造型可以看到實際尺寸 )。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 使用「文字」工具在畫布中輸入數字

繪製 10 組造型,造型內容是 1~9 和 0,並根據造型內容設定造型名稱為 1~10 ( 數字 0 的名稱為 10 )。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 根據造型內容設定造型名稱為 1~10

使用「繪畫」工具建立角色「setting」,作為倒數計時的「設定按鈕」,點擊後會彈出設定畫面,使用「方形」工具在畫布中繪製一個白色長方形,尺寸大約 279x86。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 作為倒數計時的「設定按鈕」

白色長方形的長寬尺寸如下圖所示,可以將數字 00:00 完全包覆,根據個人設定的不同進行調整。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 可以將數字 00:00 完全包覆

使用「繪畫」工具建立角色「start」,作為倒數計時的「開始/暫停按鈕」,點擊後會開始倒數計時或暫停,角色中有三組造型,分別使用「方形」工具在畫布中繪製一個綠色、紅色和橘色長方形,綠色的文字為 START,紅色的文字為 STOP,橘色的是 TIME's UP,尺寸大約 241x67。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 倒數計時的「開始/暫停按鈕」

使用「繪畫」工具建立角色「reset」,作為倒數計時的「重新設定按鈕」,點擊後會將倒數時間歸零重置,使用圓形和方形工具繪製按鈕,尺寸大約 70x67。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 倒數計時的「重新設定按鈕」

使用「繪畫」工具建立角色「bg」,作為倒數計時的「背景/設定面板」,角色包含兩組造型,第一組是背景畫面,名稱設定為 bg,使用文字工具繪製。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 倒數計時的「背景/設定面板」

角色「bg」的第二組造型是是設定面板,名稱設定為 popup,使用方形工具和文字工具繪製,尺寸大約是 405x282,幾乎將整個舞台遮蔽。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 第二組造型是是設定面板

使用「繪畫」工具建立角色「ok」,作為倒數計時的「確認設定按鈕」,點擊後會設定倒數時間,使用方形工具和文字繪製按鈕,尺寸大約 122x55。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 倒數計時的「重新設定按鈕」

所有角色完成後,隱藏 ok 角色,並將其他角色在舞台上如下圖的配置進行排列。

Scratch 教學 - 倒數計時器 ( 具備設定畫面、大型數字 ) - 如下圖的配置進行排列

積木程式原理 ( number )

點擊「number」角色,從左側積木清單裡新增函式「顯示數字」,函式裡使用 x、y 和 num 三個參數,並勾選「執行完畢再更新畫面」,這個函式會負責將放在 num 裡的數字,轉換成大型文字的方式顯示

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 新增函式「顯示數字」

「顯示數字」函式裡,使用 num_string 變數將 num 數字轉換成文字,並在只有個位數字時於前方補 0,接著依序取出十位數和個位數,根據數字替換造型,接著透過「畫筆」積木的「蓋章」功能,在畫面中蓋下對應的造型。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 新增函式「顯示數字」

完成後簡單執行函式,舞台上就會出現大型數字。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 舞台上就會出現大型數字

新增函式「顯示時間」函式,勾選「執行完畢再更新畫面」,這個函式會負責顯示目前倒數的時間

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 新增函式「顯示時間」函式

設定點擊綠旗的時候,將「分鐘」和「秒」變數為 0,並執行「顯示時間」函式,函式內容使用「顯示數字」函式,在指定的位置顯示「分鐘、與「秒」變數的數值。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 執行「顯示時間」函式

設定收到廣播「start」的時候,如果「分鐘」和「秒」都不為 0,就會進行每秒一次的重複迴圈,每次重複時將秒數減少 1,並換算分鐘和秒數,當重複結束後發送「end」廣播訊息以及播放鬧鐘音效。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 每次重複時將秒數減少 1

按照下圖設定收到廣播「ok」、「reset」和「stop」的行為,ok 表示倒數時間設定完成要顯示時間,reset 表示時間歸零重設,stop 表示暫停倒數,其中 reset 和 stop 會透過「停止這個物件的其他程式」來停止倒數的重複迴圈

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 設定收到廣播「ok」、「reset」和「stop」的行為

積木程式原理 ( setting )

點擊「setting」角色,點擊綠旗時除了定位,也設定圖像效果「幻影」為 99.9 ( 由於設定 100 會造成「當角色被點擊」積木無法點擊,所以要設定為 99.9 使其「看不到但又點得到」,不過使用重複迴圈的方式仍然可以點擊,參考「點擊隱藏的角色」 ),接著設定當角色被點擊時,如果 state 變數為 stop 時就會發送 setting 廣播訊息,避免在倒數過程中還可以同時進行設定

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 設定圖像效果「幻影」為 99.9

積木程式原理 ( start )

點擊「start」角色,點擊綠旗時除了定位,設定 state 變數為 stop,切換造型為 start,並設定面朝 90 度 ( 因為倒數結束時會抖動按鈕表示時間到,所以一開始先定位角度 )。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 設定面朝 90 度

設定點擊 start 角色時,停止其他所有重複的程式 ( 停止抖動效果 ),並根據目前的名稱發送對應的訊號和切換對應的造型。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 根據目前的名稱發送對應的訊號和切換對應的造型

設定收到廣播「stop」和「reset」訊號的程式,兩者差異在於 reset 需要額外設定面朝 90 度以及停止其他重複迴圈。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 收到廣播「stop」和「reset」訊號的程式

設定收到廣播「end」訊號時表示倒數結束,除了將 state 設定為 end 以及改變造型,也會透過重複迴圈製作抖動效果。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 透過重複迴圈製作抖動效果

積木程式原理 ( reset )

點擊「reset」角色,設定點擊角色時,發送 reset 訊號。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 點擊角色時,發送 reset 訊號

積木程式原理 ( bg )

點擊「bg」角色,設定點擊綠旗時,將造型改成 bg 並移動到最上方第二層,同時隱藏「分鐘」和「秒」變數,收到 setting 訊號時改成 popup 造型並顯示變數,收到 ok 訊號時又換成 bg 造型和隱藏變數,這個做法主要可以讓角色在「背景」與「設定畫面」之間做切換

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 讓角色在「背景」與「設定畫面」之間做切換

積木程式原理 ( ok )

點擊「ok」角色,設定點擊綠旗時,這個角色會隨著 bg 角色而顯示或隱藏,當 bg 角色是 popup 造型時會顯示,是 bg 造型時會隱藏,點擊角色時後發送 ok 的廣播訊息。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 隨著 bg 角色而顯示或隱藏

變數設定

點擊「bg」角色,從左側積木清單裡,將「分鐘」和「秒」變數勾選顯示,並在舞台中使用滑鼠在變數上按右鍵,選擇「滑桿」

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 在舞台中使用滑鼠在變數上按右鍵,選擇「滑桿」

設定為滑桿後,繼續按右鍵選擇「變更滑桿數值範圍」,將「秒」變數的數值範圍設定為 0~59,「分鐘」變數的數值範圍設定為 0~99。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 變更滑桿數值範圍

完成後點擊數字開啟設定畫面,將按照下圖將變數排列到適合的位置。

Scratch 教學 - ( 具備設定畫面、大型數字 ) - 按照下圖將變數排列到適合的位置

完成效果

所有角色的程式都完成後,點擊綠旗,點擊數字就能設定倒數時間,點擊 START 就開始倒數,時間結束後會產生抖動效果。

Scratch 教學 - ( 具備設定畫面、大型數字 )

範例解答

範例解答:Scratch 教學 - ( 具備設定畫面、大型數字 )

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

Scratch 教學

基本介紹

關於 Scratch 使用 Scratch 3 註冊與登入 操作介面 我的東西

圖形與聲音

繪製造型&背景 編輯音效

程式積木

積木種類 動作 外觀 音效 事件 控制 偵測 運算 變數 清單 函式積木

擴充功能

音樂 畫筆 視訊偵測 文字轉語音 翻譯

技巧&觀念

全域變數、區域變數 深入理解區域變數 控制指定分身 控制所有分身的方法 雲端變數 雲端變數記錄文字 變數串接文字 判斷英文字母大小寫 中斷與停止程式 廣播訊息並等待 鍵盤與滑鼠 滑鼠點擊與長按 偵測所有鍵盤按鍵 點擊隱藏的角色 突破角色尺寸限制 角色與舞台邊界 重複積木的等待時間 音樂暫停與繼續播放 使用造型名稱建立清單 使用造型代替變數 文字轉清單 清單合併為文字 判斷兩個清單是否相同 複製清單、反轉清單 清單數字排序 清單最大值最小值

入門範例

鍵盤控制貓咪 指向中間的箭頭 水果音樂鋼琴 貓咪的影分身之術 貓咪的細胞分裂 螃蟹跑來跑去 吃水果 摸蝴蝶 小狗追棒球 魚兒水中游 小鳥往前飛 舞棍阿伯 小時鐘 搖骰子 轉動的眼球 抽獎輪盤 大樂透電腦選號 卡牌抽籤 ( 20 中 1 ) 移動到邊緣切換場景 人物依序跳舞 ( 廣播 ) 按鈕控制貓咪 ( 廣播 )

進階範例

貓咪跑步 ( 連續背景 ) 貓咪跑步 ( 超長背景 ) 大型數字 ( 圖形數字 ) 拖拉怪獸碰撞牆壁 鍵盤鋼琴 ( 記錄音符 ) 中文字逐字稿 英文字逐字稿 計算機 1 ( 顯示數字 ) 計算機 2 ( 加減乘除 ) 雲端聊天室 音樂播放器 推貓咪 ( 視訊偵測 ) 圍捕小魚 ( 視訊偵測 ) 戳泡泡 ( 視訊偵測 )

視覺特效範例

視差效果 水中吐泡泡 雪花隨風飄 鍵盤鋼琴 ( 音符動畫 ) 無限循環畫中畫 水底探照燈 狙擊望遠鏡 ( 兩倍變焦 ) 貓咪萬花筒 仙女棒 ( 光跡效果 ) 駭客任務背景特效 放煙火 1 ( 往上發射 ) 放煙火 2 ( 爆炸效果 )

繪圖範例

鏡射畫圖 ( 對稱圖形 ) 小畫家 ( 舞台上畫圖 ) 記錄畫圖軌跡 繪製圓形 繪製橢圓形 繪製立方體 ( 會動 ) 繪製正多邊形 繪製正多角星形 ( 單純 ) 繪製正多角星形 ( 多線 ) 繪製拋物線 繪製折線圖 繪製圓餅圖 繪製圓餅圖 ( 指示線 ) 蜘蛛結網 ( 八邊形網 ) 繪製舞台方格 繪製正弦波形 ( sin ) 正弦波毛毛蟲動畫 顯示聲波圖形

物理&模擬範例

鐘擺運動 簡單磁鐵效果 兩個磁鐵的磁力線 立體空間 ( 三度空間 ) 循跡移動 拋物線發射炮彈 地球繞著太陽轉 彈跳的籃球 電風扇 ( 控制強度 ) 拉不走的彈力球 慣性移動 ( 滑鼠 ) 慣性移動 ( 鍵盤 )

入門遊戲範例

猴子接香蕉 打地鼠 打地鼠 ( 體感視訊偵測 ) 刮刮樂 吹風機吹頭髮 太空狗閃躲隕石 九九乘法測驗 英文單字測驗 釣魚遊戲 拍西瓜 ( 儲存最高分 ) 寶可夢猜猜我是誰 ( 基本 ) 形狀配對拼圖 台灣地圖拼圖 英文打字機 英文打字機 ( 判斷大小寫 ) 射擊外星人 猜數字 ( 猜大小 ) 猜數字 ( 幾 A 幾 B ) 連連看 ( 產生器 ) 連連看

進階遊戲範例

青蛙過河 青蛙過馬路 反彈球 ( 乒乓球 ) 打磚塊 狙擊氣球 ( 兩倍變焦 ) Flappy Bird Flappy Bird ( 聲控版 ) 走迷宮 ( 基本 ) 大型迷宮 ( 鍵盤控制 ) 大型迷宮 ( 滑鼠控制 ) 翻卡記憶遊戲 翻卡記憶遊戲 ( 改良版 ) 井字棋 ( 圈圈叉叉 ) 九宮格拼圖 九宮格拼圖 ( 改良版 ) 音階記憶 貪吃蛇 ( 分身版 ) 貪吃蛇 ( 畫筆版 ) 小雞下樓梯 拉霸機

團康遊戲範例

搖骰子 ( 1~3 個 ) 比手畫腳 ( 猜動物 ) 音樂傳球遊戲 大聲公 ( 比賽誰的氣長 ) 抽籤 ( 可調整中籤數量 ) 轉盤指針 ( 指到誰就當鬼 ) 倒數計時器 ( 基本版 ) 倒數計時器 ( 大數字版 )

遊戲設計技巧

角色 ( 地上移動 ) 角色 ( 蹲下、左右轉 ) 角色 ( 跳耀、兩段跳 ) 角色 ( 牆壁、爬牆 ) 地圖 ( 清單轉換 ) 地圖 ( 二維陣列 ) 地圖 ( 控制移動 ) 地圖 ( 牆壁碰撞偵測 ) 地圖 ( 吃東西偵測 ) 俄羅斯方塊 ( 角色與背景 ) 俄羅斯方塊 ( 移動與碰撞 ) 俄羅斯方塊 ( 放置方塊 ) 俄羅斯方塊 ( 消除完成方塊 ) 俄羅斯方塊 ( 下個形狀 )