Suche senden
Hochladen
Flappy Bird Game Dev by Phaser Framework
•
1 gefällt mir
•
1,380 views
Ryan Chung
Folgen
http://MobileDev.TW
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 19
Recomendados
Making Native Browser Games in The Modern Age
Making Native Browser Games in The Modern Age
Catt Small
La ecuación de Batman
La ecuación de Batman
Jesus Garcia
Phaser Workshop Internet World 2014
Phaser Workshop Internet World 2014
Alvinsight
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
Pablo Farías Navarro
Html5 game development
Html5 game development
Rajasekar Murugan
Marketing 360 - 2011
Marketing 360 - 2011
Razvan Matasel
HTML5 Game Development frameworks overview
HTML5 Game Development frameworks overview
Abhishek Singhal [L.I.O.N]
Lasertron lt 12 vs zone nexus fec
Lasertron lt 12 vs zone nexus fec
ejeffers2010
Más contenido relacionado
Mehr von Ryan Chung
Voice-First Games for Alexa
Voice-First Games for Alexa
Ryan Chung
AI Service Integration - Education
AI Service Integration - Education
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Ryan Chung
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
Ryan Chung
AI in Classroom
AI in Classroom
Ryan Chung
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
Ryan Chung
MovieBot
MovieBot
Ryan Chung
Service Integration Workshop
Service Integration Workshop
Ryan Chung
MPP AI
MPP AI
Ryan Chung
Smart Home Intro Lab
Smart Home Intro Lab
Ryan Chung
Introduction to DialogFlow
Introduction to DialogFlow
Ryan Chung
Conversational AI Orientation
Conversational AI Orientation
Ryan Chung
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Ryan Chung
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Ryan Chung
Amazon Alexa Development
Amazon Alexa Development
Ryan Chung
Microsoft Professional Program - AI
Microsoft Professional Program - AI
Ryan Chung
AI Service Integration
AI Service Integration
Ryan Chung
Intro to AI
Intro to AI
Ryan Chung
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Ryan Chung
Mehr von Ryan Chung
(20)
Voice-First Games for Alexa
Voice-First Games for Alexa
AI Service Integration - Education
AI Service Integration - Education
AI Service Integration
AI Service Integration
AI Adoption in the Enterprise
AI Adoption in the Enterprise
Intro to Dialogflow Chatbot Development
Intro to Dialogflow Chatbot Development
AI in Classroom
AI in Classroom
AWS re:Invent 2018 Recap
AWS re:Invent 2018 Recap
MovieBot
MovieBot
Service Integration Workshop
Service Integration Workshop
MPP AI
MPP AI
Smart Home Intro Lab
Smart Home Intro Lab
Introduction to DialogFlow
Introduction to DialogFlow
Conversational AI Orientation
Conversational AI Orientation
Udacity Meet Up - 0413
Udacity Meet Up - 0413
Amazon Alexa Development Part II
Amazon Alexa Development Part II
Amazon Alexa Development
Amazon Alexa Development
Microsoft Professional Program - AI
Microsoft Professional Program - AI
AI Service Integration
AI Service Integration
Intro to AI
Intro to AI
Hour of Code - Amazon Alexa
Hour of Code - Amazon Alexa
Flappy Bird Game Dev by Phaser Framework
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