HTML5遊戲開發實踐指南（簡體書）

《HTML5游戲開發實踐指南》以實踐為導向，全面講解了HTML5游戲開發所需掌握的各種最新技術、可以使用的各種工具和框架，以及開發的思維和方法，是系統學習HTML5游戲開發的最佳選擇之一。
《HTML5游戲開發實踐指南》內容全面而且極具前瞻性，不僅重點闡述了HTML5和JavaScript的核心技術，而且還仔細講解了WebGL、SVG、ProcessingJS、Inkscape、RaphalJS、PhoneGap、SGF、CoffeeScript和Node.js等與HTML5開發相關的各種技術、工具、框架、類庫等的功能和使用方法，為HTML5應用開發者描繪了一幅完整的技術全景圖。更為重要的是，它還深入講解了HTML5游戲的運作機制、游戲開發與設計的思維和方法、游戲的性能優化方法，及其在各種平臺上的發布方法。本書的實戰性和可操作性也非常強，包含大量示例，有助于讀者對理論知識進行融會貫通。 全書一共11章：第1章詳細講解了Canvas等HTML5的核心技術；第2章首先介紹了如何搭建一個完善的HTML5開發環境，然後講解了如何部署HTML5應用開發需要的Web服務器端工具、瀏覽器端工具以及HTML5工具；第3章講解了JavaScript的核心技術以及jQuery框架的使用；第4章探討了游戲的設計思路和游戲的運行機制；第5～8章以實例的方式講解了如何通過Canvas標簽、SVG、RaphalJS、WebGL、Three.js、GWT、CoffeeScript等最新流行的技術和框架來開發游戲；第9章講解了如何利用現今流行的Node.js來構建多人游戲服務器；第10章講解了在Android、iOS、Windows Phone等主流移動平臺上開發HTML5游戲的核心技術和PhoneGap等移動開發框架；第11章探討了HTML5游戲的資源優化以及在各種平臺的完整發布過程。

作者：(美國)Williams，J. L. 譯者：黃敏 李彬 何元媛 等

James.L.Williams是硅谷一名經驗豐富的開發專家，經常在世界各地講解有關Java、用戶界面和游戲編程方面的內容。他發明了SwingXBuilder(一種利用SwingX組件創建用戶界面的特定域語言)，同時，他還是Griffon項目(一個使用Groovy構建富應用程序的框架)的聯合創始人之一。由他和他的團隊構思、編碼并實現了運行在SXSW上的教練車產品，因此在StartupBus 2011大賽中獲獎。

《HTML5游戲開發實踐指南》全面講解HTML5游戲開發所需掌握的各種最新技術、工具和框架，以及開發的思維和方法；包含應用程序學習示例的整個開發過程，具有極強的實戰性和可操作性。

前言：
筆者撰寫本書是為了解一時之癢，同時也是由于看到了目前新生的HTML5游戲社區的發展潛力。筆者希望引領讀者，通過最佳實踐遨游陌生的HTML5領域，并掌握Canvas、WebGL和SVG這些技術。
開發人員已經認識到HTML5并不僅僅是一個玩具。他們驚喜地發現：HTML5擁有和精美的桌面應用程序一樣豐富的內容——例如，雙緩沖區處理、硬件加速、無須插件支持的瀏覽器內置緩存等。而此前，部分開發人員還認為，只有Flash技術才能提供類似支持。可以看到一種有趣的轉變，即由“一切使用Flash”到“僅當使用HTML5無法實現時才使用Flash”的技術趨勢。
在筆者寫這本書時，HTML5游戲編程環境已經發展得相當成熟。筆者相信這項技術將會繼續發展下去，同時期待它將來取得更大進展。
本書特點
本書內容涵蓋“寬泛”意義上的HTML5技術，這意味著包括HTML5規范、WebGL、SVG和JavaScript，因為它們均與游戲編程相關。書中各章討論了實現流行游戲效果背後的數學內容，并先向讀者說明努力的方向，然後再展示一些代碼示例。對于那些習慣使用JavaScript編程的讀者而言，本書有一章講解創建游戲時使用的其他語言，包括在JavaScript引擎中直接運行的語言，能夠被編譯成JavaScript的語言，以及二者混合的語言。近幾個月，服務器端JavaScript席卷了編程世界，這意味著在構建游戲過程中增加了一個額外靈活的層次。程序邏輯仍然從自包含的客戶端實例開始，之後在基本不需要修改代碼的情況下，由服務器端實例進行擴展。本書結尾部分講解了發布游戲的具體途徑和方法。開發人員有多種游戲引擎和開發庫可選擇。在處理數據過程中，書中涉及的所有開發庫都具有通用性，讀者可通過本書輕松掌握這些知識，并將其用于其他庫中。本書不講解WebGL的底層細節，而是選擇使用高層庫的方式按需訪問底層API。本書的目的是使讀者迅速上手，而不是講解關于WebGL的所有內
容，那需要一整本書的篇章才能講完。
本書讀者對象
本書為那些愿意學習或使用HTML5及相關Web技術開發交互式游戲的應用開發者而編寫。本書假設讀者具有一些編程語言知識和基本的數學知識。
本書代碼示例及練習
讀者可以訪問網址下載各章的代碼示例和練習答案。另外，也可以訪問Github網站找到代碼示例。
致謝
對于本書而言，我有很多人要感謝。首先是在本書出版過程中提供了無法估量的貢獻的Pearson團隊（包括TrinaMacDonald、SonglinQiu和OliviaBasegio），他們使本書更棒，我認為他們成功做到了。撰寫本書時，主題在迅速地變化發展，技術編輯RominIrani、PascalRettig和RobertSchwentker對市場走向進行了特別的考量，我很高興與他們合作，他們分享我的激情，給予我快速、明確的反饋，驗證我的猜想并使我修正偏離的方
向。最後，我要感謝的是我的家人和朋友，他們很有耐心而沒有怨言，當我疲憊的時候讓我放松，讓我休息。

譯者序
前言
第1章　HTML5概述1
1.1　超越基本的HTML1
1.1.1　JavaScript2
1.1.2　AJAX2
1.2　填補空白2
1.2.1　GoogleGears3
1.2.2　ChromeFrame3
1.3　使用WebSockets和WebWorkers編程4
1.3.1　WebSockets4
1.3.2　WebWorkers4
1.4　應用程序緩存5
1.5　數據庫API6
1.5.1　WebSQLAPI6
1.5.2　IndexedDBAPI7
1.6　WebStorage7
1.7　定位8
1.8　提示用戶消息10
1.8.1　為顯示提示請求權限11
1.8.2　創建提示12
1.8.3　與提示信息實現交互13
1.9　媒體元素13
1.9.1　控制媒體播放14
1.9.2　處理不支持的格式15
1.10　繪畫API16
1.10.1　Canvas16
1.10.2　SVG16
1.10.3　WebGL16
1.11　使用Microdata傳達信息17
1.12　小結18
第2章　配置開發環境19
2.1　開發工具19
2.1.1　安裝Java19
2.1.2　安裝EclipseIDE和Google插件20
2.1.3　GoogleWebToolkit21
2.2　Web服務器端工具和選項22
2.2.1　GoogleAppEngine23
2.2.2　OperaUnite23
2.2.3　Node.js和RingoJS23
2.3　瀏覽器端工具24
2.3.1　Chrome開發人員工具24
2.3.2　Chrome擴展程序25
2.3.3　Safari開發人員工具26
2.3.4　Firebug26
2.4　HTML5工具27
2.4.1　ProcessingJS27
2.4.2　Inkscape27
2.4.3　SVG-edit27
2.4.4　Raphal28
2.5　3D建模工具29
2.6　小結29
第3章　JavaScript概述30
3.1　什么是JavaScript30
3.1.1　JavaScript基本類型30
3.1.2　理解算術運算符31
3.1.3　理解JavaScript函數31
3.1.4　first-class對象函數32
3.1.5　比較運算符33
3.2　條件和循環語句34
3.2.1　使用循環控制程序流35
3.2.2　使用setTimeout和setInterval函數實現延遲執行36
3.3　使用繼承和多態創建復雜對象37
3.4　JQuery簡介39
3.4.1　使用選擇器操作DOM元素40
3.4.2　JQuery事件41
3.4.3　JQuery中的AJAX41
3.4.4　跨站點腳本42
3.5　JSON：另一種JavaScript格式42
3.6　瀏覽器外的JavaScript43
3.6.1　移動平臺43
3.6.2　將JavaScript作為中間語言43
3.6.3　桌面應用中的JavaScript44
3.7　服務器端JavaScript45
3.8　小結46
3.9　練習47
第4章　游戲運行機制48
4.1　游戲設計48
4.1.1　撰寫基本設計文檔48
4.1.2　確定游戲類型49
4.1.3　游戲循環50
4.1.4　獲取用戶輸入50
4.2　使用高級數據結構實現游戲對象50
4.2.1　使用Set構建唯一數據列表50
4.2.2　使用鏈表創建對象圖52
4.3　理解SGF中的API53
4.3.1　核心API53
4.3.2　組件API54
4.3.3　資源API及網絡API55
4.4　使用SGF構建乒乓球游戲55
4.4.1　設置應用程序56
4.4.2　繪制游戲配件57
4.5　碰撞檢測和響應59
4.5.1　理解牛頓三大定律59
4.5.2　讓球動起來61
4.5.3　高級碰撞檢測和粒子系統62
4.6　通過人工智能增加游戲難度63
4.6.1　將人工智能應用到乒乓球游戲63
4.6.2　將人工智能應用到井字棋游戲64
4.7　小結66
4.8　練習66
第5章　使用Canvas標簽構建游戲67
5.1　Canvas基礎67
5.1.1　繪制路徑68
5.1.2　繪制井字棋游戲的棋子69
5.2　使用變換繪制Canvas中的對象70
5.2.1　變換規則72
5.2.2　保存和恢復Canvas繪圖狀態72
5.3　在Canvas中使用圖片73
5.3.1　使用DataURI訪問圖片73
5.3.2　使用Spritesheets訪問圖片74
5.3.3　在Canvas中繪制圖片74
5.4　使用Trident.js創建動畫對象75
5.4.1　創建時間線75
5.4.2　使用關鍵幀實現動畫76
5.4.3　使用緩沖函數創建非線性時間線77
5.4.4　使用Spritesheets創建游戲對象動畫78
5.5　在2D空間模擬3D79
5.5.1　透視投影79
5.5.2　視差80
5.5.3　使用JavaScript創建視差效果80
5.6　創建CopyMe游戲82
5.6.1　繪制游戲對象82
5.6.2　創建游戲音調82
5.6.3　在瀏覽器中播放MIDI文件84
5.6.4　同時播放多個音頻84
5.6.5　順序播放音頻85
5.6.6　繪制游戲文本86
5.6.7　使用CSS設置文本字體86
5.7　小結87
5.8　練習87
第6章　使用SVG和RaphalJS構建游戲88
6.1　SVG概述88
6.2　使用RaphalJS89
6.2.1　設置游戲開發環境90
6.2.2　創建游戲板91
6.2.3　繪制游戲文本92
6.3　自定義字體92
6.3.1　設置顏色95
6.3.2　加載游戲資源96
6.3.3　將SVG文件轉換成位圖97
6.4　創建游戲類98
6.4.1　洗牌99
6.4.2　繪制及卡片動畫100
6.5　制作高級動畫102
6.5.1　路徑102
6.5.2　moveto和lineto103
6.5.3　curveto103
6.5.4　從SVG文件中導出路徑104
6.5.5　在路徑中使用動畫104
6.6　使用插件擴展Raphal105
6.6.1　添加函數105
6.6.2　SVG濾鏡105
6.7　權衡速度106
6.8　小結106
6.9　練習106
第7章　使用WebGL和Three.js構建游戲108
7.1　三維109
7.2　用材質和光源美化對象110
7.2.1　了解照明110
7.2.2　使用材質及著色器111
7.3　創建第一個Three.js場景113
7.3.1　設置視角113
7.3.2　觀察世界118
7.4　使用Three.js加載3D模型119
7.5　著色及紋理處理的編程121
7.6　使用紋理123
7.7　使用Three.js創建游戲125
7.8　用游戲模擬真實世界126
7.9　重溫粒子系統129
7.10　創建場景130
7.11　模型動畫設計131
7.12　3D模型資源131
7.13　校準游戲132
7.13.1　用Stats.js檢查幀速率133
7.13.2　運用WebGLInspector133
7.14　小結134
7.15　練習134
第8章　不使用JavaScript構建游戲135
8.1　GoogleWebToolkit135
8.1.1　了解GWT部件及布局136
8.1.2　使用JSNI向GWT展示JavaScript庫137
8.1.3　RaphalGWT138
8.1.4　使用gwt-html5-media創建聲音139
8.1.5　使用GWT訪問繪圖API139
8.2　CoffeeScript140
8.2.1　安裝CoffeeScript141
8.2.2　編譯CoffeeScript文件141
8.3　CoffeeScript快速指南142
8.3.1　基礎142
8.3.2　函數和調用142
8.3.3　別名、條件語句和循環語句144
8.3.4　增強的for循環和集合視圖144
8.3.5　類和繼承145
8.4　替代技術146
8.4.1　Cappuccino146
8.4.2　Pyjamas146
8.5　小結147
8.6　練習147
第9章　構建多人游戲服務器148
9.1　Node.js簡介148
9.1.1　使用Node包管理器擴展Node149
9.1.2　Node的多版本管理149
9.2　使用ExpressJS簡化WebApp生成149
9.2.1　使用URL路由滿足服務請求150
9.2.2　會話管理152
9.2.3　理解ExpressJS應用程序的結構152
9.2.4　使用CoffeeKup定制HTML模板153
9.3　使用緩存存儲數據155
9.4　管理C/S通信155
9.4.1　使用Socket.IO通信156
9.4.2　使用Express安裝一個簡單的Socket.IO應用程序156
9.4.3　使用NowJS簡化WebSockets157
9.5　調試Node應用程序158
9.6　創建游戲服務器159
9.6.1　創建游戲大廳159
9.6.2　使用NowJSGroups創建游戲房間160
9.6.3　管理游戲玩家和在不同的游戲房間中移動161
9.7　管理游戲162
9.8　小結163
9.9　練習163
第10章　開發移動游戲164
10.1　選擇移動平臺164
10.1.1　iOS164
10.1.2　Android164
10.1.3　WebOS165
10.1.4　WindowsPhone7165
10.2　flick、tap和swipe：移動手勢簡介166
10.3　選擇應用程序還是Web站點166
10.4　在移動設備上存儲數據168
10.4.1　從Lawnchair中解脫：一種相對容易的數據存儲方法168
10.4.2　開始使用Lawnchair169
10.5　使用JQuery和Zepto簡化客戶端腳本170
10.5.1　使用JQuery變種170
10.5.2　使用Zepto.js171
10.6　使用JoApp構建應用程序172
10.7　選擇應用程序框架173
10.7.1　PhoneGap173
10.7.2　深入PhoneGapAPI173
10.7.3　AppceleratorTitanium175
10.7.4　深入AppceleratorTitaniumAPI175
10.8　使用Titanium和PhoneGap打包Android應用程序176
10.8.1　使用Titanium打包應用程序177
10.8.2　使用PhoneGap打包應用程序179
10.9　小結182
10.10　練習183
第11章　游戲發布184
11.1　優化游戲資源184
11.1.1　使用GoogleClosure編譯器進行代碼小型化184
11.1.2　使用緩存運行離線程序185
11.2　服務器的主機服務188
11.3　在部署Node.js的服務器上發布游戲189
11.4　在ChromeWebStore上發布應用190
11.4.1　描述應用的元數據191
11.4.2　部署主機應用191
11.4.3　部署應用程序包193
11.4.4　在本地測試應用程序193
11.4.5　上傳應用程序到ChromeWebStore193
11.4.6　配置應用程序194
11.4.7　確定使用包應用還是使用Chrome主機應用195
11.5　使用TapJS發布應用197
11.5.1　創建TapJS應用197
11.5.2　打包TapJS應用程序199
11.5.3　將TapJS應用程序發布到Facebook199
11.6　使用Kongregate發布游戲201
11.7　將HTML5應用程序發布到桌面201
11.8　小結202
11.9　練習202

第1章
HTML5概述
HTML5是HTML下一版本的規范草案，它突破了其前身，即HTML4和XHTML技術。在HTML5中移除了部分元素，同時HTML5也不再基于舊的文本標記標準SGML。HTML5比HTML4在錯誤語法方面具有更好的兼容性。同時，還允許不同瀏覽器以相同方式解析和展示格式錯誤的文檔。這個版本的HTML增加了許多值得注意的內容，例如，內建原生圖片支持以及視聽元素。本章講解HTML5的新增特性和相關的JavaScriptAPI。
1.1超越基本的HTML
TimBerners-Lee發明的HTML（HypertextMarkupLanguage，超文本標記語言）從1990年至今已有相當長一段歷史。雖然所有的進步對于推動標準前進都至關重要，但筆者最感興趣的是1996年出現的JavaScript和2005年出現的AJAX。這些新特性使得Web頁面，從一個表示靜態單向數據的媒體（例如，報紙和圖書）轉變為一個允許雙向交流的媒體。
1.1.1JavaScript
JavaScript（前身為LiveScript，正式名為ECMAScript）由Netscape公司開發的瀏覽器腳本語言發展而來。它是一種基于原型的弱類型腳本語言，具有面向對象或者面向函數的特性。盡管名為JavaScript，也繼承了Java語言的某些方面，但是它與C語言更為相似。
作為SunMicrosystems公司（現為Oracle公司）和Netscape公司之間，關于推廣腳本語言和JavaApplet技術市場協議的一部分，該語言被重命名為JavaScript。JavaScript語言廣泛用于編寫客戶端Web頁面腳本。同時，由于Sun公司已將“JavaScript”名稱注冊成為商標，所以微軟公司將發布的與其兼容的腳本語言命名為JScript，并對其添加了一些新內容，并進行了一些修改。