青蛙過河

教學原文參考：青蛙過河

這篇文章會介紹，如何在 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 教育學習網粉絲團