利用HTML5,CSS3和WebGL開發HTML5遊戲

《利用HTML5,CSS3和WebGL開發HTML5遊戲》是2014年3月1日電子工業出版社出版的圖書，作者是雅各布·賽得林（JacobSeidelin）。

基本介紹

• 中文名：利用HTML5,CSS3和WebGL開發HTML5遊戲
• 作者：雅各布·賽得林（JacobSeidelin）
• 出版社：電子工業出版社
• 出版時間：2014年
• 頁數：360 頁
• 定價：69 元
• 開本：16 開 
• ISBN：9787121224232

內容簡介

本書利用最新的開放式網頁技術，結合JavaScript，CSS3和WebGL技術，使用WebSockets、Canvas、HTML5音頻、Web Storage及WebSockets等功能，從零開始創建一個遊戲，並搭建一個框架，從而完成整個3D遊戲的開發、設定及發布，生動展現可以流暢運行於各種移動終端及瀏覽器的HTML5遊戲的開發過程。

圖書目錄

目 錄

第一部分 HTML5遊戲入門指導

第1章 網頁上的遊戲2

1．1 追溯HTML5的歷史2

1．2 在遊戲中使用HTML53

1．2．1 canvas（畫布）3

1．2．2 audio（聲音）4

1．2．3 WebSocket（網路接口）5

1．2．4 Web Storage（網路存儲）6

1．2．5 WebGL（網路圖形語言）7

1．2．6 HTML5（不）是Flash殺手7

1．3 實現向下兼容性7

1．3．1 特徵檢測7

1．3．2 使用Modernizr檢測庫8

1．3．3 用polyfill填充缺口9

1．4 創建一個遊戲10

1．5 總結10

第2章 邁出第一步11

2．1 理解遊戲11

2．1．1 交換寶石12

2．1．2 配成3個12

2．1．3 等級進階12

2．2 識別遊戲階段12

2．2．1 啟動界面12

2．2．2 主界面13

2．2．3 遊戲畫面13

2．2．4 最高分13

2．3 創建程式架構14

2．3．1 建立HTML15

2．3．2 添加各種風格16

2．3．3 載入腳本17

2．4 創建啟動畫面21

2．4．1 使用網路字型21

2．4．2 裝飾啟動畫面22

2．5 總結24

第3章 移植到手機25

3．1 開發移動網頁應用程式25

3．1．1 一次寫，多次讀26

3．1．2 移動平台的挑戰26

3．2 處理用戶在移動設備里的輸入26

3．2．1 鍵盤輸入27

3．2．2 滑鼠VS．觸摸27

3．3 適配小螢幕解析度28

3．3．1 創建可調整的布局29

3．3．2 控制視口31

3．3．3 禁止縮放功能31

3．4 創建不同的視圖32

3．4．1 創建主選單32

3．4．2 添加螢幕模組34

3．4．3 使用CSS媒體查詢37

3．4．4 檢測設備的旋轉38

3．4．5 添加一個移動樣式表39

3．5 在iOS和Android設備上開發42

3．5．1 將網頁應用程式發布於主界面上42

3．5．2 清除瀏覽器的障礙49

3．6 調試移動網頁應用程式52

3．6．1 啟用Safari調試器52

3．6．2 訪問Android日誌54

3．7 總結54

第二部分 創建一個簡單遊戲

第4章 建立遊戲56

4．1 建立遊戲面板模組56

4．1．1 初始化遊戲狀態57

4．1．2 填充初始面板60

4．2 生成規則62

4．2．1 驗證交換62

4．2．2 檢測鏈65

4．2．3 重新填充面板69

4．2．4 交換寶石72

4．3 總結74

第5章 將任務委託給Web Workers75

5．1 使用Web Workers75

5．1．1 工作執行緒的使用限制76

5．1．2 工作執行緒能做什麼77

5．2 使用工作執行緒78

5．2．1 傳送訊息78

5．2．2 接收訊息79

5．2．3 捕獲錯誤79

5．2．4 共享工作執行緒79

5．2．5 一個素數檢測的例子81

5．3 在遊戲中使用Web Workers84

5．3．1 創建工作執行緒模組84

5．3．2 保持相同的接口86

5．4 總結91

第6章 在畫布（canvas）里創建圖形92

6．1 canvas與其他方法比較92

6．1．1 點陣圖圖像92

6．1．2 SVG圖像93

6．1．3 畫布canvas93

6．1．4 何時選擇canvas94

6．2 使用canvas繪製94

6．2．1 繪製形狀和路徑95

6．2．2 使用高級畫筆與填充樣式103

6．2．3 使用變換107

6．2．4 添加文本、圖像和陰影108

6．2．5 管理狀態棧112

6．2．6 繪製HTML5徽標113

6．2．7 圖像合成119

6．3 訪問圖像數據120

6．3．1 獲取像素值120

6．3．2 更新像素值121

6．3．3 導出圖像檔案數據122

6．3．4 理解安全限制123

6．3．5 創建基於像素的效果123

6．4 總結125

第7章 創建遊戲界面126

7．1 預載入遊戲檔案126

7．1．1 檢測寶石大小127

7．1．2 修改載入器腳本128

7．1．3 添加一個進度條132

7．2 改進背景135

7．3 創建遊戲界面137

7．3．1 使用canvas繪製面板139

7．3．2 使用CSS和圖片繪製面板145

7．4 總結151

第8章 遊戲互動152

8．1 獲取用戶輸入152

8．1．1 在觸控螢幕上實現滑鼠功能152

8．1．2 虛擬鍵盤153

8．1．3 觸摸操作154

8．1．4 輸入操作和canvas159

8．2 創建輸入模組161

8．2．1 執行遊戲操作165

8．2．2 捆綁輸入與遊戲函式170

8．3 總結177

第9章 繪製遊戲動畫178

9．1 讓遊戲動起來178

9．1．1 動畫計時179

9．1．2 繪製游標183

9．1．3 繪製遊戲動畫185

9．2 添加分數和事件193

9．2．1 創建UI元素194

9．2．2 創建遊戲計時器197

9．2．3 獎勵分數199

9．2．4 遊戲結束207

9．3 總結210

第三部分 添加3D與聲音

第10章 為遊戲創建音頻212

10．1 HTML5音頻212

10．1．1 檢測音頻支持213

10．1．2 理解音頻格式之爭213

10．1．3 尋找音效215

10．2 使用audio元素216

10．2．1 播放控制218

10．2．2 在移動設備上使用音頻222

10．3 使用音頻數據222

10．3．1 使用Mozilla音頻數據接口223

10．3．2 一些例子225

10．4 建立音頻模組229

10．4．1 為音效回播做準備230

10．4．2 播放聲音效果231

10．4．3 停止播放233

10．4．4 清除聲音233

10．5 為遊戲添加聲音效果235

10．5．1 在遊戲界面里播放音頻235

10．6 總結236

第11章 使用WebGL創建3D圖形237

11．1 網頁上的3D237

11．1．1 開始使用WebGL238

11．1．2 調試WebGL239

11．1．3 創建一個輔助模組239

11．2 著色器240

11．2．1 變數和數據類型240

11．2．2 通過WebGL使用著色引擎244

11．2．3 統一變數249

11．2．4 變化變數250

11．3 渲染3D對象251

11．3．1 使用頂點緩衝區251

11．3．2 使用索引緩衝區253

11．3．3 使用模型、視圖和投影254

11．3．4 渲染257

11．3．5 載入Collada模組260

11．4 使用紋理和光照262

11．4．1 添加光效262

11．4．2 添加per-pixel 光效265

11．4．3 創建紋理268

11．5 創建WebGL顯示模組273

11．5．1 載入WebGL檔案274

11．5．2 設定WebGL275

11．5．3 渲染寶石278

11．5．4 讓寶石動起來283

11．6 總結286

第四部分 本地存儲與多人遊戲

第12章 本地存儲與快取288

12．1 使用網頁存儲器（Web Storage）存儲數據288

12．1．1 使用存儲接口289

12．1．2 建立存儲模組292

12．2 使遊戲狀態持續294

12．2．1 退出遊戲294

12．2．2 暫停遊戲296

12．2．3 存儲遊戲數據298

12．3 建立高分列表301

12．3．1 建立高分界面301

12．3．2 存儲高分數據304

12．3．3 顯示高分數據305

12．4 程式快取307

12．4．1 快取艙單307

12．5 總結310

第13章 使用網路接口聯網311

13．1 WebSockets的套用311

13．1．1 連線伺服器312

13．1．2 與WebSocket連線314

13．2 在伺服器上使用Node315

13．2．1 安裝Node316

13．2．2 利用Node創建HTTP伺服器318

13．2．3 創建一個WebSocket聊天室319

13．3 總結326

第14章 資源327

14．1 使用中間設備327

14．1．1 Box2D327

14．1．2 Impact329

14．1．3 Three．js331

14．2 在移動設備上部署332

14．2．1 PhoneGap332

14．2．2 Appcelerator Titanium336

14．3 發布遊戲337

14．3．1 Chrome Web Store337

14．3．2 Zeewe338

14．3．3 Android Market338

14．3．4 App Store339

14．4 使用線上服務339

14．4．1 TapJS339

14．4．2 Playtomic340

14．4．3 JoyentCloud Node341

14．5 總結341