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

目　錄

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

第2章　Canvas繪圖　19
2.1　基本知識　19
2.1.1　創(chuàng)建canvas　20
2.1.2　理解canvas坐標系　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　案例：幀動畫實現(xiàn)　34
2.3.4　像素操作　36
2.3.5　案例：轉換灰度圖　37
2.3.6　案例：浮雕效果　39
2.4　坐標變換　40
2.5　繪制文字　42
2.6　其他全局屬性　44
2.7　案例：《你畫我猜》　45
2.7.1　UI界面設計　45
2.7.2　定義畫板對象　47
2.7.3　初始化畫筆選項區(qū)　47
2.7.4　實現(xiàn)畫板繪制　49
2.7.5　整合代碼　50
2.8　小結　54

第3章　多媒體元素　55
3.1　多媒體基本知識　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　案例：本地音樂播放器　61
3.3.1　UI界面設計　61
3.3.2　創(chuàng)建Player對象　62
3.3.3　添加本地文件　65
3.3.4　實現(xiàn)播放進度條　66
3.3.5　實現(xiàn)播放功能　67
3.3.6　整合代碼　68
3.4　音頻處理高級技巧　74
3.4.1　Web Audio API簡介　74
3.4.2　Audio上下文　74
3.4.3　加載和播放音頻　76
3.4.4　調(diào)節(jié)音頻增益　77
3.4.5　混合多個音頻　79
3.4.6　3D音效　82
3.4.7　顯示聲音波形　83
3.5　小結　86

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

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

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

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

第8章　使用CSS3開發(fā)游戲　223
8.1　CSS歷史　223
8.2　CSS3選擇器　224
8.2.1　屬性選擇器　224
8.2.2　結構偽類選擇器　224
8.2.3　target偽類選擇器　229
8.2.4　UI元素狀態(tài)偽類選擇器　230
8.2.5　反向偽類選擇器　230
8.2.6　通用兄弟元素選擇器　230
8.3　CSS3動畫　231
8.3.1　變形　231
8.3.2　過渡　234
8.3.3　案例：手風琴效果　235
8.3.4　動畫　237
8.3.5　案例：沿路徑移動的小球　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　小結　255

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

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

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

附錄A　游戲的歷史　353
附錄B　游戲類型　373