iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

Scratch 3 從入門到精通系列 第 44

Day44 ( 遊戲設計 ) Flappy Bird

Flappy Bird

教學原文參考:Flappy Bird

這篇文章會介紹,如何在 Scratch 3 裡使用連續背景、變數、定位、座標、重複、偵測碰到其他角色...等積木,實作 Flappy Bird 小遊戲。

相關文章參考:定位重複偵測碰到其他角色

角色設定

在角色編輯區,刪除貓咪角色,加入「飛行的貓咪」角色,接著使用「上傳」,加入一張連續背景的圖片和一張水管的圖片,上傳後將背景命名為「背景-01」和「水管」 ( 參考:Scratch 角色設定 )。

連續背景可先使用範例圖片:連續背景水管

Scratch 3 教學 - Flappy Bird

積木程式原理 ( 貓咪 )

Flappy Bird 的遊戲方式,是在按下鍵盤空白鍵時,讓角色不斷在舞台中跳耀,首先將貓咪移到圖層最上層、定位到舞台正中間,接著新增一個名為 y 的變數,使用「重複無限次」、「如果...那麼...否則」積木,判斷是否按下空白鍵,如果按下空白鍵,就設定 y 為 10,如果沒有按下空白鍵,就讓 y 模擬重力加速度不斷改變 -2,最後透過角色 y 的改變,就能夠做到按下空白時,貓咪不斷往上跳,沒有按空白,貓咪往下自由落體的效果。

Scratch 3 教學 - Flappy Bird

完成後,點擊綠旗,不斷按壓空白鍵,就可以看到貓咪在畫面中上下跳動。

Scratch 3 教學 - Flappy Bird

接著為貓咪角色新增第二組綠旗點擊程式,使用「重複無限次」、「如果...那麼...否則」積木,判斷碰到舞台邊緣或碰到水管角色,就讓貓咪說出「呀!!!!」的文字。

Scratch 3 教學 - Flappy Bird

完成後,點擊綠旗,除了可以看到貓咪在畫面中上下跳動,碰到舞台邊緣的時候,貓咪就會說話。

Scratch 3 教學 - Flappy Bird

積木程式原理 ( 背景 )

將第一張背景圖定位在舞台的左邊,定位座標使用 (-238,0)使用 -238 的原因為了和第二張背景圖接合 ( 如果剛好 240 可能會造成移動切換時出現空隙 ),接著使用重複無限次判斷圖片位置,如果圖片的 x 座標移動到小於 -462,就讓圖片的 x 座標移動到 462

寬度 480 的圖片,抵達左右邊緣極限的座標為 -465 和 465,此處使用的 -462 和 462,是針對這張背景圖片所調整出不會有空隙的數值,如果使用是不同的圖片,可能有些微的變化。

Scratch 3 教學 - Flappy Bird

在角色區域,複製這個背景成為一個新的角色,修改名稱為「背景-02」,這樣程式就可以一併複製。

Scratch 3 教學 - Flappy Bird

將「背景-02」定位在舞台的右邊,定位座標使用 (238,0),其他程式不需修改。

Scratch 3 教學 - Flappy Bird

完成後,點擊綠旗,背景就會不斷往左移動,看起來就像貓咪不斷往前飛。

Scratch 3 教學 - Flappy Bird

積木程式原理 ( 水管 )

因為畫面中會不斷出現水管,所以水管角色採用「分身」的方式進行,一開始先隱藏本尊,然後每隔一秒建立分身,就能夠讓水管每隔一秒不斷出現。

Scratch 3 教學 - Flappy Bird

分身建立後,顯示分身,新增一個「位置」變數,隨機設定為 1 或 2,如果是 1,將分身定位在右邊上方,如果是 2,將分身定位在右邊下方 ( 高度使用 200~240 的隨機數,讓出現的高度不相同 ),接著使用「重複無限次」、「如果...那麼...否則」積木,讓水管不斷往左移動,當移動到最左邊時,就刪除分身

Scratch 3 教學 - Flappy Bird

完成效果

所有角色的程式都完成後,點擊綠旗,就能夠開始進行貓咪的 Flappy Bird 的遊戲。

Scratch 3 教學 - Flappy Bird

範例解答

範例解答:Flappy Bird

延伸練習

如果已經熟悉了Flappy Bird的原理,還可以嘗試更多好玩的作法:

  • 加上「計算碰撞次數」的機制。( 解答 )
  • 加上「計時」的機制。( 解答 )

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day43 ( 遊戲設計 ) 音階記憶遊戲
下一篇
Day45 ( 遊戲設計 ) 貪吃蛇
系列文
Scratch 3 從入門到精通46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言