HTML5遊戲開發進階指南（亞馬遜5星暢銷書，教你用HTML5和JavaScript構建遊戲！）

HTML5遊戲開發進階指南（亞馬遜5星暢銷書，教你用HTML5和JavaScript構建遊戲！）

【印】香卡（Shankar,A.R.）著

謝光磊譯

ISBN 978-7-121-21226-0

2013年9月出版

定價：79.00元

412頁

16開

編輯推薦

在一名專業的遊戲開發者指導下，你將開發出兩款完整的HTML5遊戲：一款與《憤怒的小鳥》類似，基於Box2d物理引擎的策略益智類遊戲和一個包括單位、建築、路徑導航、人工智慧、多玩家對戰模式的即時戰略（RTS）遊戲。開發遊戲的過程中，你將學到以下知識：

•        在遊戲中引入Box2d物理引擎以模擬現實的物理環境。
•        設計遊戲場景、遊戲角色，並允許玩家與之互動。
•        使用子畫面頁（精靈圖）、平移、視差滾動和音效製作更精緻的遊戲。
•        引入路徑規劃和導航演算法來使單位智慧地移動。
•        使用決策樹、有限狀態機和指令碼事件來建立更聰明的敵人和更具挑戰性的關卡。
•        使用Node.js和WebSocket API為遊戲新增多人戰鬥模式。

閱讀本書，你的HTML5/JavaScript程式設計水平將大進一步。你學到的知識和技術，將幫助你開發出更復雜、更精緻的HTML5遊戲，幫助你成為專業級的HTML5遊戲開發者。

內容提要

本書介紹了HTML5遊戲開發的一般過程和技巧。全書共分12 章，第1章介紹了本書相關的HTML5的諸多新特性，包括在canvas上繪圖、播放聲音等，另外還引入了子畫面頁的概念；第2~4 章利用Box2D物理引擎開發了一款非常類似於《憤怒的小鳥》的遊戲，全面介紹了物理引擎的概念，以及在遊戲中使用物理引擎的方法，這一部分還引入了視差滾動技巧，以實現某種偽3D效果；第5~10 章開發了一款簡化版的《紅色警戒》遊戲，這一部分涉及了相當多的內容，包括地圖的製作，建築與單位的設定、繪製，玩家與單位的互動，觸發器與劇情的編寫，路徑規劃演算法等；第11、12章利用nodeJS 和WebSocket開發了《紅色警戒》遊戲的多人對戰模式，這一部分的主要問題是保持遊戲在多個玩家的瀏覽器中的狀態一致。

對於熟悉前端開發，想用前端技術做一些更酷的事情，卻又不知如何下手的人，這是一本可多得的好書。

目錄

第1章 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

精彩節摘

譯者序

香港迴歸那一年的某一天，我第一次在同學家的電腦上觀摩了他玩《紅色警戒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遊戲。

 

謝光磊

作者簡介

Aditya Ravi Shankar是在1993年第一次接觸計算機之後開始學習程式設計的。當時還沒有網際網路和線上教程，他在當地圖書館找到一本程式設計書籍，並透過艱苦地重寫書中的程式碼，編寫了他的第一個GW-BASIC遊戲。

2001年，他從印度理工學院畢業之後，做了近10年的軟體顧問，為投資銀行和大型企業開發交易與分析系統。最後，他離開了這個行業，這樣他可以專注於從事自己所熱愛的遊戲開發。

從此，作為一個自信的極客，他使用各種新的語言和技術來進行自己的專案和實驗，包括HTML5。在這期間，他獨立在HTML5平臺上重建了著名的命令與征服RTS遊戲，他也因此而著名。

除了程式設計，Aditya還喜歡桌球、薩爾薩舞，以及學習發揮潛意識。他在其個人站點（）中有一些關於遊戲程式設計、個人發展和桌球的文章。

當他不忙於寫作，或者不用專注於自己的專案時，他也會做一些諮詢工作，以幫助企業來使用新的軟體產品。

 

譯者簡介

謝光磊，中科院某所碩士研究生在讀。熱愛生活，熱愛Web前端開發，熱愛WebGL技術。理想是成為一流的遊戲設計師。個人站點:。

 

技術稽核者簡介

Shane Hudson是一位自由的Web站點開發者，專注於最前沿的Web技術和Web標準。他曾經參與過大量互動式Web站點的工作並輔助專案的開發，具有豐富的使用JavaScript的經驗。他對人工智慧和計算機視覺具有濃厚的興趣，他的E-mail地址是shane@shanehudson.net。

Shane說：“Shankar撰寫的這本書正是業界所需要的：關於如何有效並熟練地編寫JavaScript（和Node.js）。這本書教你如何編寫遊戲，但它並不僅僅是一本關於遊戲開發的書，還是一本教你如何編寫高質量JavaScript程式碼的書。”

 

Josh Robinson是一位專注於前沿技術的程式設計專家和自由開發者。他對程式設計的熱愛最初來自一臺二手的Commodore 64計算機螢幕上的藍色熒光，後來他選擇現代Web開發作為自己的職業。2006年，他供職於一家網路電話供應商之時，發現了Ruby和Ruby on Rails的優雅之處，並開發了若干個gem，其中包括流行的countries gem。你可以透過JoshRobinson.com或者Twitter:@JoshRobinson聯絡到他。

Josh Robinson說：“有了這本書，你就能像一個Boss一樣寫程式碼了。”

 

Syd Lawrence經營並管理著We MakeAwesome Sh，他是Twilio的開發者和傳播者。他獲得過很多讚譽。Geek.com曾經將他形容為現代的超級英雄，而TheNext Web曾經說他是社交網路的領袖。

前言

歡迎閱讀這本書。

我多麼希望在我自己開始學習遊戲開發的時候，能有這樣一本書。現在，我就寫了這本書。

與那些充斥著你永遠用不到的抽象例程的書不同，這本書將向你提供第一手的關於HTML5如何被用來建立完整的可玩的遊戲的資料。

我精心挑選了一款物理引擎遊戲和一款即時戰略遊戲作為例子，這是因為，這兩種型別的遊戲中幾乎包含了需要用來構建當下流行的各種型別遊戲的所有的元素。

如果你完整地閱讀本書，你將學到所有用來建立HTML5遊戲的關鍵元素，並瞭解如何將這些元素組合在一起來實現看上去很專業的遊戲。

如果你讀完了本書，我希望你能夠擁有自信，也擁有資源去開始創作你自己的令人驚歎的HTML5遊戲。

本書讀者

本書面向的讀者將是那些已經有一些HTML和JavaScript開發經驗，並且想要學習如何開發令人驚歎的HTML5遊戲，卻不知從哪裡入手的人。

那些已經有一些其他語言（比如Flash）的遊戲開發經驗，並想嘗試HTML5的讀者也會從本書中找到很多有價值的資訊。

如果你對自己的遊戲開發技能還沒什麼自信，也不用著急。這本書包含了用來構建遊戲的所有關鍵元素，便於你跟隨本書的章節來逐步學習如何設計大型、專業的HTML5遊戲。如果你不能跟上，這本書也會告訴你到哪裡能夠找到補習的資料。

本書對HTML5基礎、Box2D引擎、路徑規劃和導航、戰鬥系統和敵人AI，以及使用Node.js和WebSockets的多人對戰模式，都用獨立的章節進行介紹。所以，無論你編寫程式的水平如何，都能從本書中有所收穫。

本書結構

本書將利用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章將利用同步網路模型實現多人對戰操作的框架，並在維持同步性的同時對網路延遲進行補償。

下載原始碼

本書涉及的原始碼可以在Apreess的Web站點（）上下載。你可以在站點標題下方的SourceCode/Downloads選項卡中找到本書資訊頁面的連結。

聯絡作者

如果你有任何問題或反饋，可以透過作者個人站點中本書的專頁 com/pro-html5-games/與他聯絡。你也可以透過E-mail：prohtml5games@adityaravishankar.com聯絡他。