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标準，其諸多新特性中，最令人期待的一點莫過于新的标簽<canvas>。開發者可以在<canvas>中幾乎不受限制地繪圖，就像在Windows下使用GDI函數一樣；在部分浏覽器中，開發者甚至可以在<canvas>中繪制三維場景，就像使用openGL一樣。結合requestAnimationFrame或setTimeInterval，這個标簽簡直就是為遊戲設計的。這本書主要介紹的就是如何使用<canvas>标簽進行遊戲開發。

本書手把手地帶領讀者實作了兩款HTML5遊戲：前4章實作了一個類似于《憤怒地小鳥》的遊戲。後8章實作了一款簡化版的《紅色警戒》遊戲。再簡單的邏輯從零開始實作，都不是一件容易的事情，對于這兩款遊戲，雖然看上去簡單，但絕不是随随便便就能夠寫出來的。事實上，原作者力求這兩款遊戲臻于完善，并在書中詳盡地闡述了遊戲的細節：比如作者在繪制第一款遊戲中的彈弓和橡膠帶時，為了使橡膠帶看上去很自然，而将彈弓分為兩部分；又如，作者在第二款遊戲中，為了防止車輛在地圖上移動時發生“阻塞”而進行的努力。

對于熟悉前端開發，又想在前端有所作為的開發者，這是一本不可多得的好書。書中子產品化的JavaScript代碼，以及将瑣碎的功能子產品拼裝成整體的方式，值得學習；本書介紹了很多遊戲程式設計常用的技巧，如使用子畫面頁以優化性能，使用視差滾動以産生3D效果等。另外，還介紹了一些開源的遊戲算法實作，如JavaScript版本的Box2D實體引擎、A*路徑規劃算法等。最後涉及使用Node.js建構多人戰役的方法，如果你對伺服器端的JavaScript感興趣，你也應該來讀一讀這本書。

總之，在讀完本書之後，相信你一定知道如何着手去開發一款HTML5遊戲。

謝光磊

作者簡介

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

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

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

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

當他不忙于寫作，或者不用專注于自己的項目時，他也會做一些咨詢工作，以幫助企業來使用新的軟體産品。

譯者簡介

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

技術稽核者簡介

Shane Hudson是一位自由的Web站點開發者，專注于最前沿的Web技術和Web标準。他曾經參與過大量互動式Web站點的工作并輔助項目的開發，具有豐富的使用JavaScript的經驗。他對人工智能和計算機視覺具有濃厚的興趣，他的E-mail位址是[email protected]。

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站點（www.apreess.com）上下載下傳。你可以在站點标題下方的SourceCode/Downloads頁籤中找到本書資訊頁面的連結。

聯系作者

如果你有任何問題或回報，可以通過作者個人站點中本書的專頁www.adityaravishankar. com/pro-html5-games/與他聯系。你也可以通過E-mail：[email protected]聯系他。