青蛙過河
這篇文章會介紹,如何在 Scratch 裡使用多個角色,搭配重複、偵測碰到其他角色、定位、函式...等積木,實作一個青蛙過河的小遊戲 ( 鍵盤控制青蛙移動,踩在漂浮的木頭上通過河流 )。
角色設定
在角色編輯區,刪除貓咪角色,加入「青蛙」角色,使用「繪畫」功能,加入「木頭」和「河流」兩個空白角色 ( 參考: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 的隨機數。
完成效果
完成後,點擊綠旗,就可以開始進行青蛙過河吃蘋果的遊戲。
範例解答
範例解答:青蛙過河
延伸練習
如果已經熟悉了青蛙過河的原理,還可以嘗試更多好玩的作法:
- 加上「計時與計分」的機制。( 解答 )
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~