利用HTML5、CSS3和WebGL開(kāi)發(fā)HTML5游戲簡(jiǎn)介，目錄書(shū)摘

內容簡(jiǎn)介:本書(shū)利用最新的開(kāi)放式網(wǎng)頁(yè)技術(shù)，結合JavaScript，CSS3和WebGL技術(shù)，使用WebSockets、Canvas、HTML5音頻、Web Storage及WebSockets等功能，從零開(kāi)始創(chuàng )建一個(gè)游戲，并搭建一個(gè)框架，從而完成整個(gè)3D游戲的開(kāi)發(fā)、設置及發(fā)布，生動(dòng)展現可以流暢運行于各種移動(dòng)終端及瀏覽器的HTML5游戲的開(kāi)發(fā)過(guò)程。

作者簡(jiǎn)介:黃蔚瀚，有10年的移動(dòng)產(chǎn)品設計經(jīng)驗，熟悉多種移動(dòng)開(kāi)發(fā)技術(shù)，對游戲設計、音效配樂(lè )、用戶(hù)體驗分析有豐富的經(jīng)驗，是HTML5夢(mèng)工場(chǎng)用戶(hù)體驗分析師?，F任百度商業(yè)產(chǎn)品研究規劃部高級產(chǎn)品設計師。

目錄:目 錄
第一部分 HTML5游戲入門(mén)指導
第1章 網(wǎng)頁(yè)上的游戲 2
1．1 追溯HTML5的歷史 2
1．2 在游戲中使用HTML5 3
1．2．1 canvas（畫(huà)布） 3
1．2．2 audio（聲音） 4
1．2．3 WebSocket（網(wǎng)絡(luò )接口） 5
1．2．4 Web Storage（網(wǎng)絡(luò )存儲） 6
1．2．5 WebGL（網(wǎng)絡(luò )圖形語(yǔ)言） 7
1．2．6 HTML5（不）是Flash殺手 7
1．3 實(shí)現向下兼容性 7
1．3．1 特征檢測 7
1．3．2 使用Modernizr檢測庫 8
1．3．3 用polyfill填充缺口 9
1．4 創(chuàng )建一個(gè)游戲 10
1．5 總結 10
第2章 邁出第一步 11
2．1 理解游戲 11
2．1．1 交換寶石 12
2．1．2 配成3個(gè) 12
2．1．3 等級進(jìn)階 12
2．2 識別游戲階段 12
2．2．1 啟動(dòng)界面 12
2．2．2 主界面 13
2．2．3 游戲畫(huà)面 13
2．2．4 最高分 13
2．3 創(chuàng )建程序架構 14
2．3．1 建立HTML 15
2．3．2 添加各種風(fēng)格 16
2．3．3 加載腳本 17
2．4 創(chuàng )建啟動(dòng)畫(huà)面 21
2．4．1 使用網(wǎng)絡(luò )字體 21
2．4．2 裝飾啟動(dòng)畫(huà)面 22
2．5 總結 24
第3章 移植到手機 25
3．1 開(kāi)發(fā)移動(dòng)網(wǎng)頁(yè)應用程序 25
3．1．1 一次寫(xiě)，多次讀 26
3．1．2 移動(dòng)平臺的挑戰 26
3．2 處理用戶(hù)在移動(dòng)設備里的輸入 26
3．2．1 鍵盤(pán)輸入 27
3．2．2 鼠標VS．觸摸 27
3．3 適配小屏幕分辨率 28
3．3．1 創(chuàng )建可調整的布局 29
3．3．2 控制視口 31
3．3．3 屏蔽縮放功能 31
3．4 創(chuàng )建不同的視圖 32
3．4．1 創(chuàng )建主菜單 32
3．4．2 添加屏幕模塊 34
3．4．3 使用CSS媒體查詢(xún) 37
3．4．4 檢測設備的旋轉 38
3．4．5 添加一個(gè)移動(dòng)樣式表 39
3．5 在iOS和Android設備上開(kāi)發(fā) 42
3．5．1 將網(wǎng)頁(yè)應用程序發(fā)布于主界面上 42
3．5．2 清除瀏覽器的障礙 49
3．6 調試移動(dòng)網(wǎng)頁(yè)應用程序 52
3．6．1 啟用Safari調試器 52
3．6．2 訪(fǎng)問(wèn)Android日志 54
3．7 總結 54
第二部分 創(chuàng )建一個(gè)簡(jiǎn)單游戲
第4章 建立游戲 56
4．1 建立游戲面板模塊 56
4．1．1 初始化游戲狀態(tài) 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章 將任務(wù)委托給Web Workers 75
5．1 使用Web Workers 75
5．1．1 工作線(xiàn)程的使用限制 76
5．1．2 工作線(xiàn)程能做什么 77
5．2 使用工作線(xiàn)程 78
5．2．1 發(fā)送消息 78
5．2．2 接收消息 79
5．2．3 捕獲錯誤 79
5．2．4 共享工作線(xiàn)程 79
5．2．5 一個(gè)素數檢測的例子 81
5．3 在游戲中使用Web Workers 84
5．3．1 創(chuàng )建工作線(xiàn)程模塊 84
5．3．2 保持相同的接口 86
5．4 總結 91
第6章 在畫(huà)布（canvas）里創(chuàng )建圖形 92
6．1 canvas與其他方法比較 92
6．1．1 位圖圖像 92
6．1．2 SVG圖像 93
6．1．3 畫(huà)布canvas 93
6．1．4 何時(shí)選擇canvas 94
6．2 使用canvas繪制 94
6．2．1 繪制形狀和路徑 95
6．2．2 使用高級畫(huà)筆與填充樣式 103
6．2．3 使用變換 107
6．2．4 添加文本、圖像和陰影 108
6．2．5 管理狀態(tài)棧 112
6．2．6 繪制HTML5徽標 113
6．2．7 圖像合成 119
6．3 訪(fǎng)問(wèn)圖像數據 120
6．3．1 獲取像素值 120
6．3．2 更新像素值 121
6．3．3 導出圖像文件數據 122
6．3．4 理解安全限制 123
6．3．5 創(chuàng )建基于像素的效果 123
6．4 總結 125
第7章 創(chuàng )建游戲界面 126
7．1 預加載游戲文件 126
7．1．1 檢測寶石大小 127
7．1．2 修改加載器腳本 128
7．1．3 添加一個(gè)進(jìn)度條 132
7．2 改進(jìn)背景 135
7．3 創(chuàng )建游戲界面 137
7．3．1 使用canvas繪制面板 139
7．3．2 使用CSS和圖片繪制面板 145
7．4 總結 151
第8章 游戲互動(dòng) 152
8．1 獲取用戶(hù)輸入 152
8．1．1 在觸摸屏上實(shí)現鼠標功能 152
8．1．2 虛擬鍵盤(pán) 153
8．1．3 觸摸操作 154
8．1．4 輸入操作和canvas 159
8．2 創(chuàng )建輸入模塊 161
8．2．1 執行游戲操作 165
8．2．2 捆綁輸入與游戲函數 170
8．3 總結 177
第9章 繪制游戲動(dòng)畫(huà) 178
9．1 讓游戲動(dòng)起來(lái) 178
9．1．1 動(dòng)畫(huà)計時(shí) 179
9．1．2 繪制光標 183
9．1．3 繪制游戲動(dòng)畫(huà) 185
9．2 添加分數和事件 193
9．2．1 創(chuàng )建UI元素 194
9．2．2 創(chuàng )建游戲計時(shí)器 197
9．2．3 獎勵分數 199
9．2．4 游戲結束 207
9．3 總結 210
第三部分 添加3D與聲音
第10章 為游戲創(chuàng )建音頻 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 在移動(dòng)設備上使用音頻 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創(chuàng )建3D圖形 237
11．1 網(wǎng)頁(yè)上的3D 237
11．1．1 開(kāi)始使用WebGL 238
11．1．2 調試WebGL 239
11．1．3 創(chuàng )建一個(gè)輔助模塊 239
11．2 著(zhù)色器 240
11．2．1 變量和數據類(lèi)型 240
11．2．2 通過(guò)WebGL使用著(zhù)色引擎 244
11．2．3 統一變量 249
11．2．4 變化變量 250
11．3 渲染3D對象 251
11．3．1 使用頂點(diǎn)緩沖區 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 創(chuàng )建紋理 268
11．5 創(chuàng )建WebGL顯示模塊 273
11．5．1 加載WebGL文件 274
11．5．2 設置WebGL 275
11．5．3 渲染寶石 278
11．5．4 讓寶石動(dòng)起來(lái) 283
11．6 總結 286
第四部分 本地存儲與多人游戲
第12章 本地存儲與緩存 288
12．1 使用網(wǎng)頁(yè)存儲器（Web Storage）存儲數據 288
12．1．1 使用存儲接口 289
12．1．2 建立存儲模塊 292
12．2 使游戲狀態(tài)持續 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章 使用網(wǎng)絡(luò )接口聯(lián)網(wǎng) 311
13．1 WebSockets的應用 311
13．1．1 連接服務(wù)器 312
13．1．2 與WebSocket連接 314
13．2 在服務(wù)器上使用Node 315
13．2．1 安裝Node 316
13．2．2 利用Node創(chuàng )建HTTP服務(wù)器 318
13．2．3 創(chuàng )建一個(gè)WebSocket聊天室 319
13．3 總結 326
第14章 資源 327
14．1 使用中間設備 327
14．1．1 Box2D 327
14．1．2 Impact 329
14．1．3 Three．js 331
14．2 在移動(dòng)設備上部署 332
14．2．1 PhoneGap 332
14．2．2 Appcelerator Titanium 336
14．3 發(fā)布游戲 337
14．3．1 Chrome Web Store 337
14．3．2 Zeewe 338
14．3．3 Android Market 338
14．3．4 App Store 339
14．4 使用線(xiàn)上服務(wù) 339
14．4．1 TapJS 339
14．4．2 Playtomic 340
14．4．3 JoyentCloud Node 341
14．5 總結 341