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

目 錄
第一部分 HTML5游戲入門指導
第1章 網(wǎng)頁上的游戲 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ò)存儲） 6
1．2．5 WebGL（網(wǎng)絡(luò)圖形語言） 7
1．2．6 HTML5（不）是Flash殺手 7
1．3 實現(xiàn)向下兼容性 7
1．3．1 特征檢測 7
1．3．2 使用Modernizr檢測庫 8
1．3．3 用polyfill填充缺口 9
1．4 創(chuàng)建一個游戲 10
1．5 總結(jié) 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 創(chuàng)建程序架構(gòu) 14
2．3．1 建立HTML 15
2．3．2 添加各種風格 16
2．3．3 加載腳本 17
2．4 創(chuàng)建啟動畫面 21
2．4．1 使用網(wǎng)絡(luò)字體 21
2．4．2 裝飾啟動畫面 22
2．5 總結(jié) 24
第3章 移植到手機 25
3．1 開發(fā)移動網(wǎng)頁應(yīng)用程序 25
3．1．1 一次寫，多次讀 26
3．1．2 移動平臺的挑戰(zhàn) 26
3．2 處理用戶在移動設(shè)備里的輸入 26
3．2．1 鍵盤輸入 27
3．2．2 鼠標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 檢測設(shè)備的旋轉(zhuǎn) 38
3．4．5 添加一個移動樣式表 39
3．5 在iOS和Android設(shè)備上開發(fā) 42
3．5．1 將網(wǎng)頁應(yīng)用程序發(fā)布于主界面上 42
3．5．2 清除瀏覽器的障礙 49
3．6 調(diào)試移動網(wǎng)頁應(yīng)用程序 52
3．6．1 啟用Safari調(diào)試器 52
3．6．2 訪問Android日志 54
3．7 總結(jié) 54
第二部分 創(chuàng)建一個簡單游戲
第4章 建立游戲 56
4．1 建立游戲面板模塊 56
4．1．1 初始化游戲狀態(tài) 57
4．1．2 填充初始面板 60
4．2 生成規(guī)則 62
4．2．1 驗證交換 62
4．2．2 檢測鏈 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 捕獲錯誤 79
5．2．4 共享工作線程 79
5．2．5 一個素數(shù)檢測的例子 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 何時選擇canvas 94
6．2 使用canvas繪制 94
6．2．1 繪制形狀和路徑 95
6．2．2 使用高級畫筆與填充樣式 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 訪問圖像數(shù)據(jù) 120
6．3．1 獲取像素值 120
6．3．2 更新像素值 121
6．3．3 導出圖像文件數(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 檢測寶石大小 127
7．1．2 修改加載器腳本 128
7．1．3 添加一個進度條 132
7．2 改進背景 135
7．3 創(chuàng)建游戲界面 137
7．3．1 使用canvas繪制面板 139
7．3．2 使用CSS和圖片繪制面板 145
7．4 總結(jié) 151
第8章 游戲互動 152
8．1 獲取用戶輸入 152
8．1．1 在觸摸屏上實現(xiàn)鼠標功能 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章 繪制游戲動畫 178
9．1 讓游戲動起來 178
9．1．1 動畫計時 179
9．1．2 繪制光標 183
9．1．3 繪制游戲動畫 185
9．2 添加分數(shù)和事件 193
9．2．1 創(chuàng)建UI元素 194
9．2．2 創(chuàng)建游戲計時器 197
9．2．3 獎勵分數(shù) 199
9．2．4 游戲結(jié)束 207
9．3 總結(jié) 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 在移動設(shè)備上使用音頻 222
10．3 使用音頻數(shù)據(jù) 222
10．3．1 使用Mozilla音頻數(shù)據(jù)接口 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 總結(jié) 236
第11章 使用WebGL創(chuàng)建3D圖形 237
11．1 網(wǎng)頁上的3D 237
11．1．1 開始使用WebGL 238
11．1．2 調(diào)試WebGL 239
11．1．3 創(chuàng)建一個輔助模塊 239
11．2 著色器 240
11．2．1 變量和數(shù)據(jù)類型 240
11．2．2 通過WebGL使用著色引擎 244
11．2．3 統(tǒng)一變量 249
11．2．4 變化變量 250
11．3 渲染3D對象 251
11．3．1 使用頂點緩沖區(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 讓寶石動起來 283
11．6 總結(jié) 286
第四部分 本地存儲與多人游戲
第12章 本地存儲與緩存 288
12．1 使用網(wǎng)頁存儲器（Web Storage）存儲數(shù)據(jù) 288
12．1．1 使用存儲接口 289
12．1．2 建立存儲模塊 292
12．2 使游戲狀態(tài)持續(xù) 294
12．2．1 退出游戲 294
12．2．2 暫停游戲 296
12．2．3 存儲游戲數(shù)據(jù) 298
12．3 建立高分列表 301
12．3．1 建立高分界面 301
12．3．2 存儲高分數(shù)據(jù) 304
12．3．3 顯示高分數(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)建一個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 在移動設(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