http://MobileDev.TW

1. Flappy Bird http://MobileDev.TW
Flappy Bird
Game Dev
by Phaser
Ryan@MobileDev.TW
1
Source : Thomas Palef

2. Flappy Bird http://MobileDev.TW
遊戲基本概念 (一直跳一直跳)
• 按下空白鍵讓主角跳躍
• 不跳就會掉下去
• 主角一邊跳越要從障礙物的空隙中穿過
• 得分
• 主角在這些狀況下會死
• 超出遊戲範圍
• 撞到障礙物
2

3. Flappy Bird http://MobileDev.TW
開發環境準備 - Brackets
http://brackets.io
3

4. Flappy Bird http://MobileDev.TW
下載空的開發樣板
• http://0rz.tw/j41ce
• index.html 空
• main.js 空
• phaser.min.js Phaser framework
• assets 素材檔案資料夾
4

5. Flappy Bird http://MobileDev.TW
畫面佈局 – index.html
5

6. Flappy Bird http://MobileDev.TW
開始撰寫 – main.js
6

7. Flappy Bird http://MobileDev.TW
建立遊戲狀態並開始載入
7

8. Flappy Bird http://MobileDev.TW
mainState架構
8

9. Flappy Bird http://MobileDev.TW
preload
9

10. Flappy Bird http://MobileDev.TW
create(1/2)
10

11. Flappy Bird http://MobileDev.TW
create(2/2)
11

12. Flappy Bird http://MobileDev.TW
update
12

13. Flappy Bird http://MobileDev.TW
hitHole hitPipe
13

14. Flappy Bird http://MobileDev.TW
jump restartGame
14

15. Flappy Bird http://MobileDev.TW
addRowOfPipes
15

16. Flappy Bird http://MobileDev.TW
addOnePipe
16

17. Flappy Bird http://MobileDev.TW
恭喜你！趕快執行看看！
17

18. Flappy Bird http://MobileDev.TW
開發文件
https://phaser.io/learn/chains
18

19. Flappy Bird http://MobileDev.TW
下一步可以做什麼？
• 關卡難易度改變：
• 改變空隙格數(例如3格)
• 加上跳躍、得分與撞到磚塊三種音效
• 在preload中載入音效檔
• 在create中加入此項屬性
• 在狀況發生(例如跳躍)時播放音效
• 最高分數記錄
• 在畫面上顯示出目前玩家最高分數
19