HTML5游戲編程核心技術(shù)與實(shí)戰(zhàn)

目　錄

第1章　游戲和HTML5初探　1
1.1　網(wǎng)頁(yè)游戲和HTML5　1
1.1.1　網(wǎng)頁(yè)游戲簡(jiǎn)介　1
1.1.2　HTML5簡(jiǎn)介　2
1.1.3　HTML5瀏覽器工具　4
1.1.4　HTML5開(kāi)發(fā)工具　6
1.2　HTML5新特性初探　10
1.2.1　canvas元素　10
1.2.2　WebGL　12
1.2.3　多媒體元素　13
1.2.4　地理信息服務(wù)　14
1.2.5　本地存儲(chǔ)　15
1.2.6　Web sockets網(wǎng)絡(luò)通信　16
1.2.7　Web Worker多線程　16
1.3　小結(jié)　18

第2章　Canvas繪圖　19
2.1　基本知識(shí)　19
2.1.1　創(chuàng)建canvas　20
2.1.2　理解canvas坐標(biāo)系　20
2.1.3　獲取canvas環(huán)境上下文　20
2.2　圖形API　21
2.2.1　理解路徑　21
2.2.2　路徑操作API　21
2.2.3　繪制線條　22
2.2.4　繪制矩形　23
2.2.5　繪制圓弧　24
2.2.6　繪制貝塞爾曲線　25
2.2.7　線條屬性　27
2.2.8　線條顏色　28
2.2.9　填充　28
2.2.10　繪圖狀態(tài)　31
2.3　圖像API　32
2.3.1　使用canvas繪制圖像　32
2.3.2　案例：放大鏡　33
2.3.3　案例：幀動(dòng)畫(huà)實(shí)現(xiàn)　34
2.3.4　像素操作　36
2.3.5　案例：轉(zhuǎn)換灰度圖　37
2.3.6　案例：浮雕效果　39
2.4　坐標(biāo)變換　40
2.5　繪制文字　42
2.6　其他全局屬性　44
2.7　案例：《你畫(huà)我猜》　45
2.7.1　UI界面設(shè)計(jì)　45
2.7.2　定義畫(huà)板對(duì)象　47
2.7.3　初始化畫(huà)筆選項(xiàng)區(qū)　47
2.7.4　實(shí)現(xiàn)畫(huà)板繪制　49
2.7.5　整合代碼　50
2.8　小結(jié)　54

第3章　多媒體元素　55
3.1　多媒體基本知識(shí)　55
3.1.1　多媒體容器　55
3.1.2　音視頻解碼器　56
3.2　使用多媒體元素　57
3.2.1　屬性　58
3.2.2　方法　59
3.2.3　事件　60
3.2.4　多媒體元素的限制　61
3.3　案例：本地音樂(lè)播放器　61
3.3.1　UI界面設(shè)計(jì)　61
3.3.2　創(chuàng)建Player對(duì)象　62
3.3.3　添加本地文件　65
3.3.4　實(shí)現(xiàn)播放進(jìn)度條　66
3.3.5　實(shí)現(xiàn)播放功能　67
3.3.6　整合代碼　68
3.4　音頻處理高級(jí)技巧　74
3.4.1　Web Audio API簡(jiǎn)介　74
3.4.2　Audio上下文　74
3.4.3　加載和播放音頻　76
3.4.4　調(diào)節(jié)音頻增益　77
3.4.5　混合多個(gè)音頻　79
3.4.6　3D音效　82
3.4.7　顯示聲音波形　83
3.5　小結(jié)　86

第4章　制作2D游戲引擎　87
4.1　理解游戲循環(huán)　87
4.2　渲染引擎實(shí)現(xiàn)　88
4.2.1　游戲引擎介紹　88
4.2.2　建立游戲主循環(huán)框架　89
4.2.3　控制游戲幀數(shù)　92
4.2.4　游戲監(jiān)聽(tīng)器　94
4.2.5　創(chuàng)建游戲主窗口　97
4.2.6　創(chuàng)建游戲精靈　104
4.2.7　案例：屏幕彈球　112
4.2.8　游戲精靈幀動(dòng)畫(huà)　115
4.2.9　加載游戲資源　131
4.2.10　游戲IO控制　142
4.3　使用引擎構(gòu)建游戲?qū)嵗?44
4.4　小結(jié)　152

第5章　網(wǎng)絡(luò)通信基礎(chǔ)　153
5.1　網(wǎng)絡(luò)協(xié)議基礎(chǔ)　153
5.1.1　通信協(xié)議　153
5.1.2　TCP/IP　153
5.1.3　HTTP　154
5.1.4　套接字　156
5.2　服務(wù)器端框架Node.js基礎(chǔ)　157
5.2.1　簡(jiǎn)介　157
5.2.2　安裝　158
5.2.3　應(yīng)用　158
5.2.4　案例：簡(jiǎn)單的Web服務(wù)器　159
5.3　Web sockets基礎(chǔ)　162
5.3.1　簡(jiǎn)介　162
5.3.2　應(yīng)用　162
5.3.3　案例：基于socket.io.js框架的聊天室　164
5.4　小結(jié)　167

第6章　游戲常用算法　168
6.1　追蹤算法　168
6.2　碰撞檢測(cè)算法　172
6.2.1　地圖格子算法　172
6.2.2　包圍盒檢測(cè)算法　173
6.2.3　像素檢測(cè)算法　183
6.3　路徑搜索算法　186
6.3.1　隨機(jī)迷宮算法　186
6.3.2　A*算法　189
6.4　有限狀態(tài)機(jī)　194
6.4.1　原理　194
6.4.2　實(shí)現(xiàn)　195
6.4.3　案例：勤勞的螞蟻　198
6.5　粒子系統(tǒng)　206
6.6　小結(jié)　210

第7章　Box2D引擎和物理游戲　211
7.1　Box2D基礎(chǔ)　211
7.1.1　安裝Box2D庫(kù)　211
7.1.2　Box2D中的基本概念　212
7.1.3　創(chuàng)建Box2D物理世界　213
7.1.4　添加物體到空間中　213
7.1.5　渲染Box2D世界　215
7.2　案例：結(jié)合渲染引擎渲染Box2D世界　217
7.2.1　建立游戲框架，初始化Box2D世界　217
7.2.2　更新Box2D物理世界　219
7.2.3　創(chuàng)建Box2D物理精靈　219
7.3　小結(jié)　222

第8章　使用CSS3開(kāi)發(fā)游戲　223
8.1　CSS歷史　223
8.2　CSS3選擇器　224
8.2.1　屬性選擇器　224
8.2.2　結(jié)構(gòu)偽類(lèi)選擇器　224
8.2.3　target偽類(lèi)選擇器　229
8.2.4　UI元素狀態(tài)偽類(lèi)選擇器　230
8.2.5　反向偽類(lèi)選擇器　230
8.2.6　通用兄弟元素選擇器　230
8.3　CSS3動(dòng)畫(huà)　231
8.3.1　變形　231
8.3.2　過(guò)渡　234
8.3.3　案例：手風(fēng)琴效果　235
8.3.4　動(dòng)畫(huà)　237
8.3.5　案例：沿路徑移動(dòng)的小球　239
8.3.6　案例：地板上彈跳的小球　241
8.4　案例：俄羅斯方塊　244
8.4.1　游戲規(guī)則和游戲UI　244
8.4.2　分析游戲　246
8.4.3　游戲?qū)崿F(xiàn)　250
8.5　小結(jié)　255

第9章　編程實(shí)戰(zhàn)之太空戰(zhàn)機(jī)　256
9.1　創(chuàng)建主框架　256
9.2　創(chuàng)建開(kāi)始場(chǎng)景　259
9.3　創(chuàng)建運(yùn)行場(chǎng)景　261
9.3.1　創(chuàng)建視差滾動(dòng)背景　261
9.3.2　創(chuàng)建射擊類(lèi)　264
9.3.3　創(chuàng)建玩家類(lèi)　268
9.3.4　創(chuàng)建敵機(jī)類(lèi)　273
9.3.5　創(chuàng)建子彈類(lèi)　275
9.3.6　游戲配置實(shí)現(xiàn)　277
9.3.7　運(yùn)行場(chǎng)景實(shí)現(xiàn)　282
9.4　創(chuàng)建結(jié)束場(chǎng)景　285
9.5　小結(jié)　286

第10章　編程實(shí)戰(zhàn)之《你畫(huà)我猜》　287
10.1　了解游戲邏輯　287
10.2　UI界面設(shè)計(jì)　288
10.3　登錄到服務(wù)器的實(shí)現(xiàn)　289
10.3.1　創(chuàng)建簡(jiǎn)單的游戲服務(wù)器對(duì)象　290
10.3.2　創(chuàng)建服務(wù)客戶端對(duì)象　291
10.3.3　創(chuàng)建客戶端對(duì)象　293
10.4　畫(huà)板對(duì)象實(shí)現(xiàn)　295
10.5　游戲數(shù)據(jù)定義　299
10.6　顯示所有玩家　301
10.7　發(fā)送文本消息　303
10.8　游戲邏輯實(shí)現(xiàn)　304
10.9　最終實(shí)現(xiàn)　305
10.9.1　主頁(yè)面最終實(shí)現(xiàn)　305
10.9.2　客戶端最終實(shí)現(xiàn)　307
10.9.3　畫(huà)板最終實(shí)現(xiàn)　312
10.9.4　游戲服務(wù)器最終實(shí)現(xiàn)　315
10.9.5　游戲配置最終實(shí)現(xiàn)　319
10.9.6　服務(wù)客戶端最終實(shí)現(xiàn)　320
10.10　小結(jié)　322

第11章　編程實(shí)戰(zhàn)之《瘋狂的小鳥(niǎo)》　323
11.1　建立游戲主界面　323
11.2　創(chuàng)建B2Sprite類(lèi)　328
11.3　創(chuàng)建Bird類(lèi)　330
11.3.1　Bird狀態(tài)分析及實(shí)現(xiàn)　330
11.3.2　繪制Bird飛行軌跡　334
11.3.3　Box2D中的碰撞檢測(cè)　336
11.3.4　Bird碰撞效果處理　338
11.3.5　Bird類(lèi)的實(shí)現(xiàn)　339
11.4　Pig類(lèi)的實(shí)現(xiàn)　343
11.5　Block類(lèi)的實(shí)現(xiàn)　345
11.6　TGame類(lèi)的實(shí)現(xiàn)　347
11.7　小結(jié)　352

附錄A　游戲的歷史　353
附錄B　游戲類(lèi)型　373