HTML5遊戲開發進階指南（亞馬遜5星暢銷書，教你用HTML5和JavaScript構建遊戲！）
基本介紹
- 書名：HTML5遊戲開發進階指南
- 作者：【印】香卡（Shankar,A.R.） 著
- 譯者：謝光磊 譯
- ISBN：978-7-121-21226-0
- 頁數：412頁
- 定價：79.00元
- 出版社：電子工業出版社
- 出版時間：2013年9月出版
- 開本：16開
基本信息：,內容簡介：,作者簡介：,譯者簡介：,目錄：,本書結構,譯者序：,
基本信息：
出 版 社：電子工業出版社
出版時間：2013-9-1
版 次：1 頁 數：412 字 數：562400
印刷時間：2013-9-1 開 本：16開 紙 張：膠版紙
印 次：1 I S B N：9787121212260 包 裝：平裝
內容簡介：
本書介紹了HTML5 遊戲開發的一般過程和技巧。全書共分12 章，第1章介紹了本書相關的HTML5的諸多新特性，包括在canvas 上繪圖、播放聲音等，另外還引入了子畫面頁的概念；第2~4章利用Box2D物理引擎開發了一款非常類似於《憤怒的小鳥》的遊戲，全面介紹了物理引擎的概念，以及在遊戲中使用物理引擎的方法，這一部分還引入了視差滾動技巧，以實現某種偽3D效果；第5~10章開發了一款簡化版的《紅色警戒》遊戲，這一部分涉及了相當多的內容，包括地圖的製作，建築與單位的設定、繪製，玩家與單位的互動，觸發器與劇情的編寫，路徑規划算法等；第11、12章利用nodeJS 和WebSocket開發了《紅色警戒》遊戲的多人對戰模式，這一部分的主要問題是保持遊戲在多個玩家的瀏覽器中的狀態一致。
對於熟悉前端開發，想用前端技術做一些更酷的事情，卻又不知如何下手的人，這是一本可多得的好書。
對於熟悉前端開發，想用前端技術做一些更酷的事情，卻又不知如何下手的人，這是一本可多得的好書。
作者簡介：
Aditya RaviShankar是在1993年第一次接觸計算機之後開始學習編程的。當時還沒有網際網路和線上教程，他在當地圖書館找到一本編程書籍，並通過艱苦地重寫書中的代碼，編寫了他的第一個GW-BASIC遊戲。2001年，他從印度理工學院畢業之後，做了近10年的軟體顧問，為投資銀行和大型企業開發交易與分析系統。最後，他離開了這個行業，這樣他可以專注於從事自己所熱愛的遊戲開發。從此，作為一個自信的極客，他使用各種新的語言和技術來進行自己的項目和實驗，包括HTML5。在這期間，他獨立在HTML5平台上重建了著名的命令與征服RTS遊戲，他也因此而著名。除了編程，Aditya還喜歡桌球、薩爾薩舞，以及學習發揮潛意識。他在其個人站點中有一些關於遊戲編程、個人發展和桌球的文章。當他不忙於寫作，或者不用專注於自己的項目時，他也會做一些諮詢工作，以幫助企業來使用新的軟體產品。
譯者簡介：
謝光磊，中科院某所碩士研究生在讀。熱愛生活，熱愛Web前端開發，熱愛WebGL技術。理想是成為一流的遊戲設計師。
技術審核者簡介：
ShaneHudson是一位自由的Web站點開發者，專注於最前沿的Web技術和Web標準。他曾經參與過大量互動式Web站點的工作並輔助項目的開發，具有豐富的使用JavaScript的經驗。他對人工智慧和計算機視覺具有濃厚的興趣。
Shane說：“Shankar撰寫的這本書正是業界所需要的：關於如何有效並熟練地編寫JavaScript（和Node.js）。這本書教你如何編寫遊戲，但它並不僅僅是一本關於遊戲開發的書，還是一本教你如何編寫高質量JavaScript代碼的書。”
Josh Robinson是一位專注於前沿技術的編程專家和自由開發者。他對編程的熱愛最初來自一台二手的Commodore64計算機螢幕上的藍色螢光，後來他選擇現代Web開發作為自己的職業。2006年，他供職於一家網路電話供應商之時，發現了Ruby和Rubyon Rails的優雅之處，並開發了若干個gem，其中包括流行的countriesgem。JoshRobinson說：“有了這本書，你就能像一個Boss一樣寫代碼了。”
Syd Lawrence經營並管理著We Make AwesomeSh，他是Twilio的開發者和傳播者。他獲得過很多讚譽。Geek曾經將他形容為現代的超級英雄，而The NextWeb曾經說他是社交網路的領袖。
目錄：
HTML5與JavaScript概要 1
1.1 canvas元素 2
1.1.1 繪製矩形 3
1.1.2 繪製複雜形狀或路徑 5
1.1.3 繪製文本 7
1.1.4 自定義畫筆樣式（顏色和紋理） 8
1.1.5 繪製圖像 9
1.1.6 平移和旋轉 10
1.2 audio元素 11
1.3 image元素 14
1.3.1 圖像載入 15
1.3.2 子畫面頁（精靈圖） 15
1.4 動畫：計時器和遊戲循環 17
1.4.1 requestAnimationFrame 18
1.5 小結 20
第2章 創建基本的遊戲世界 21
2.1 基本HTML布局 21
2.2 創建啟動畫面和主選單 22
2.3 關卡選擇 26
2.4 載入圖像 29
2.5 載入關卡 33
2.6 動畫 34
2.7 處理滑鼠輸入 37
2.8 設定遊戲階段 39
2.9 小結 42
第3章 物理引擎基礎 43
3.1 Box2D基礎 43
3.1.1 引入Box2D 44
3.1.2 定義World變數 45
3.1.3 添加第一個物體：地面 46
3.1.4 繪製世界：調試繪圖模式 48
3.1.5 動畫 50
3.2 更多的Box2D元素 52
3.2.1 創建矩形物體 52
3.2.2 創建圓形物體 54
3.2.3 創建多邊形物體 56
3.2.4 創建多種形狀的複雜物體 58
3.2.5 連線物體的接合點 61
3.3 追蹤碰撞與破壞 64
3.3.1 接觸監聽器 65
3.4 繪製角色 68
3.5 小結 71
第4章 物理引擎集成 72
4.1 定義物體 72
4.2 添加Box2D 75
4.3 創建物體 78
4.4 向關卡加入物體 79
4.5 設定Box2D調試繪圖 82
4.6 繪製物體 84
4.7 Box2D動畫 86
4.8 載入英雄 88
4.9 發射英雄 91
4.10 結束關卡 94
4.11 碰撞損壞 96
4.12 繪製彈弓橡膠帶 99
4.13 切換關卡 101
4.14 添加聲音 103
4.14.1 添加斷裂和反彈的音效 104
4.14.2 添加背景音樂 107
4.15 小結 110
第5章 創建即時戰略遊戲世界 111
5.1 基本HTML布局 112
5.2 創建啟動畫面和主選單 112
5.3 地圖與關卡 118
5.4 載入任務簡介畫面 120
5.5 製作遊戲界面 124
5.6 實現地圖平移 131
5.7 小結 137
第6章 加入單位 138
6.1 定義單位 138
6.2 第一個物體：主基地 139
6.3 為關卡添加單位 143
6.4 繪製單位 147
6.5 添加星港 150
6.6 添加煉油廠 154
6.7 添加炮塔 157
6.8 添加車輛 160
6.9 添加飛行器 165
6.10 添加地形 170
6.11 選中遊戲單位 175
6.12 強調選中的單位 178
6.13 小結 183
第7章 單位智慧型移動 184
7.1 命令單位 184
7.2 傳送和接收命令 186
7.3 執行指令 188
7.4 實現飛行器移動 189
7.5 路徑規劃 195
7.6 定義尋徑格網 196
7.7 實現車輛移動 203
7.8 碰撞檢測和導航 207
7.9 將採油車展開為煉油廠 214
7.10 流暢移動 215
7.11 小結 219
第8章 添加更多的遊戲元素 220
8.1 實現基本的經濟系統 220
8.1.1 設定啟動資金 220
8.1.2 實現側邊欄 223
8.1.3 獲取資金 225
8.2 購買建築和單位 226
8.2.1 添加側邊欄按鈕 226
8.2.2 啟用與禁用側邊欄按鈕 229
8.2.3 在星港建造車輛和飛行器 232
8.2.4 從基地建造建築 241
8.3 結束關卡 249
8.3.1 實現訊息對話框 250
8.3.2 實現觸發器 254
8.4 小結 259
第9章 添加武器和戰鬥 261
9.1 實現戰鬥系統 261
9.1.1 添加炮彈 261
9.1.2 炮塔的戰鬥指令 269
9.1.3 飛行器的戰鬥指令 274
9.1.4 車輛的戰鬥指令 279
9.2 創建智慧型的敵人 284
9.3 添加戰爭迷霧 287
9.3.1 定義迷霧對象 287
9.3.2 繪製迷霧 290
9.3.3 禁止在迷霧上建造建築 293
9.4 小結 295
第10章 完成單人戰役 296
10.1 添加音效 296
10.1.1 創建音效 296
10.1.2 命令確認音效 298
10.1.3 訊息提示音 301
10.1.4 戰鬥音效 302
10.2 創建單人戰役 303
10.2.1 救援 303
10.2.2 襲擊 312
10.2.3 抵抗圍攻 318
10.3 小結 329
第11章 WebSocket與多人對戰模式 331
11.1 使用Node.js操作WebSocket API 331
11.1.1 瀏覽器端的WebSocket 331
11.1.2 使用Node.js創建HTTP伺服器 334
11.1.3 創建WebSocket伺服器 336
11.2 創建多人對戰遊戲大廳 339
11.2.1 定義多人對戰大廳界面 339
11.2.2 遊戲房間列表 341
11.2.3 進入和離開房間 345
11.3 啟動多人對戰遊戲 351
11.3.1 定義多人對戰關卡 351
11.3.2 載入多人戰役關卡 354
11.4 小結 359
第12章 多人對戰遊戲操作 360
12.1 同步網路模型 360
12.1.1 測量網路傳輸時間 361
12.1.2 傳送命令 365
12.2 結束多人對戰 370
12.2.1 玩家被擊敗時結束遊戲 370
12.2.2 玩家下線時結束遊戲 375
12.2.3 玩家丟失連線時結束遊戲 376
12.3 實現玩家聊天 378
12.4 小結 382
索引 384
1.1 canvas元素 2
1.1.1 繪製矩形 3
1.1.2 繪製複雜形狀或路徑 5
1.1.3 繪製文本 7
1.1.4 自定義畫筆樣式（顏色和紋理） 8
1.1.5 繪製圖像 9
1.1.6 平移和旋轉 10
1.2 audio元素 11
1.3 image元素 14
1.3.1 圖像載入 15
1.3.2 子畫面頁（精靈圖） 15
1.4 動畫：計時器和遊戲循環 17
1.4.1 requestAnimationFrame 18
1.5 小結 20
第2章 創建基本的遊戲世界 21
2.1 基本HTML布局 21
2.2 創建啟動畫面和主選單 22
2.3 關卡選擇 26
2.4 載入圖像 29
2.5 載入關卡 33
2.6 動畫 34
2.7 處理滑鼠輸入 37
2.8 設定遊戲階段 39
2.9 小結 42
第3章 物理引擎基礎 43
3.1 Box2D基礎 43
3.1.1 引入Box2D 44
3.1.2 定義World變數 45
3.1.3 添加第一個物體：地面 46
3.1.4 繪製世界：調試繪圖模式 48
3.1.5 動畫 50
3.2 更多的Box2D元素 52
3.2.1 創建矩形物體 52
3.2.2 創建圓形物體 54
3.2.3 創建多邊形物體 56
3.2.4 創建多種形狀的複雜物體 58
3.2.5 連線物體的接合點 61
3.3 追蹤碰撞與破壞 64
3.3.1 接觸監聽器 65
3.4 繪製角色 68
3.5 小結 71
第4章 物理引擎集成 72
4.1 定義物體 72
4.2 添加Box2D 75
4.3 創建物體 78
4.4 向關卡加入物體 79
4.5 設定Box2D調試繪圖 82
4.6 繪製物體 84
4.7 Box2D動畫 86
4.8 載入英雄 88
4.9 發射英雄 91
4.10 結束關卡 94
4.11 碰撞損壞 96
4.12 繪製彈弓橡膠帶 99
4.13 切換關卡 101
4.14 添加聲音 103
4.14.1 添加斷裂和反彈的音效 104
4.14.2 添加背景音樂 107
4.15 小結 110
第5章 創建即時戰略遊戲世界 111
5.1 基本HTML布局 112
5.2 創建啟動畫面和主選單 112
5.3 地圖與關卡 118
5.4 載入任務簡介畫面 120
5.5 製作遊戲界面 124
5.6 實現地圖平移 131
5.7 小結 137
第6章 加入單位 138
6.1 定義單位 138
6.2 第一個物體：主基地 139
6.3 為關卡添加單位 143
6.4 繪製單位 147
6.5 添加星港 150
6.6 添加煉油廠 154
6.7 添加炮塔 157
6.8 添加車輛 160
6.9 添加飛行器 165
6.10 添加地形 170
6.11 選中遊戲單位 175
6.12 強調選中的單位 178
6.13 小結 183
第7章 單位智慧型移動 184
7.1 命令單位 184
7.2 傳送和接收命令 186
7.3 執行指令 188
7.4 實現飛行器移動 189
7.5 路徑規劃 195
7.6 定義尋徑格網 196
7.7 實現車輛移動 203
7.8 碰撞檢測和導航 207
7.9 將採油車展開為煉油廠 214
7.10 流暢移動 215
7.11 小結 219
第8章 添加更多的遊戲元素 220
8.1 實現基本的經濟系統 220
8.1.1 設定啟動資金 220
8.1.2 實現側邊欄 223
8.1.3 獲取資金 225
8.2 購買建築和單位 226
8.2.1 添加側邊欄按鈕 226
8.2.2 啟用與禁用側邊欄按鈕 229
8.2.3 在星港建造車輛和飛行器 232
8.2.4 從基地建造建築 241
8.3 結束關卡 249
8.3.1 實現訊息對話框 250
8.3.2 實現觸發器 254
8.4 小結 259
第9章 添加武器和戰鬥 261
9.1 實現戰鬥系統 261
9.1.1 添加炮彈 261
9.1.2 炮塔的戰鬥指令 269
9.1.3 飛行器的戰鬥指令 274
9.1.4 車輛的戰鬥指令 279
9.2 創建智慧型的敵人 284
9.3 添加戰爭迷霧 287
9.3.1 定義迷霧對象 287
9.3.2 繪製迷霧 290
9.3.3 禁止在迷霧上建造建築 293
9.4 小結 295
第10章 完成單人戰役 296
10.1 添加音效 296
10.1.1 創建音效 296
10.1.2 命令確認音效 298
10.1.3 訊息提示音 301
10.1.4 戰鬥音效 302
10.2 創建單人戰役 303
10.2.1 救援 303
10.2.2 襲擊 312
10.2.3 抵抗圍攻 318
10.3 小結 329
第11章 WebSocket與多人對戰模式 331
11.1 使用Node.js操作WebSocket API 331
11.1.1 瀏覽器端的WebSocket 331
11.1.2 使用Node.js創建HTTP伺服器 334
11.1.3 創建WebSocket伺服器 336
11.2 創建多人對戰遊戲大廳 339
11.2.1 定義多人對戰大廳界面 339
11.2.2 遊戲房間列表 341
11.2.3 進入和離開房間 345
11.3 啟動多人對戰遊戲 351
11.3.1 定義多人對戰關卡 351
11.3.2 載入多人戰役關卡 354
11.4 小結 359
第12章 多人對戰遊戲操作 360
12.1 同步網路模型 360
12.1.1 測量網路傳輸時間 361
12.1.2 傳送命令 365
12.2 結束多人對戰 370
12.2.1 玩家被擊敗時結束遊戲 370
12.2.2 玩家下線時結束遊戲 375
12.2.3 玩家丟失連線時結束遊戲 376
12.3 實現玩家聊天 378
12.4 小結 382
索引 384
本書結構
本書將利用12章的內容向你展示創建兩款完整遊戲的過程。
前4章將創建遊戲《水果戰爭》——一款基於Box2D物理引擎的遊戲，它與遊戲《憤怒的小鳥》極為類似。
第1章將討論用來實現遊戲的HTML5基礎，如在canvas元素上繪圖並產生動畫，播放音樂，使用子畫面頁。
第2章將搭建一個基本的遊戲框架，包括啟動畫面、主選單、資源載入器和基於視差滾動的一個基本關卡。
第3章將詳細介紹Box2D物理引擎，並展示如何使用Box2D來模擬遊戲世界中的物理規律。
第4章將把遊戲框架和Box2D引擎結合起來，添加音效和音樂，創建一個完整的可玩的物理類遊戲。
接著，本書將創建一款即時戰略遊戲，包括單人戰役模式和多人對戰模式。接下來的6章將討論單人戰役模式。
第5章包含了建立基本遊戲框架的內容，包括啟動畫面、主選單、資源載入器和基於滑鼠平移地圖的基本關卡。
第6章向遊戲中添加了不同類型的單位，如車輛、飛行器、建築。
第7章使用路徑規划算法和導航算法，展示如何使單位的移動更加智慧型。
第8章向遊戲中添加經濟系統和一個觸發器系統。觸發器將幫助我們編寫遊戲劇情。
第9章實現遊戲的武器和戰鬥系統。
第10章在已有的框架之上，展示如何創建數個具有挑戰性的單人戰役關卡，並最終完成遊戲單人戰役模式。
最後兩章將研究如何實現即時戰略遊戲的多人對戰部分。
第11章將討論使用WebSocket API和Node.js的基本方法，並創建一個多人對戰大廳。
第12章將利用同步網路模型實現多人對戰操作的框架，並在維持同步性的同時對網路延遲進行補償。
前4章將創建遊戲《水果戰爭》——一款基於Box2D物理引擎的遊戲，它與遊戲《憤怒的小鳥》極為類似。
第1章將討論用來實現遊戲的HTML5基礎，如在canvas元素上繪圖並產生動畫，播放音樂，使用子畫面頁。
第2章將搭建一個基本的遊戲框架，包括啟動畫面、主選單、資源載入器和基於視差滾動的一個基本關卡。
第3章將詳細介紹Box2D物理引擎，並展示如何使用Box2D來模擬遊戲世界中的物理規律。
第4章將把遊戲框架和Box2D引擎結合起來，添加音效和音樂，創建一個完整的可玩的物理類遊戲。
接著，本書將創建一款即時戰略遊戲，包括單人戰役模式和多人對戰模式。接下來的6章將討論單人戰役模式。
第5章包含了建立基本遊戲框架的內容，包括啟動畫面、主選單、資源載入器和基於滑鼠平移地圖的基本關卡。
第6章向遊戲中添加了不同類型的單位，如車輛、飛行器、建築。
第7章使用路徑規划算法和導航算法，展示如何使單位的移動更加智慧型。
第8章向遊戲中添加經濟系統和一個觸發器系統。觸發器將幫助我們編寫遊戲劇情。
第9章實現遊戲的武器和戰鬥系統。
第10章在已有的框架之上，展示如何創建數個具有挑戰性的單人戰役關卡，並最終完成遊戲單人戰役模式。
最後兩章將研究如何實現即時戰略遊戲的多人對戰部分。
第11章將討論使用WebSocket API和Node.js的基本方法，並創建一個多人對戰大廳。
第12章將利用同步網路模型實現多人對戰操作的框架，並在維持同步性的同時對網路延遲進行補償。
譯者序：
香港回歸那一年的某一天，我第一次在同學家的電腦上觀摩了他玩《紅色警戒95》這款遊戲的過程。至今我依然記得，當時他操縱著一輛吉普車和幾名步兵，在地圖上探索。隊伍所到之處，原先覆蓋著的黑色迷霧就會散去，顯現出其下的地形來。說實話，我被這個效果深深地震撼了。不久，父母為家裡添置了一台電腦，我也如願以償地玩上了這款遊戲。事實上，作為20世紀80年代末出生的一批人，電子遊戲伴隨我度過了幾乎整個少年時代。
一款優秀的遊戲就好像一部引人入勝的小說（如《仙劍奇俠傳》《空之軌跡》），或者一部偉大的百科全書（如《文明》《三國志》），令人擊節稱讚。不同的是，電子遊戲帶給玩家的沉浸感，比書籍帶給讀者的更加直接和濃烈。我無數次萌生出這樣的念頭：如果能製作出自己的遊戲——製作遊戲場景和背景音樂，設定角色與怪物的外形和技能，建立戰鬥系統與劇情——那多好。所以，作為讀者的你，應當可以想像出，當得知有機會翻譯一本關於遊戲編程的書籍之時，我該有多興奮。
這本書名為《HTML5遊戲開發進階指南》，顧名思義，講的是如何開發HTML5遊戲。HTML誕生之初僅僅是用來結構化文檔信息，並創建可在瀏覽器上顯示的網頁。事實上，最初版本的HTML連圖片都無法顯示，頁面僅由標題、文欄位落和指向其他頁面的連結組成。隨著網際網路的發展，HTML逐漸變成了今天的樣子。我們在花花綠綠的網頁上瀏覽新聞、觀看視頻、聽音樂、購物、更新Facebook狀態、與同事聊天，甚至玩遊戲——今天的HTML，早已不是一頁A4紙，而是能夠與用戶深度互動的平台。
HTML5是最新的HTML標準，其諸多新特性中，最令人期待的一點莫過於新的標籤。開發者可以在中幾乎不受限制地繪圖，就像在Windows下使用GDI函式一樣；在部分瀏覽器中，開發者甚至可以在中繪製三維場景，就像使用openGL一樣。結合requestAnimationFrame或setTimeInterval，這個標籤簡直就是為遊戲設計的。這本書主要介紹的就是如何使用標籤進行遊戲開發。
本書手把手地帶領讀者實現了兩款HTML5遊戲：前4章實現了一個類似於《憤怒地小鳥》的遊戲。後8章實現了一款簡化版的《紅色警戒》遊戲。再簡單的邏輯從零開始實現，都不是一件容易的事情，對於這兩款遊戲，雖然看上去簡單，但絕不是隨隨便便就能夠寫出來的。事實上，原作者力求這兩款遊戲臻於完善，並在書中詳盡地闡述了遊戲的細節：比如作者在繪製第一款遊戲中的彈弓和橡膠帶時，為了使橡膠帶看上去很自然，而將彈弓分為兩部分；又如，作者在第二款遊戲中，為了防止車輛在地圖上移動時發生“阻塞”而進行的努力。
對於熟悉前端開發，又想在前端有所作為的開發者，這是一本不可多得的好書。書中模組化的JavaScript代碼，以及將瑣碎的功能模組拼裝成整體的方式，值得學習；本書介紹了很多遊戲編程常用的技巧，如使用子畫面頁以最佳化性能，使用視差滾動以產生3D效果等。另外，還介紹了一些開源的遊戲算法實現，如JavaScript版本的Box2D物理引擎、A*路徑規划算法等。最後涉及使用Node.js構建多人戰役的方法，如果你對伺服器端的JavaScript感興趣，你也應該來讀一讀這本書。
總之，在讀完本書之後，相信你一定知道如何著手去開發一款HTML5遊戲。
