HTML5 移動遊戲開發高級編程

《HTML5 移動遊戲開發高級編程》是2014年清華大學出版社出版的圖書。

基本介紹

• 書名：HTML5 移動遊戲開發高級編程
• ISBN：9787302356318
• 定價：68元
• 出版社：清華大學出版社
• 出版時間：2014-4-16
• 裝幀：平裝

圖書簡介

HTML5移動遊戲開發高級編程 將助你實現夢想。這本精品書籍面向有興趣為所有移動和觸控螢幕設備創建遊戲的開發人員，以你現有的HTML5和JavaScript知識為基礎，分步講解如何使用HTML5構建單玩家和多玩家移動遊戲。本書涵蓋構建HTML5遊戲的標準模式、構建方法的選擇(CSS3、SVG或畫布)以及流行的遊戲引擎和框架等主題。

目錄

第Ⅰ部分HTML5潛力初探

第1章先飛後走，先難後易 3

1.1引言 3

1.2用500行代碼構建一個完整遊戲 4

1.2.1了解遊戲 4

1.2.2結構化遊戲 4

1.2.3最終實現的遊戲 5

1.3添加HTML和CSS樣板代碼 5

1.4畫布入門 6

1.4.1訪問上下文 7

1.4.2在畫布上繪製 7

1.4.3繪製圖像 8

1.5創建遊戲的結構 10

1.5.1構建面向對象的JavaScript 10

1.5.2利用鴨子類型 11

1.5.3創建三個基本對象 11

1.6載入精靈表 11

1.7創建Game對象 13

1.7.1實現Game對象 13

1.7.2重構遊戲代碼 16

1.8添加滾動背景 16

1.9插入標題畫面 20

1.10添加主角 22

1.10.1創建PlayerShip對象 22

1.10.2處理用戶輸入 23

1.11小結 24

第2章從玩具到遊戲 25

2.1引言 25

2.2創建GameBoard對象 25

2.2.1了解GameBoard對象 26

2.2.2添加和刪除對象 26

2.2.3遍歷對象列表 27

2.2.4定義面板的方法 29

2.2.5處理碰撞 29

2.2.6將GameBoard添加到

遊戲中 30

2.3發射飛彈 31

2.3.1添加炮彈精靈 31

2.3.2連線飛彈和玩家 32

2.4添加敵方飛船 33

2.4.1計算敵方飛船的移動 33

2.4.2構造Enemy對象 34

2.4.3移動和繪製Enemy對象 35

2.4.4將敵方飛船添加到面板上 36

2.5重構精靈類 37

2.5.1創建一個通用的Sprite類 38

2.5.2重構PlayShip 38

2.5.3重構PlayerMissile 39

2.5.4重構Enemy 40

2.6處理碰撞 40

2.6.1添加對象類型 41

2.6.2讓飛彈和敵方飛船碰撞 41

2.6.3讓敵方飛船和玩家碰撞 42

2.6.4製造爆炸 43

2.7描述關卡 44

2.7.1設定敵方飛船 44

2.7.2設定關卡數據 45

2.7.3載入和結束一關遊戲 46

2.7.4實現Level對象 47

2.8小結 49

第3章試飛結束，向移動進發 51

3.1引言 51

3.2添加觸摸控制項 51

3.2.1繪製控制項 52

3.2.2回響觸摸事件 54

3.2.3在移動設備上測試 56

3.3最大化遊戲界面 57

3.3.1設定視口 57

3.3.2調整畫布尺寸 58

3.3.3添加到iOS主螢幕 60

3.4添加得分 61

3.5使之成為公平的戰鬥 62

3.6小結 65

第Ⅱ部分移動HTML5

第4章移動設備上的HTML5 69

4.1引言 69

4.2HTML5的發展簡史 70

4.2.1了解HTML5“不同尋常”的成長曆程 70

4.2.2期待HTML6？HTML7？不，僅HTML5足矣 70

4.2.3關於規範 71

4.2.4區分HTML5家族和HTML5 71

4.3恰當地使用HTML5 72

4.3.1嘗試HTML5 72

4.3.2嗅探瀏覽器 72

4.3.3確定功能而非瀏覽器 74

4.3.4漸進增強 75

4.3.5彌補差距的膩子腳本 76

4.4從遊戲角度考慮HTML5 76

4.4.1畫布 77

4.4.2CSS3/DOM 77

4.4.3SVG 78

4.5從移動角度考慮HTML5 79

4.5.1了解一些新的API 79

4.5.2即將登場的WebAPI 80

4.6調查移動瀏覽器的前景 80

4.6.1WebKit：市場霸主 80

4.6.2Opera：依然在埋頭苦幹 81

4.6.3Firefox：Mozilla的移動產品 81

4.6.4WP7上的Internet

Explorer9 81

4.6.5平板電腦 81

4.7小結 82

第5章了解一些有用的庫 83

5.1引言 83

5.2了解JavaScript庫 84

5.3從jQuery談起 84

5.3.1將jQuery添加到頁面 84

5.3.2了解$操作符 85

5.3.3操縱DOM 86

5.3.4創建回調 87

5.3.5綁定事件 89

5.3.6發起Ajax調用 92

5.3.7調用遠程伺服器 92

5.3.8使用Deferred 93

5.4使用Underscore.js 94

5.4.1訪問Underscore 94

5.4.2使用集合 94

5.4.3使用實用函式 95

5.4.4鏈式調用Underscore方法 96

5.5小結 96

第6章成為一個良好的移動市民 97

6.1引言 97

6.2回響設備的能力 97

6.2.1最大化實際使用面積 98

6.2.2調整出合適的畫布尺寸 98

6.3處理瀏覽器的尺寸調整、滾動和縮放 100

6.3.1處理尺寸調整 100

6.3.2防止滾動和縮放 101

6.3.3設定視口 102

6.3.4去除地址欄 103

6.4配置iOS主螢幕套用 105

6.4.1把遊戲變成Web套用可行的 105

6.4.2添加啟動畫面 105

6.4.3配置主螢幕圖示 106

6.5考慮移動設備的性能 107

6.6適應有限的頻寬和存儲 108

6.6.1為移動設備最佳化 108

6.6.2移動設備好則一切皆好 108

6.6.3縮減JavaScript 109

6.6.4設定正確的頭域內容 109

6.6.5經由CDN提供 110

6.7藉助套用快取的完全離線運行 111

6.7.1創建代碼清單檔案 111

6.7.2檢查瀏覽器是否線上 113

6.7.3監聽更高級的行為 113

6.7.4最後的警告 113

6.8小結 114

第Ⅲ部分JavaScript遊戲開發基礎

第7章了解HTML5遊戲開發環境 117

7.1引言 117

7.2選擇編輯器 118

7.3探討Chrome開發者工具 118

7.3.1激活開發者工具 118

7.3.2審查元素 118

7.3.3查看頁面資源 120

7.3.4跟蹤網路傳輸 121

7.4調試JavaScript 123

7.4.1查看Console選項卡 123

7.4.2運用Script選項卡 125

7.5分析和最佳化代碼 127

7.5.1運行性能分析 127

7.5.2真正進行遊戲最佳化 129

7.6在移動設備上調試 131

7.7小結 132

第8章在命令行上運行JavaScript 133

8.1引言 133

8.2了解Node.js 134

8.3安裝Node 134

8.3.1在Windows上安裝Node 135

8.3.2在OSX上安裝Node 135

8.3.3在Linux上安裝Node 135

8.3.4追蹤最新版的Node 136

8.4安裝和使用Node模組 136

8.4.1安裝模組 136

8.4.2診斷代碼 136

8.4.3縮減代碼 137

8.5創建自己的腳本 137

8.5.1創建package.json檔案 138

8.5.2使用伺服器端畫布 139

8.5.3創建可重用的腳本 140

8.6編寫一個精靈地圖生成器 141

8.6.1使用Futures模組 142

8.6.2自上而下進行編碼 143

8.6.3載入圖像 144

8.6.4計算畫布的尺寸 146

8.6.5在伺服器端畫布上繪製圖像 147

8.6.6更新和運行腳本 148

8.7小結 149

第9章自建Quintus引擎(1) 151

9.1引言 151

9.2創建可重用HTML5引擎的框架 152

9.2.1設計基本的引擎API 152

9.2.2著手編寫引擎代碼 153

9.3添加遊戲循環 155

9.3.1構建更好的遊戲循環

定時器 155

9.3.2將已最佳化的遊戲循環添加

到Quintus 156

9.3.3測試遊戲循環 158

9.4添加繼承 159

9.4.1在遊戲引擎中使用繼承 159

9.4.2將傳統繼承添加至JavaScript 160

9.4.3運用Class的功能 163

9.5支持事件 164

9.5.1設計事件API 164

9.5.2編寫Evented類 165

9.5.3填寫Evented方法 165

9.6支持組件 168

9.6.1設計組件API 168

9.6.2實現組件系統 169

9.7小結 172

第10章自建Quintus引擎(2) 173

10.1引言 173

10.2訪問遊戲容器元素 173

10.3捕捉用戶輸入 176

10.3.1創建輸入子系統 176

10.3.2自建輸入模組 177

10.3.3處理鍵盤事件 179

10.3.4添加小鍵盤控制項 180

10.3.5添加遊戲手柄控制項 183

10.3.6繪製螢幕輸入 186

10.3.7完善和測試輸入 188

10.4載入資產 190

10.4.1定義資產類型 191

10.4.2載入特定資產 192

10.4.3完善載入器 194

10.4.4添加預載入支持 197

10.5小結 198

第11章自建Quintus引擎(3) 199

11.1引言 199

11.2定義精靈表 200

11.2.1創建SpriteSheet類 200

11.2.2跟蹤和載入精靈表 201

11.2.3測試SpriteSheet類 202

11.3添加精靈 203

11.3.1編寫Sprite類 203

11.3.2引用精靈、屬性和資產 205

11.3.3運用Sprite對象 205

11.4使用場景設定舞台 209

11.4.1創建Quintus.Scenes模組 210

11.4.2編寫Stage類 210

11.4.3豐富場景功能 214

11.5完成Blockbreak遊戲的編寫 217

11.6小結 219

第Ⅳ部分使用CSS3和SVG構建遊戲

第12章使用CSS3構建遊戲 223

12.1引言 223

12.2選定場景圖 223

12.2.1目標客群 224

12.2.2互動方法 224

12.2.3性能需求 224

12.3實現DOM支持 225

12.3.1考慮DOM的特性 225

12.3.2自建Quintus的DOM模組 225

12.3.3創建一致的移動方法 226

12.3.4創建一致的過渡方法 229

12.3.5實現DOM精靈類 230

12.3.6創建DOM舞台類 232

12.3.7替換畫布的等價類 234

12.3.8測試DOM功能 234

12.4小結 235

第13章製作一個CSS3RPG遊戲 237

13.1引言 237

13.2創建滾動的區塊地圖 237

13.2.1了解性能問題 238

13.2.2實現DOM區塊地圖類 238

13.3構建RPG遊戲 242

13.3.1創建HTML檔案 242

13.3.2設定遊戲 243

13.3.3添加區塊地圖 245

13.3.4創建一些有用的組件 247

13.3.5添加玩家 250

13.3.6添加迷霧、敵人和

戰利品 251

13.3.7使用精靈擴展區塊地圖 255

13.3.8添加血槽和HUD 258

13.4小結 262

第14章使用SVG和物理引擎

構建遊戲 263

14.1引言 263

14.2了解一些SVG基礎知識 264

14.2.1在頁面上顯示SVG 264

14.2.2了解基本的SVG元素 265

14.2.3變形SVG元素 269

14.2.4套用筆畫和填充 270

14.2.5超越基礎 272

14.3通過JavaScript使用SVG 273

14.3.1創建SVG元素 273

14.3.2設定和讀取SVG特性 274

14.4將SVG支持添加到

Quintus 275

14.4.1創建SVG模組 275

14.4.2添加SVG精靈 276

14.4.3創建SVG舞台類 278

14.4.4測試SVG類 280

14.5使用Box2D添加物理支持 283

14.5.1了解物理引擎 283

14.5.2實現world組件 284

14.5.3實現physics組件 287

14.5.4將物理支持添加到

例子中 290

14.6創建一個大炮射擊遊戲 292

14.6.1設計遊戲 292

14.6.2構建所需的精靈 292

14.6.3收集用戶輸入並完成遊戲編寫 295

14.7小結 296

第Ⅴ部分HTML5畫布

第15章了解HTML5的傑出畫布 301

15.1引言 301

15.2畫布標籤入門 302

15.2.1了解CSS和像素尺寸 302

15.2.2提取渲染上下文 305

15.2.3通過畫布創建圖像 305

15.3在畫布上進行繪製 307

15.3.1設定填充和筆畫樣式 307

15.3.2設定筆畫細節 309

15.3.3調整不透明度 310

15.3.4繪製矩形 310

15.3.5繪製圖像 311

15.3.6繪製路徑 311

15.3.7在畫布上渲染文本 313

15.4使用畫布變形矩陣 314

15.4.1了解基本的變形 315

15.4.2保存、恢復和重置變形矩陣 316

15.4.3繪製雪花 316

15.5套用畫布效果 319

15.5.1添加陰影 319

15.5.2使用合成效果 319

15.6小結 321

第16章實現動畫 323

16.1引言 323

16.2構建動畫地圖 323

16.2.1確定動畫API 324

16.2.2編寫動畫模組 325

16.2.3測試動畫 329

16.3添加畫布視口 331

16.4實現視差效果 334

16.5小結 336

第17章運用像素 337

17.1引言 337

17.2回顧2D物理學 338

17.2.1了解力、質量和加速度 338

17.2.2為炮彈建模 339

17.2.3換成疊代解 340

17.2.4抽取可重用類 341

17.3實現Lander遊戲 342

17.3.1自建遊戲 342

17.3.2構建飛船 343

17.3.3精確到像素級 345

17.3.4運用ImageData對象 346

17.3.5製造爆炸 350

17.4小結 354

第18章創建一個2D平台動作遊戲 355

18.1引言 355

18.2創建區塊層 356

18.2.1編寫TileLayer類 356

18.2.2試用TileLayer代碼 358

18.2.3最佳化繪製 360

18.3處理平台動作遊戲的碰撞 361

18.3.1添加2d組件 362

18.3.2計算平台動作遊戲的碰撞 364

18.3.3使用PlatformStage拼接 366

18.4構建遊戲 368

18.4.1自建遊戲 368

18.4.2創建敵人 369

18.4.3添加子彈 371

18.4.4創建玩家 372

18.5小結 375

第19章構建一個畫布編輯器 377

19.1引言 377

19.2使用Node.js提供遊戲服務 377

19.2.1創建package.json檔案 378

19.2.2設定Node以提供靜態資產 378

19.3創建編輯器 379

19.3.1修改平台動作遊戲代碼 380

19.3.2創建編輯器模組 382

19.3.3添加觸摸和滑鼠事件 385

19.3.4選擇區塊 387

19.4添加關卡保存支持 389

19.5小結 390

第Ⅵ部分多人遊戲

第20章構建線上社交遊戲 393

20.1引言 393

20.2了解基於HTTP的多玩家

遊戲 394

20.3設計一個簡單的社交遊戲 394

20.4集成Facebook 395

20.4.1生成Facebook套用 395

20.4.2創建Node.js伺服器 396

20.4.3添加登錄視圖 399

20.4.4測試Facebook身份驗證 401

20.5連線資料庫 402

20.5.1在Windows上安裝MongoDB 402

20.5.2在OSX上安裝MongoDB 403

20.5.3在Linux上安裝MongoDB 403

20.5.4通過命令行連線MongoDB 403

20.5.5將MongoDB集成到遊戲 405

20.6完成BlobClicker的編寫 407

20.7推送至託管服務 410

20.8小結 412

第21章實現實時互動 413

21.1引言 413

21.2了解WebSocket 413

21.3在瀏覽器中使用原生

WebSocket 415

21.4使用Socket.io：支持回退的WebSocket 417

21.4.1創建塗鴉套用的

伺服器端 417

21.4.2添加塗鴉套用的客戶端 419

21.5用Socket.io構建一個多人桌球遊戲 421

21.5.1處理延時 422

21.5.2防止作弊 422

21.5.3部署實時套用 422

21.5.4創建自動匹配的

伺服器端 423

21.5.5構建桌球遊戲的前端 426

21.6小結 431

第22章構建非傳統風格的遊戲 433

22.1引言 433

22.2創建一個Twitter套用 433

22.3將Node套用連線至Twitter 435

22.3.1傳送第一條推文 435

22.3.2監聽用戶的信息流 436

22.4隨機生成單詞 437

22.5創建Twitter上的Hangman遊戲 438

22.6小結 443

第Ⅶ部分移動增強

第23章通過地理位置定位 447

23.1引言 447

23.2地理定位入門 447

23.3一次性獲取位置 448

23.4在地圖上標出位置 450

23.5監視位置隨時間的變化 451

23.6繪製互動式地圖 452

23.7計算兩點間的距離 454

23.8小結 454

第24章查詢設備的方向和加速 455

24.1引言 455

24.2考查設備的方向 455

24.3設備方向事件入門 456

24.3.1檢測和使用事件 457

24.3.2了解事件數據 457

24.4試用設備方向 458

24.4.1創建一個玩球的場所 458

24.4.2添加方向控制 460

24.4.3處理瀏覽器的旋轉 461

24.5小結 462

第25章播放音效：移動設備的罩門 463

25.1引言 463

25.2使用audio標籤 463

25.2.1把audio標籤用於簡單

播放 464

25.2.2處理不同的受支持格式 464

25.2.3了解移動設備音頻的局限性 465

25.3構建一個簡單的桌面音效引擎 465

25.3.1將audio標籤用於遊戲音效 466

25.3.2添加一個簡單的音效系統 466

25.3.3將音效添加到BlockBreak

遊戲 468

25.4構建一個移動音效系統 469

25.4.1使用音效精靈 469

25.4.2生成精靈檔案 472

25.4.3將音效精靈添加到遊戲 473

25.5展望HTML5音頻的未來 474

25.6小結 474

第Ⅷ部分遊戲引擎和套用商店

第26章使用HTML5遊戲引擎 477

26.1引言 477

26.2回顧HTML5引擎的歷史 477

26.2.1使用商用引擎 478

26.2.2Impact.js 479

26.2.3Spaceport.io 480

26.2.4IDE引擎 480

26.3使用開源引擎 481

26.3.1Crafty.js 481

26.3.2LimeJS 482

26.3.3EaselJS 484

26.4小結 487

第27章瞄準套用商店 489

27.1引言 489

27.2為Google的ChromeWeb

Store打包套用 490

27.2.1創建託管套用 490

27.2.2創建打包套用 492

27.2.3發布套用 492

27.3使用CocoonJS加速套用 493

27.3.1準備把遊戲載入

CocoonJS 493

27.3.2在Android上測試

CocoonJS 495

27.3.3構建雲端套用 495

27.4使用AppMobi的XDK和

DirectCanvas構建套用 496

27.4.1了解DirectCanvas 496

27.4.2安裝XDK 496

27.4.3創建套用 497

27.4.4修改AlienInvasion以

使用DirectCanvas 497

27.4.5在設備上測試套用 502

27.5小結 502

第28章挖掘下一個熱點 503

28.1引言 503

28.2使用WebGL實現3D 503

28.3使用WebAudioAPI獲得

更好的聲音訪問 504

28.4使用全螢幕API擴大遊戲

畫面 505

28.5使用螢幕方向API鎖定設備

螢幕 505

28.6使用WebBTC添加實時

通信 505

28.7追蹤其他即將出現的本地化

功能 506

28.8小結 506

附錄A資源 507