利用HTML5、CSS3和WebGL開發(fā)HTML5游戲

目 錄
第一部分 HTML5游戲入門指導(dǎo)
第1章 網(wǎng)頁(yè)上的游戲 2
1．1 追溯HTML5的歷史 2
1．2 在游戲中使用HTML5 3
1．2．1 canvas（畫布） 3
1．2．2 audio（聲音） 4
1．2．3 WebSocket（網(wǎng)絡(luò)接口） 5
1．2．4 Web Storage（網(wǎng)絡(luò)存儲(chǔ)） 6
1．2．5 WebGL（網(wǎng)絡(luò)圖形語(yǔ)言） 7
1．2．6 HTML5（不）是Flash殺手 7
1．3 實(shí)現(xiàn)向下兼容性 7
1．3．1 特征檢測(cè) 7
1．3．2 使用Modernizr檢測(cè)庫(kù) 8
1．3．3 用polyfill填充缺口 9
1．4 創(chuàng)建一個(gè)游戲 10
1．5 總結(jié) 10
第2章 邁出第一步 11
2．1 理解游戲 11
2．1．1 交換寶石 12
2．1．2 配成3個(gè) 12
2．1．3 等級(jí)進(jìn)階 12
2．2 識(shí)別游戲階段 12
2．2．1 啟動(dòng)界面 12
2．2．2 主界面 13
2．2．3 游戲畫面 13
2．2．4 最高分 13
2．3 創(chuàng)建程序架構(gòu) 14
2．3．1 建立HTML 15
2．3．2 添加各種風(fēng)格 16
2．3．3 加載腳本 17
2．4 創(chuàng)建啟動(dòng)畫面 21
2．4．1 使用網(wǎng)絡(luò)字體 21
2．4．2 裝飾啟動(dòng)畫面 22
2．5 總結(jié) 24
第3章 移植到手機(jī) 25
3．1 開發(fā)移動(dòng)網(wǎng)頁(yè)應(yīng)用程序 25
3．1．1 一次寫，多次讀 26
3．1．2 移動(dòng)平臺(tái)的挑戰(zhàn) 26
3．2 處理用戶在移動(dòng)設(shè)備里的輸入 26
3．2．1 鍵盤輸入 27
3．2．2 鼠標(biāo)VS．觸摸 27
3．3 適配小屏幕分辨率 28
3．3．1 創(chuàng)建可調(diào)整的布局 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媒體查詢 37
3．4．4 檢測(cè)設(shè)備的旋轉(zhuǎn) 38
3．4．5 添加一個(gè)移動(dòng)樣式表 39
3．5 在iOS和Android設(shè)備上開發(fā) 42
3．5．1 將網(wǎng)頁(yè)應(yīng)用程序發(fā)布于主界面上 42
3．5．2 清除瀏覽器的障礙 49
3．6 調(diào)試移動(dòng)網(wǎng)頁(yè)應(yīng)用程序 52
3．6．1 啟用Safari調(diào)試器 52
3．6．2 訪問(wèn)Android日志 54
3．7 總結(jié) 54
第二部分 創(chuàng)建一個(gè)簡(jiǎn)單游戲
第4章 建立游戲 56
4．1 建立游戲面板模塊 56
4．1．1 初始化游戲狀態(tài) 57
4．1．2 填充初始面板 60
4．2 生成規(guī)則 62
4．2．1 驗(yàn)證交換 62
4．2．2 檢測(cè)鏈 65
4．2．3 重新填充面板 69
4．2．4 交換寶石 72
4．3 總結(jié) 74
第5章 將任務(wù)委托給Web Workers 75
5．1 使用Web Workers 75
5．1．1 工作線程的使用限制 76
5．1．2 工作線程能做什么 77
5．2 使用工作線程 78
5．2．1 發(fā)送消息 78
5．2．2 接收消息 79
5．2．3 捕獲錯(cuò)誤 79
5．2．4 共享工作線程 79
5．2．5 一個(gè)素?cái)?shù)檢測(cè)的例子 81
5．3 在游戲中使用Web Workers 84
5．3．1 創(chuàng)建工作線程模塊 84
5．3．2 保持相同的接口 86
5．4 總結(jié) 91
第6章 在畫布（canvas）里創(chuàng)建圖形 92
6．1 canvas與其他方法比較 92
6．1．1 位圖圖像 92
6．1．2 SVG圖像 93
6．1．3 畫布canvas 93
6．1．4 何時(shí)選擇canvas 94
6．2 使用canvas繪制 94
6．2．1 繪制形狀和路徑 95
6．2．2 使用高級(jí)畫筆與填充樣式 103
6．2．3 使用變換 107
6．2．4 添加文本、圖像和陰影 108
6．2．5 管理狀態(tài)棧 112
6．2．6 繪制HTML5徽標(biāo) 113
6．2．7 圖像合成 119
6．3 訪問(wèn)圖像數(shù)據(jù) 120
6．3．1 獲取像素值 120
6．3．2 更新像素值 121
6．3．3 導(dǎo)出圖像文件數(shù)據(jù) 122
6．3．4 理解安全限制 123
6．3．5 創(chuàng)建基于像素的效果 123
6．4 總結(jié) 125
第7章 創(chuàng)建游戲界面 126
7．1 預(yù)加載游戲文件 126
7．1．1 檢測(cè)寶石大小 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 總結(jié) 151
第8章 游戲互動(dòng) 152
8．1 獲取用戶輸入 152
8．1．1 在觸摸屏上實(shí)現(xiàn)鼠標(biāo)功能 152
8．1．2 虛擬鍵盤 153
8．1．3 觸摸操作 154
8．1．4 輸入操作和canvas 159
8．2 創(chuàng)建輸入模塊 161
8．2．1 執(zhí)行游戲操作 165
8．2．2 捆綁輸入與游戲函數(shù) 170
8．3 總結(jié) 177
第9章 繪制游戲動(dòng)畫 178
9．1 讓游戲動(dòng)起來(lái) 178
9．1．1 動(dòng)畫計(jì)時(shí) 179
9．1．2 繪制光標(biāo) 183
9．1．3 繪制游戲動(dòng)畫 185
9．2 添加分?jǐn)?shù)和事件 193
9．2．1 創(chuàng)建UI元素 194
9．2．2 創(chuàng)建游戲計(jì)時(shí)器 197
9．2．3 獎(jiǎng)勵(lì)分?jǐn)?shù) 199
9．2．4 游戲結(jié)束 207
9．3 總結(jié) 210
第三部分 添加3D與聲音
第10章 為游戲創(chuàng)建音頻 212
10．1 HTML5音頻 212
10．1．1 檢測(cè)音頻支持 213
10．1．2 理解音頻格式之爭(zhēng) 213
10．1．3 尋找音效 215
10．2 使用audio元素 216
10．2．1 播放控制 218
10．2．2 在移動(dòng)設(shè)備上使用音頻 222
10．3 使用音頻數(shù)據(jù) 222
10．3．1 使用Mozilla音頻數(shù)據(jù)接口 223
10．3．2 一些例子 225
10．4 建立音頻模塊 229
10．4．1 為音效回播做準(zhǔn)備 230
10．4．2 播放聲音效果 231
10．4．3 停止播放 233
10．4．4 清除聲音 233
10．5 為游戲添加聲音效果 235
10．5．1 在游戲界面里播放音頻 235
10．6 總結(jié) 236
第11章 使用WebGL創(chuàng)建3D圖形 237
11．1 網(wǎng)頁(yè)上的3D 237
11．1．1 開始使用WebGL 238
11．1．2 調(diào)試WebGL 239
11．1．3 創(chuàng)建一個(gè)輔助模塊 239
11．2 著色器 240
11．2．1 變量和數(shù)據(jù)類型 240
11．2．2 通過(guò)WebGL使用著色引擎 244
11．2．3 統(tǒng)一變量 249
11．2．4 變化變量 250
11．3 渲染3D對(duì)象 251
11．3．1 使用頂點(diǎn)緩沖區(qū) 251
11．3．2 使用索引緩沖區(qū) 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 設(shè)置WebGL 275
11．5．3 渲染寶石 278
11．5．4 讓寶石動(dòng)起來(lái) 283
11．6 總結(jié) 286
第四部分 本地存儲(chǔ)與多人游戲
第12章 本地存儲(chǔ)與緩存 288
12．1 使用網(wǎng)頁(yè)存儲(chǔ)器（Web Storage）存儲(chǔ)數(shù)據(jù) 288
12．1．1 使用存儲(chǔ)接口 289
12．1．2 建立存儲(chǔ)模塊 292
12．2 使游戲狀態(tài)持續(xù) 294
12．2．1 退出游戲 294
12．2．2 暫停游戲 296
12．2．3 存儲(chǔ)游戲數(shù)據(jù) 298
12．3 建立高分列表 301
12．3．1 建立高分界面 301
12．3．2 存儲(chǔ)高分?jǐn)?shù)據(jù) 304
12．3．3 顯示高分?jǐn)?shù)據(jù) 305
12．4 程序緩存 307
12．4．1 緩存艙單 307
12．5 總結(jié) 310
第13章 使用網(wǎng)絡(luò)接口聯(lián)網(wǎng) 311
13．1 WebSockets的應(yīng)用 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 總結(jié) 326
第14章 資源 327
14．1 使用中間設(shè)備 327
14．1．1 Box2D 327
14．1．2 Impact 329
14．1．3 Three．js 331
14．2 在移動(dòng)設(shè)備上部署 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 使用線上服務(wù) 339
14．4．1 TapJS 339
14．4．2 Playtomic 340
14．4．3 JoyentCloud Node 341
14．5 總結(jié) 341