Flappy Bird
這篇文章會介紹,如何在 Scratch 裡使用連續背景、變數、定位、座標、重複、偵測碰到其他角色...等積木,實作 Flappy Bird 小遊戲。
角色設定
在角色編輯區,刪除貓咪角色,加入飛行貓咪「cat」角色。
下載範例圖片 ( 連續背景 ),使用「上傳」方式建立背景「bg」角色,建立角色後,切換到「造型」頁籤,點擊「轉換成向量圖」,將原本點陣圖的圖片轉換成向量圖物件,轉換成向量圖後,就可以很方便地改變位置和尺寸。
轉換向量圖後,使用選取工具放大圖片 ( 可以先將圖片移動到右下角,然後拖拉角落節點變更尺寸 )。
將圖片「對齊畫布中心」,放大後的高度必須「大於 360」( 因為舞台高度為 360 )。
複製同一張圖片並再度貼上,使用滑鼠和件盤調整位置,將兩張圖片的邊緣貼合,變成一張超長的圖片,貼合的位置也是之後要重複背景的位置。
將組合後的超長背景的中心點對齊畫布中心 ( 可以先將兩張圖片組成群組 ),記錄組合後的實際長度 ( 範例圖片為 1354 )
下載範例圖片 ( 水管 ),使用「上傳」方式建立水管「pipe」角色。
完成後,舞台上應該就能看到三個不同的角色。
積木程式原理 ( 貓咪 )
Flappy Bird 的遊戲方式,是在按下鍵盤空白鍵時,讓角色不斷在舞台中跳耀,參考下表,可以使用簡單的公式模擬重力加速度,圖表的紅色曲線是貓咪的「位置」,藍色直線是每次重複時「y 座標要改變的數值」,因為每次要改變的數字會變多,所以下墜的幅度會越來越快,當按下空白鍵跳耀時,就將改變數值變成 10,就能產生跳耀的效果。
將貓咪移到最上層並定位到舞台正中間,接著新增一個名為 y 的變數,使用「重複無限次」、「如果...那麼...否則」積木,判斷是否按下空白鍵,如果按下空白鍵,就設定 y 為 10,如果沒有按下空白鍵,就讓 y 模擬重力加速度不斷改變 -2,最後透過角色 y 的改變,就能夠做到按下空白時,貓咪不斷往上跳,沒有按空白,貓咪往下自由落體的效果。
完成後,點擊綠旗,不斷按壓空白鍵,就可以看到貓咪在畫面中上下跳動。
加入判斷「滑鼠鍵被按下」的邏輯,就能在手機或行動裝置裡,透過點按控制貓咪跳耀。
接著為貓咪角色新增第二組綠旗點擊程式,使用「重複無限次」搭配變數,實作每隔 0.1 秒就增加 0.1 分的計分邏輯,新增第三組綠旗點擊程式,等待碰到水管 pipe 角色後,就停止所有重複程式。
積木程式原理 ( 背景 )
將背景「bg」角色,對齊舞台左側,參考下圖的公式,就能計算齊左側後的座標,範例的角色寬度為 1354,計算座標為 1354/2 - 480/2 = 437 。
左側 x 座標 = 角色寬/2 - 舞台寬/2
當背景移動到 -240 時,就會是剛好背景連接的位置,也是要切換回原本 437 的時機點。
根據這個原理撰寫程式,讓背景不斷往左移動,抵達 -240 時,切換為 437。
完成後,點擊綠旗,背景就會不斷往左移動,看起來就像貓咪不斷往前飛。
積木程式原理 ( 水管 )
因為畫面中會不斷出現水管,所以水管角色採用「分身」的方式進行,一開始先隱藏本尊,然後每隔一秒建立分身,就能夠讓水管每隔一秒不斷出現。
分身建立後,顯示分身,新增一個「位置」變數,隨機設定為 1 或 2,如果是 1,將分身定位在右邊上方,如果是 2,將分身定位在右邊下方 ( 高度使用 200~240 的隨機數,讓出現的高度不相同 ),接著使用「重複無限次」、「如果...那麼...否則」積木,讓水管不斷往左移動,當移動到最左邊時,就刪除分身。
完成效果
所有角色的程式都完成後,點擊綠旗,就能夠開始進行貓咪的 Flappy Bird 的遊戲。
範例解答
範例解答:Flappy Bird
延伸練習
如果已經熟悉了Flappy Bird的原理,還可以嘗試更多好玩的作法:
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~