Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flappy Bird Game Dev by Phaser Framework

1,183 views

Published on

http://MobileDev.TW

Published in: Technology
  • Be the first to comment

Flappy Bird Game Dev by Phaser Framework

  1. 1. Flappy Bird http://MobileDev.TW Flappy Bird Game Dev by Phaser Ryan@MobileDev.TW 1 Source : Thomas Palef
  2. 2. Flappy Bird http://MobileDev.TW 遊戲基本概念 (一直跳一直跳) •  按下空白鍵讓主角跳躍 •  不跳就會掉下去 •  主角一邊跳越要從障礙物的空隙中穿過 •  得分 •  主角在這些狀況下會死 •  超出遊戲範圍 •  撞到障礙物 2
  3. 3. Flappy Bird http://MobileDev.TW 開發環境準備 - Brackets http://brackets.io 3
  4. 4. Flappy Bird http://MobileDev.TW 下載空的開發樣板 •  http://0rz.tw/j41ce •  index.html 空 •  main.js 空 •  phaser.min.js Phaser framework •  assets 素材檔案資料夾 4
  5. 5. Flappy Bird http://MobileDev.TW 畫面佈局 – index.html 5
  6. 6. Flappy Bird http://MobileDev.TW 開始撰寫 – main.js 6
  7. 7. Flappy Bird http://MobileDev.TW 建立遊戲狀態並開始載入 7
  8. 8. Flappy Bird http://MobileDev.TW mainState架構 8
  9. 9. Flappy Bird http://MobileDev.TW preload 9
  10. 10. Flappy Bird http://MobileDev.TW create(1/2) 10
  11. 11. Flappy Bird http://MobileDev.TW create(2/2) 11
  12. 12. Flappy Bird http://MobileDev.TW update 12
  13. 13. Flappy Bird http://MobileDev.TW hitHole hitPipe 13
  14. 14. Flappy Bird http://MobileDev.TW jump restartGame 14
  15. 15. Flappy Bird http://MobileDev.TW addRowOfPipes 15
  16. 16. Flappy Bird http://MobileDev.TW addOnePipe 16
  17. 17. Flappy Bird http://MobileDev.TW 恭喜你!趕快執行看看! 17
  18. 18. Flappy Bird http://MobileDev.TW 開發文件 https://phaser.io/learn/chains 18
  19. 19. Flappy Bird http://MobileDev.TW 下一步可以做什麼? •  關卡難易度改變: •  改變空隙格數(例如3格) •  加上跳躍、得分與撞到磚塊三種音效 •  在preload中載入音效檔 •  在create中加入此項屬性 •  在狀況發生(例如跳躍)時播放音效 •  最高分數記錄 •  在畫面上顯示出目前玩家最高分數 19

×