本書通過精心編寫且容易理解的代碼，以及抓住關鍵問題的文字描述，闡明了游戲開發過程中的每一個細節。本書第1～19章講解了Snail Bait游戲的完整開發過程，從以一個簡單的顯示圖像的游戲版本開始，涵蓋了HTML5視頻游戲開發的所有特點。第20章總結全書，使用本書前19章講述的大部分技術內容實現了第二個視頻游戲。不管是游戲開發新手，還是專業的游戲開發人員，都能從本書中獲益。
本書中所有的程序源碼，包括本書中討論過的、指定章節的特殊版本的游戲代碼，都可以在華章網站（www.hzbook.com）上下載。
初學者的入門指南，從零開始完整講解了一個復雜的橫向卷軸平臺視頻游戲的開發過程
本書涵蓋豐富的代碼和演示實例，通過高可靠性、可復用的代碼幫助專業開發者掌握必備知識
游戲編程提供了有創意的財富和商業機會，而且并不難理解。本書作者David Geary向讀者展示了如何使用可以免費獲取的瀏覽器工具及資源創作視頻游戲，并在桌面瀏覽器和移動端上運行它們。
本書循序漸進地實現一個復雜的街機風格游戲，而且完全從零開始，不需要使用任何專有的游戲框架。通過學習Snail Bait游戲的完整開發過程，會讓你對設計和構建任何類型的HTML5 2D游戲有更深層次的理解。
本書涵蓋以下內容：
創作光滑、無閃爍的動畫
實現不受游戲中潛在動畫幀頻影響的運動
驅動sprite對象，讓它們執行閃閃發光、爆炸等運動
在音軌上對多聲道聲音特效實現分層
彎曲時間創作非線性動畫特效，例如跳躍或者彈跳等
通過一個時間系統，控制游戲中的時間流逝
實現用于仿真自然現象的粒子系統
有效地發現sprite對象之間的碰撞
構建一個包含特殊屬性的開發者后門
使用Node.js和socket.io將實時游戲指標傳給服務器
開發一個提示板，用于顯示服務器上存儲的高分榜
在移動設備上實現HTML5
前 言 Preface
本書是為希望使用HTML5進行2D游戲開發，且具備一定JavaScript編程經驗的開發人員而準備的。在本書中，筆者從零開始完整講解了一個復雜的橫向卷軸平臺視頻游戲的開發過程，并將該視頻游戲命名為“Snail Bait”。在開發過程中，筆者沒有使用任何第三方圖形框架或游戲框架，因此讀者將從本書中學會以編程方式實現平滑動畫、sprite爆炸、開發人員后門程序、游戲難易度設計等所有內容。如果讀者正在使用某個游戲框架開發游戲，那么本書對于幫助讀者理解游戲框架內部的工作原理也同樣大有裨益。
出于教學目的，Snail Bait游戲僅實現了一個關卡，然而它卻具備了街機風格游戲的全部特點。Snail Bait游戲在滾動的背景上同時操作多個動畫對象，即sprite對象，在播放游戲背景音樂的同時添加多種音頻效果。sprite對象具備多種行為，包括但不限于跑動、跳躍、飛行、閃光、彈跳、來回移動、爆炸、碰撞、平臺著陸、從游戲畫面底部跌落等。
另外，Snail Bait游戲還實現了多個特色功能。例如，一個可以減慢或加快游戲整體速度的時間系統；游戲加載過程動畫；當游戲主角失去生命時，震動游戲畫面的特殊效果；模擬煙霧和燃燒的粒子系統等。當游戲窗口失去焦點時，Snail Bait游戲會暫停運行，而當游戲窗口重新獲得焦點時，Snail Bait游戲會以一個倒計時動畫作為開始，以便玩家有時間來恢復對游戲的控制。
雖然沒有使用游戲框架或圖形框架，但是Snail Bait游戲使用Node.js和socket.io技術實現了將游戲中的一些指標數據發送到服務器端、高分存儲和檢索，并在游戲窗口頂部顯示高分榜等功能。當游戲運行緩慢時，Snail Bait游戲還將顯示警告信息。而當按下“Ctrl+D”組合鍵啟動游戲時，Snail Bait游戲將啟動開發人員后門程序，從而賦予操作人員特殊權限，例如修改時間軸的流動，或者顯示sprite對象碰撞檢測矩形以及其他功能等。
當Snail Bait游戲檢測到自己運行在移動設備上時，將通過調用觸摸事件處理句柄、調整游戲窗口大小來重新配置自身，以便適應移動設備的屏幕大小及控制方式。
本書將展示如何一步一步編程實現Snail Bait游戲的所有功能，這樣讀者就可以在自己的游戲中實現類似的功能。
本書簡史
早在2010年，筆者從一款流行的Android系統下的開源游戲Replica Island中下載了圖片和聲音，并使用它們在Android系統中實現了Snail Bait游戲的初始版本。
當時，筆者已經對HTML5 Canvas技術產生了濃厚的興趣，并開始寫作上一本圖書《HTML5 Canvas核心技術：圖形、動畫與游戲開發》。在寫作期間，筆者持續完善了Snail Bait游戲，將它從基于Java語言及Android的系統環境，遷移到了基于JavaScript語言、HTML5 canvas元素及瀏覽器的環境中。在2012年寫作完成時，筆者已經開發出了一個雖然原始但功能基本完整的游戲版本。
2012年年底，筆者基于Snail Bait游戲開始為IBM developerWorks網站撰寫10篇關于游戲編程的系列技術文章（關于這些技術文章的鏈接，請參閱后面的“網上資源”部分）。在接下來的10個月中，基于寫作需要，筆者繼續完善、修改了Snail Bait游戲。
2013年夏天，Snail Bait游戲已經日趨成熟。筆者前往加利福尼亞的塞瓦斯托波爾，把Snail Bait游戲開發的全過程放在一起，拍攝了一部長達15小時的O’Reilly視頻，取名為“HTML5 2D游戲開發”。從某個方面而言，這部視頻就是本書的電影版。雖然該視頻直到9月才得以發布，但它依然成為當年的十大暢銷O’Reilly視頻之一（關于這段視頻的鏈接，請參閱后面的“網上資源”部分）。
2013年7月，從塞瓦斯托波爾回到家之后，筆者便全身心地投入到本書的寫作中。筆者改寫了IBM developerWorks網站上的10篇系列技術文章，將這些文章作為本書的開始章節，并在其后添加了10章的新內容。在寫作的整個過程中，筆者不斷迭代修改Snail Bait游戲的代碼，使其更具有可讀性。
2013年12月，在本書第1～19章完成后，筆者決定增加最后一章。該章講解了如何使用本書介紹的技術實現一個簡單完整的視頻游戲，這就是第20章中Bodega’s Revenge游戲的由來。
如何閱讀本書
本書的寫作目的簡單明確：通過講解如何實現一個復雜的視頻游戲，教會讀者開發屬于自己的游戲。
讀者可以采用多種方式閱讀本書。首先，筆者為了使本書更便于閱讀，在書中添加了大量的截圖、程序清單和圖表。
書中靈活地使用了“注意”“提示”“警告”和“最佳實踐”模塊。這些模塊精簡了本書主要內容，每個“注意”“提示”“警告”和“最佳實踐”模塊都有一個標題（除了只有一行的模塊之外），這樣讀者一眼就可以判定這些輔助內容是否與自己的實際情況有關。總體而言，本書主要是在講解開發方法，而這些模塊則重點提示了開發的原因。如果讀者時間有限，那么可以拋開這些模塊，直接閱讀本書的主要內容，從而快速掌握游戲底層的工作機制，同時確保不會遺漏任何重要內容。
本書第1～19章講解了Snail Bait游戲的完整開發過程，從一個簡單的顯示圖像的游戲版本開始，涵蓋了HTML5視頻游戲開發的所有特點。第20章總結全書，使用本書前19章講述的大部分技術內容實現了第二個視頻游戲。
如果讀者計劃精讀本書，而不僅僅是把它當作一個參考，那么建議從第1章或第20章開始閱讀，其中第20章除了對第1～19章所學內容進行了回顧與綜述外，還增加了部分新知識，例如極坐標系統和旋轉坐標系統的應用。
假如讀者從第20章開始閱讀，甚至只是略微地瀏覽一下第20章，讀者都可以對前19章所講述的內容有一個大致的了解，但是不要奢望在第一次閱讀時就能理解透徹。
筆者猜想大部分讀者都希望把本書當作一個參考，因此除了在每章的開頭部分加入該章主題外，還在每章的開始部分添加了一段關于該章內容的簡要介紹。這樣將給讀者快速定位具體內容帶來很大便利。同時，筆者還加入了許多關于如何實現具體功能的分步說明，這樣讀者就可以按照這些步驟實現自己的類似功能。
本書練習
被動地閱讀一本書不會將任何人變成一個游戲開發程序員。讀者必須通過自己動手編寫一些代碼來真正學會實現一款游戲的方法。為此，本書在每一章的結束部分都列出了一些練習，以幫助讀者更好地學習。
為了完成練習，讀者需要下載Snail Bait游戲源代碼的最終版本，并且修改代碼。在某些情況下，練習將指導讀者修改某個具體版本的Snail Bait游戲源代碼，這些版本的游戲源代碼與具體的章節有關。關于Snail Bait游戲源代碼版本劃分的詳細信息，請閱讀下面的內容。
Snail Bait游戲源代碼及其版本劃分
本書講述的主要內容來源于兩個視頻游戲。讀者可以通過“網上資源”部分的URL地址查看、下載這兩個游戲及其源代碼。
在閱讀時，讀者會發現參考Snail Bait游戲的源代碼對于理解書中的內容非常有幫助，而通過參考與讀者正在閱讀的章節對應的源代碼，這種幫助將更加明顯。例如，在第1章里，我們實現了Snail Bait游戲的一個初始版本，簡單繪制了游戲背景和游戲主角。這個版本的源代碼與最終版本的源代碼雖然有少量相似之處，但此時就查閱最終版本的源代碼一點用都沒有，大量的代碼反而會讓讀者眼花繚亂。反倒是參考corehtml5games.com/book/code/ch01網址上這個對應第1章結束的版本更有助于讀者理解第1章所講述的內容。本書每章（除第2章外）對應的源代碼版本的URL都按照corehtml5games.com/book/code/ch??的格式設定，其中“??”代表了對應于第01～20章的兩位數字。
如上所述，除非另有說明，否則本書每章最后部分的練習都對應于按照章節一步一步開發游戲，在章節結束時得到的Snail Bait游戲版本。
網上資源
本書配套網站：corehtml5games.com
Snail Bait游戲的在線網址：corehtml5games.com/snailbait
Bodega’s Revenge游戲的在線網址：corehtml5games.com/bodegas-revenge
Snail Bait游戲源代碼下載地址：corehtml5games.com/book/downloads/snailbait
Bodega’s Revenge游戲源代碼下載地址：corehtml5games.com/book/downloads/bodegas-revenge
O’Reilly網站上作者的“HTML5二維游戲開發”視頻：shop.oreilly.com/product/0636920030737.do
IBM developerWorks網站上作者的“HTML5二維游戲開發”系列技術文章：www.ibm.com/developerworks/java/library/j-html5-game1/index.html
作者2013年在亞特蘭大HTML5用戶組會議上關于HTML5游戲編程的演講視頻：youtube.com/watch?v=S256vAqGY6c
作者出版的《HTML5 Canvas核心技術：圖形、動畫與游戲開發》在亞馬遜上的鏈接：http://amzn.to/1jfuf0C
預備知識
如果人們不能說某種語言或以這種語言書寫，他們就不會考慮上這樣一門創造性的書寫課。同樣，為了使用HTML5編程實現復雜游戲，讀者就必須掌握JavaScript語言。JavaScript語言是學習本書的前提基礎。
本書程序清單所列的代碼幾乎都是用JavaScript語言編寫的，但這并不代表只掌握JavaScript語言就夠了，讀者還需要掌握與之相關的HTML和CSS，熟悉計算機圖形學，并具備基本的數學知識。
關注自己的游戲
最后，讓我們來討論一下為什么我們能夠聚在這里。筆者猜想讀者之所以閱讀本書是因為大家希望通過編程來實現一款屬于自己的游戲。
本書按章節討論了游戲編程的各個方面，例如實現sprite、碰撞檢測等。雖然它們屬于Snail Bait游戲，但是讀者也能輕松地將這些實現方法套用到自己的游戲當中。
本書章節順序的編排也很重要，這些章節展示了如何從頭開始一步一步編程實現一款游戲。在本書的開始部分，首先收集原始素材，搭建開發環境，然后從繪制游戲的基本圖形開始編程開發。在隨后的章節中，逐步向游戲中添加動畫、sprite對象、sprite對象行為等功能，從而逐步完善Snail Bait游戲。如果讀者正在從零開始開發一款游戲，那么可能會希望遵循同樣的講解方式，這樣讀者就可以一邊學習實現功能的方法，一邊在自己的游戲中實現這些功能。
在開始認真編寫代碼之前，大家應該多花一些時間來搭建開發環境，并盡可能地熟悉手中瀏覽器的開發者工具。建議大家在第2章結束前，盡可能縮短自己的開發周期，因為在準備階段多花的時間將會大大提高后續的開發效率。
最后要感謝大家購買本書。筆者迫不及待地想要看到你自己創造的游戲!
David Geary
科羅拉多州，柯林斯堡
2014年
Acknowledgements 致 謝
我非常慶幸自己能夠擁有一位非常優秀的編輯，他也是我20年寫作生涯里的唯一一位編輯，一個總能從我的下一本書中讀懂并接受我的觀念的編輯，一個總是指導我將概念變成作品的編輯，Greg Doench。像往常一樣，Greg Doench在本書從計劃寫作到成書的全過程中給了我充分的幫助及指導。
Mary Lou Nohr是一位非常棒的文字編輯，她參與編輯了我此前的所有著作。當她再次欣然同意擔任本書的責任編輯時，我感到自己非常幸運。
這是我和Alina Kirsanova合作的第2本書，Alina Kirsanova是一位非常出色的排版編輯，我的PDF文件經過她的處理后，總會變得非常漂亮。Julie Nahil監督了本書的出版，使整個出版過程都能按照出版商的要求如期進行。
每當完成一本書的寫作時，我都會選擇那些個人認為能夠幫助我改進作品的人來擔任審稿人。這一次我選擇了4位非常出色的審稿人：Jim O'Hara、Timothy Harrington、Simon Sarris和Willam Malone。Gintas Sanders允許我在Snail Bait游戲中使用他的金幣圖片，并指出了Snail Bait游戲中的許多不足。
在為O’Reilly拍攝“HTML5二維游戲開發”視頻時，我有幸接觸到了當時的現場觀眾，其中一位觀眾給我留下了深刻印象，他向我提出了很多問題和建議，此人就是本書的審稿人Jim O’Hara。在此后的審稿過程中，Jim O’Hara一如既往地認真負責，向我提出了許多好問題、好建議。
編輯Greg Doench介紹我認識了Tim Harrington，他是德銳大學的一個高級學術應用分析師，并且具有游戲開發的實際經驗。他的許多建議使我深受啟發，并促使我重新思考如何更好地完成本書。
我一直在為本書尋找一位非常了解游戲編程的圖形專家，最后我找到了Simon Sarris。讓我喜出望外的是，他不僅是一位精通游戲編程的圖形專家，還是一位優秀的作家，他提出的幾種不同方法幫助我完善了本書。
最后，我很慶幸William Malone能夠審閱本書。William是一位專業的游戲開發人員，他開發了Sesame Street游戲（相關信息請查閱http://bit.ly/1nlSY3N）。William的工作對本書產生了深刻的影響，他指出了我忽略了的許多細節，特別是關于移動設備的問題。
查看全部↓
David Geary，是《Core HTML5 Canvas》一書的作者，HTML5 Denver社區的聯合創始人，也是計算機圖形學和網絡應用開發的著名專家。他之前寫過8本書，包括暢銷書《Graphic Java》以及《Core Java Server Faces》，讀者可以在推特@davidgeary上關注他。
譯者序
前言
致謝
第1章 概述 1
1.1 Snail Bait游戲 3
1.2 HTML5游戲開發最佳實踐 8
1.2.1 窗口失去焦點時暫停游戲 8
1.2.2 窗口重獲焦點時實現倒計時功能 9
1.2.3 使用CSS實現UI特效 10
1.2.4 對游戲運行緩慢的狀態做出檢測和處理 11
1.2.5 添加社交功能 11
1.2.6 將所有游戲圖像放在單獨的sprite表單中 11
1.2.7 在服務器中存儲高分榜和實時游戲數據 13
1.3 特別功能 13
1.4 Snail Bait游戲中的HTML和CSS 15
1.5 開始Snail Bait游戲編程 21
1.6 本書中使用的JavaScript 23
1.7 小結 25
1.8 練習 26
第2章 原始素材和開發環境 27
2.1 使用開發者工具 28
2.1.1 控制臺 29
2.1.2 Chrome Canary的幀速率計數器 32
2.1.3 調試 34
2.1.4 時間線 35
2.1.5 Profiling 39
2.2 獲取資源 40
2.2.1 圖像 40
2.2.2 圖像處理 41
2.2.3 音效和音樂 41
2.2.4 動畫 42
2.3 使用CSS背景 43
2.4 生成小圖標 45
2.5 縮短編碼周期 46
2.6 小結 48
2.7 練習 48
第3章 圖形和動畫 49
3.1 使用HTML5 canvas元素繪制圖形和圖像 51
3.1.1 繪制背景 52
3.1.2 繪制跑步小人 53
3.1.3 繪制平臺 53
3.2 實現平滑的HTML5動畫 55
3.2.1 requestAnimationFrame()方法 57
3.2.2 requestAnimationFrame()的polyfill實現 57
3.3 實現游戲主循環 60
3.4 計算幀速率 61
3.5 滾動游戲背景 62
3.5.1 平移坐標系 62
3.5.2 滾動Snail Bait游戲的背景 65
3.6 制作基于時間的運動 67
3.7 反轉滾動方向 67
3.8 繪制動畫幀 68
3.9 使用視差產生視深的假象 68
3.10 小結 71
3.11 練習 71
第4章 游戲的基本架構 72
4.1 在JavaScript對象中封裝游戲函數 73
4.1.1 SnailBait的構造函數 74
4.1.2 SnailBait的原型 75
4.2 理解JavaScript語言中挑剔的this指針 77
4.3 處理鍵盤輸入 79
4.4 玩家按p鍵時暫停或者恢復游戲 81
4.5 凍結游戲，確保它精確地在暫停的位置恢復 82
4.6 在窗口失去焦點時暫停游戲 83
4.7 使用動態的倒計時來恢復一個暫停的游戲 84
4.7.1 向游戲玩家顯示提示板（簡短信息） 85
4.7.2 Snail Bait的倒計時 87
4.8 小結 89
4.9 練習 90
第5章 游戲加載動畫 91
5.1 定義Snail Bait游戲的窗口 93
5.2 使用CSS過渡讓元素淡入、淡出 96
5.2.1 讓元素淡入 97
5.2.2 讓元素淡出 98
5.2.3 snailbait-toast元素的CSS 99
5.2.4 顯示和隱藏提示板 100
5.3 讓擁有與CSS過渡屬性Opacity關聯的元素淡入、淡出 103
5.4 實現加載動畫 105
5.5 顯示游戲畫面 109
5.6 小結 112
5.7 練習 113
第6章 sprite對象 114
6.1 sprite對象 116
6.1.1 sprite對象的屬性 118
6.1.2 sprite對象的構造函數 119
6.1.3 sprite對象的方法 119
6.2 將sprite對象整合到游戲主循環中 121
6.3 實現sprite對象的artist對象 124
6.3.1 圖形artist對象 124
6.3.2 圖像artist對象 125
6.3.3 sprite圖像表單artist對象 125
6.3.4 定義sprite圖像表單單元格 128
6.4 創建和初始化游戲的sprite對象 130
6.5 使用元數據定義sprite對象 133
6.6 滾動sprite對象 136
6.7 小結 138
6.8 練習 138
第7章 sprite對象行為 140
7.1 行為基礎 142
7.2 跑步小人行為 143
7.3 跑步小人的跑動行為 146
7.4 輕量級行為 148
7.5 游戲獨立行為 150
7.6 組合行為 155
7.7 小結 159
7.8 練習 159
第8章 時間軸，第1部分：有限行為及線性運動 160
8.1 實現一個初始的跳躍行為算法 161
8.2 將處理跳躍行為的職責轉交給跑步小人 162
8.3 實現跳躍行為 164
8.4 使用秒表記錄動畫時間 165
8.5 重新定義跳躍行為 168
8.6 實現線性運動 170
8.6.1 上升階段 170
8.6.2 下降階段 171
8.7 暫停行為 173
8.8 小結 175
8.9 練習 175
第9章 時間軸，第2部分：非線性運動 176
9.1 理解時間及其衍生物 177
9.2 使用動畫計時器和緩變功能實現非線性跳躍 177
9.3 實現動畫計時器 179
9.4 實現緩變功能 181
9.5 微調緩變功能 184
9.6 實現真實的跳動行為 185
9.7 使行為隨機化 189
9.8 使用動畫計時器和緩變功能實現非線性顏色改變 190
9.9 小結 193
9.10 練習 193
第10章 時間軸，第3部分：時間系統 194
10.1 Snail Bait游戲的時間系統 195
10.2 創建和啟動時間系統 197
10.3 將時間系統整合進Snail Bait游戲中 198
10.3.1 使用時間系統驅動游戲動畫 198
10.3.2 實現使用時間系統修改游戲時間流的函數 199
10.3.3 在計算幀速率時分解時間比率 199
10.3.4 使用時間系統暫停和恢復游戲 200
10.4 重新定義秒表和動畫計時器的當前時間 202
10.5 實現時間系統 206
10.6 小結 208
10.7 練習 208
第11章 碰撞檢測 209
11.1 碰撞檢測過程 210
11.2 碰撞檢測技術 211
11.3 Snail Bait游戲中的碰撞檢測 212
11.3.1 sprite對象的碰撞矩形 212
11.3.2 跑步小人的碰撞行為 214
11.4 為碰撞檢測選擇碰撞候選對象 215
11.5 在跑步小人與其他sprite對象之間檢測碰撞 216
11.6 處理碰撞 217
11.7 優化碰撞檢測 220
11.7.1 改善包圍盒 220
11.7.2 使用空間分割方法 221
11.8 監測碰撞檢測的運行性能 222
11.9 編程實現碰撞檢測的邊界案例 223
11.10 小結 226
11.11 練習 226
第12章 重力 228
12.1 為跑步小人實現墜落行為 228
12.2 實現重力 230
12.2.1 跑步小人的墜落行為 232
12.2.2 計算初始下降速度 236
12.2.3 在跑步小人墜落過程中暫停游戲 237
12.3 最終版的碰撞檢測 237
12.4 小結 238
12.5 練習 239
第13章 sprite動畫和特殊效果 240
13.1 實現sprite動畫 241
13.2 創建特效 246
13.2.1 晃動游戲畫面 246
13.2.2 場景切換 248
13.3 編排效果 253
13.3.1 炸死蜜蜂 254
13.3.2 引爆按鈕 256
13.4 小結 258
13.5 練習 258
第14章 聲音和音樂 259
14.1 創建聲音和音樂文件 261
14.2 加載音樂和音效 262
14.3 設置聲音和音樂控件 263
14.4 播放音樂 264
14.5 循環播放音樂 265
14.6 播放音效 267
14.6.1 創建sprite音頻對象 270
14.6.2 定義音效對象 271
14.6.3 實現多聲道播放音效 272
14.7 打開和關閉聲音播放 279
14.8 小結 280
14.9 練習 280
第15章 移動設備 281
15.1 在移動設備上運行Snail Bait游戲 284
15.2 檢測移動設備 284
15.3 縮放游戲以適應移動設備 286
15.3.1 HTML5 viewport元標簽 287
15.3.2 以編程方式調整游戲畫面以適應移動設備屏幕 291
15.4 修改游戲動畫底部的控制說明 295
15.5 修改歡迎界面 295
15.5.1 實現歡迎提示 296
15.5.2 實現移動設備中的控制說明 301
15.5.3 實現移動設備版開始提示 305
15.5.4 顯示移動設備中的開始提示 306
15.6 添加觸控事件 307
15.7 在移動設備中處理音頻的方法 310
15.8 在主屏幕上添加啟動圖標，并以全屏模式運行游戲 312
15.9 小結 313
15.10 練習 313
第16章 粒子系統 314
16.1 排煙孔粒子系統 315
16.2 使用排煙孔粒子系統 318
16.2.1 定義排煙孔粒子系統數據 318
16.2.2 創建排煙孔粒子系統 318
16.2.3 將排煙孔粒子系統存入Snail Bait游戲的sprite對象數組中 319
16.2.4 在每個動畫幀中滾動排煙孔粒子系統 320
16.3 編程實現排煙孔粒子系統 321
16.3.1 把排煙孔粒子系統偽裝成sprite對象 321
16.3.2 組合火焰粒子 323
16.3.3 組合煙泡 327
16.4 暫停排煙孔粒子系統 337
16.5 小結 338
16.6 練習 338
第17章 用戶界面 339
17.1 記錄玩家游戲成績 340
17.2 增加游戲生命指示器 343
17.3 顯示游戲字幕 348
17.4 使用Tweet發布玩家游戲得分 354
17.5 當游戲運行緩慢時通知游戲玩家 357
17.5.1 監控幀速率 361
17.5.2 編程實現運行緩慢通知的事件處理句柄 363
17.6 編程實現通關動畫 364
17.7 小結 368
17.8 練習 368
第18章 開發者后門程序 370
18.1 Snail Bait游戲的開發者后門 372
18.2 開發者后門的HTML元素及CSS 373
18.3 顯示及隱藏開發者后門 375
18.4 更新開發者后門的元素 377
18.5 實現開發者后門的復選框 378
18.5.1 顯示及隱藏碰撞矩形 380
18.5.2 啟用或禁用運行緩慢通知 382
18.5.3 顯示或隱藏排煙孔粒子系統 383
18.5.4 更新開發者后門的復選框 383
18.6 實現開發者后門的滑動條 384
18.6.1 為開發者后門的滑動條定義HTML元素及CSS 386
18.6.2 在Snail Bait游戲的Java-Script代碼中訪問滑動條的讀數 387
18.6.3 創建并初始化開發者后門的滑動條 388
18.6.4 將運行緩慢的滑動條關聯到游戲中 389
18.6.5 將時間速率滑動條關聯到游戲中 389
18.6.6 將游戲關聯到時間速率滑動條上 390
18.6.7 在顯示開發者后門之前更新滑動條 391
18.7 實現開發者后門刻度尺 392
18.7.1 創建并訪問刻度尺的canvas元素 393
18.7.2 淡入淡出刻度尺 394
18.7.3 繪制刻度尺 395
18.7.4 更新刻度尺 396
18.7.5 拖動游戲畫面 397
18.8 小結 401
18.9 練習 401
第19章 服務器端開發：內部指標、高分記錄及部署 403
19.1 Node.js及socket.io簡介 404
19.2 在Snail Bait游戲中引入socket.io 406
19.3 創建一個簡單的服務器 407
19.4 在服務器端創建套接字 407
19.5 啟動服務器 408
19.6 在客戶端創建一個套接字并連接到服務器 408
19.7 記錄游戲內部指標 409
19.8 管理高分記錄 412
19.8.1 實現高分記錄的用戶界面 413
19.8.2 檢索服務器中的高分記錄 415
19.8.3 在客戶端顯示高分記錄 418
19.8.4 監視姓名輸入 419
19.8.5 驗證并將高分記錄存儲到服務器 420
19.8.6 重新顯示高分記錄 422
19.8.7 開始新游戲 422
19.9 部署Snail Bait游戲 423
19.10 將文件上傳到服務器 425
19.11 小結 426
19.12 練習 426
第20章 后記：Bodega Revenge游戲 428
20.1 設計用戶界面 430
20.2 創建sprite表單 433
20.3 實例化游戲 433
20.4 實現sprite對象 434
20.4.1 炮塔 434
20.4.2 炮彈 437
20.4.3 小鳥 439
20.5 實現sprite對象的行為 441
20.5.1 炮塔的行為 442
20.5.2 炮彈的行為 447
20.5.3 小鳥的行為 450
20.6 繪制剩余炮彈指示器 454
20.7 為移動設備實現觸摸控制 456
20.8 小結 458
20.9 練習 459
查看全部↓
新書資訊