搜尋

Flappy Bird

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

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

角色設定

在角色編輯區,刪除貓咪角色,加入飛行貓咪「cat」角色。

Scratch 教學 - Flappy Bird - 飛行的貓咪角色

下載範例圖片 ( 連續背景 ),使用「上傳」方式建立背景「bg」角色,建立角色後,切換到「造型」頁籤,點擊「轉換成向量圖」,將原本點陣圖的圖片轉換成向量圖物件,轉換成向量圖後,就可以很方便地改變位置和尺寸。

Scratch 教學 - Flappy Bird - 連續背景轉換向量圖

轉換向量圖後,使用選取工具放大圖片 ( 可以先將圖片移動到右下角,然後拖拉角落節點變更尺寸 )。

Scratch 教學 - Flappy Bird - 放大圖片

將圖片「對齊畫布中心」,放大後的高度必須「大於 360」( 因為舞台高度為 360 )。

Scratch 教學 - Flappy Bird - 放大圖片的尺寸

複製同一張圖片並再度貼上,使用滑鼠和件盤調整位置,將兩張圖片的邊緣貼合,變成一張超長的圖片,貼合的位置也是之後要重複背景的位置

Scratch 教學 - Flappy Bird - 複製同一張圖片並再度貼上

將組合後的超長背景的中心點對齊畫布中心 ( 可以先將兩張圖片組成群組 ),記錄組合後的實際長度 ( 範例圖片為 1354 )

Scratch 教學 - Flappy Bird - 記錄組合後的實際長度

下載範例圖片 ( 水管 ),使用「上傳」方式建立水管「pipe」角色。

Scratch 教學 - Flappy Bird - 建立水管角色

完成後,舞台上應該就能看到三個不同的角色。

Scratch 教學 - Flappy Bird - 三個不同的角色

積木程式原理 ( 貓咪 )

Flappy Bird 的遊戲方式,是在按下鍵盤空白鍵時,讓角色不斷在舞台中跳耀,參考下表,可以使用簡單的公式模擬重力加速度,圖表的紅色曲線是貓咪的「位置」,藍色直線是每次重複時「y 座標要改變的數值」,因為每次要改變的數字會變多,所以下墜的幅度會越來越快,當按下空白鍵跳耀時,就將改變數值變成 10,就能產生跳耀的效果

Scratch 教學 - Flappy Bird - 使用簡單的公式模擬重力加速度

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

Scratch 教學 - Flappy Bird

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

Scratch 教學 - Flappy Bird - 看到貓咪在畫面中上下跳動

加入判斷「滑鼠鍵被按下」的邏輯,就能在手機或行動裝置裡,透過點按控制貓咪跳耀。

Scratch 教學 - Flappy Bird - 滑鼠鍵被按下

接著為貓咪角色新增第二組綠旗點擊程式,使用「重複無限次」搭配變數,實作每隔 0.1 秒就增加 0.1 分的計分邏輯,新增第三組綠旗點擊程式,等待碰到水管 pipe 角色後,就停止所有重複程式

Scratch 教學 - Flappy Bird - 等待碰到水管 pipe 角色後,就停止所有重複程式

積木程式原理 ( 背景 )

將背景「bg」角色,對齊舞台左側,參考下圖的公式,就能計算齊左側後的座標,範例的角色寬度為 1354,計算座標為 1354/2 - 480/2 = 437 。

左側 x 座標 = 角色寬/2 - 舞台寬/2

Scratch 教學 - Flappy Bird - 連續背景公式

當背景移動到 -240 時,就會是剛好背景連接的位置,也是要切換回原本 437 的時機點。

Scratch 教學 - Flappy Bird

根據這個原理撰寫程式,讓背景不斷往左移動,抵達 -240 時,切換為 437。

Scratch 教學 - Flappy Bird

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

Scratch 教學 - Flappy Bird

積木程式原理 ( 水管 )

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

Scratch 教學 - Flappy Bird

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

Scratch 教學 - Flappy Bird

完成效果

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

Scratch 教學 - Flappy Bird

範例解答

範例解答:Flappy Bird

延伸練習

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

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

意見回饋

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

Scratch 教學

基本介紹

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

圖形與聲音

繪製造型&背景 編輯音效

程式積木

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

擴充功能

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

技巧&觀念

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

入門範例

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

進階範例

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

視覺特效範例

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

繪圖範例

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

物理&模擬範例

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

入門遊戲範例

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

進階遊戲範例

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

團康遊戲範例

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

遊戲設計技巧

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