HTML5 2D 遊戲編程核心技術

<內容簡介>

本書是為希望使用HTML5進行2D遊戲開發，且具備一定JavaScript編程經驗的開發人員而準備的。在本書中，筆者從零開始完整講解了一個複雜的橫向捲軸平臺視頻遊戲的開發過程，並將該視頻遊戲命名為“SnailBait”。在開發過程中，筆者沒有使用任何第三方圖形框架或遊戲框架，因此讀者將從這本書中學會編程實現平滑動畫、Sprite爆炸、開發人員後門程序、遊戲難易度設計等所有內容。

<章節目錄>

譯者序
前言
致謝
第1章概述1
1.1 Snail Bait遊戲3
1.2 HTML5遊戲開發最佳實踐8
1.2.1窗口失去焦點時暫停遊戲8
1.2.2窗口重獲焦點時實現倒計時功能9
1.2.3使用CSS實現UI特效10
1.2.4對遊戲運行緩慢的狀態做出檢測和處理11
1.2.5添加社交功能11
1.2.6將所有遊戲圖像放在單獨的sprite表單中11
1.2.7在服務器中存儲高分榜和實時遊戲數據13
1.3特別功能13
1.4 Snail Bait遊戲中的HTML和CSS 15
1.5開始Snail Bait遊戲編程21
1.6本書中使用的JavaScript 23
1.7小結25
1.8練習26
第2章原始素材和開發環境27
2.1使用開發者工具28
2.1.1控制台29
2.1.2 Chrome Canary的幀速率計數器32
2.1.3調試34
2.1.4時間線35
2.1.5 Profiling 39
2.2獲取資源40
2.2.1圖像40
2.2 .2圖像處理41
2.2.3音效和音樂41
2.2.4動畫42
2.3使用CSS背景43
2.4生成小圖標45
2.5縮短編碼週期46
2.6小結48
2.7練習48
第3章圖形和動畫49
3.1使用HTML5 canvas元素繪製圖形和圖像51
3.1.1繪製背景52
3.1.2繪製跑步小人53
3.1.3繪製平臺53
3.2實現平滑的HTML5動畫55
3.2.1 requestAnimationFrame()方法57
3.2.2 requestAnimationFrame()的polyfill實現57
3.3實現遊戲主循環60
3.4計算幀速率61
3.5滾動遊戲背景62
3.5.1平移坐標系62
3.5.2滾動Snail Bait遊戲的背景65
3.6製作基於時間的運動67
3.7反轉滾動方向67
3.8繪製動畫幀68
3.9使用視差產生視深的假象68
3.10小結71
3.11練習71
第4章遊戲的基本架構72
4.1在JavaScript對像中封裝遊戲函數73
4.1.1 SnailBait的構造函數74
4.1.2 SnailBait的原型75
4.2理解JavaScript語言中挑剔的this指針77
4.3處理鍵盤輸入79
4.4玩家按p鍵時暫停或者恢復遊戲81
4.5凍結遊戲，確保它精確地在暫停的位置恢復82
4.6在窗口失去焦點時暫停遊戲83
4.7使用動態的倒計時來恢復一個暫停的遊戲84
4.7.1向遊戲玩家顯示提示板（簡短信息） 85
4.7.2 Snail Bait的倒計時87
4.8小結89
4.9練習90
第5章遊戲加載動畫91
5.1定義Snail Bait遊戲的窗口93
5.2使用CSS過渡讓元素淡入、淡出96
5.2.1讓元素淡入97
5.2.2讓元素淡出98
5.2.3 snailbait-toast元素的CSS 99
5.2.4顯示和隱藏提示板100
5.3讓擁有與CSS過渡屬性Opacity關聯的元素淡入、淡出103
5.4實現加載動畫105
5.5顯示遊戲畫面109
5.6小結112
5.7練習113
第6章sprite對象114
6.1 sprite對象116
6.1.1 sprite對象的屬性118
6.1.2 sprite對象的構造函數119
6.1.3 sprite對象的方法119
6.2將sprite對象整合到遊戲主循環中121
6.3實現sprite對象的artist對象124
6.3.1圖形artist對象124
6.3.2圖像artist對象125
6.3.3 sprite圖像表單artist對象125
6.3.4定義sprite圖像表單單元格128
6.4創建和初始化遊戲的sprite對象130
6.5使用元數據定義sprite對象133
6.6滾動sprite對象136
6.7小結138
6.8練習138
第7章sprite對象行為140
7.1行為基礎142
7.2跑步小人行為143
7.3跑步小人的跑動行為146
7.4輕量級行為148
7.5遊戲獨立行為150
7.6組合行為155
7.7小結159
7.8練習159
第8章時間軸，第1部分：有限行為及線性運動160
8.1實現一個初始的跳躍行為算法161
8.2將處理跳躍行為的職責轉交給跑步小人162
8.3實現跳躍行為164
8.4使用秒錶記錄動畫時間165
8.5重新定義跳躍行為168
8.6實現線性運動170
8.6 .1上升階段170
8.6.2下降階段171
8.7暫停行為173
8.8小結175
8.9練習175
第9章時間軸，第2部分：非線性運動176
9.1理解時間及其衍生物177
9.2使用動畫計時器和緩變功能實現非線性跳躍177
9.3實現動畫計時器179
9.4實現緩變功能181
9.5微調緩變功能184
9.6實現真實的跳動行為185
9.7使行為隨機化189
9.8使用動畫計時器和緩變功能實現非線性顏色改變190
9.9小結193
9.10練習193
第10章時間軸，第3部分：時間系統194
10.1 Snail Bait遊戲的時間系統195
10.2創建和啟動時間系統197
10.3將時間系統整合進Snail Bait遊戲中198
10.3.1使用時間系統驅動遊戲動畫198
10.3.2實現使用時間系統修改遊戲時間流的函數199
10.3.3在計算幀速率時分解時間比率199
10.3.4使用時間系統暫停和恢復遊戲200
10.4重新定義秒錶和動畫計時器的當前時間202
10.5實現時間系統206
10.6小結208
10.7練習208
第11章碰撞檢測209
11.1碰撞檢測過程210
11.2碰撞檢測技術211
11.3 Snail Bait遊戲中的碰撞檢測212
11.3.1 sprite對象的碰撞矩形212
11.3.2跑步小人的碰撞行為214
11.4為碰撞檢測選擇碰撞候選對象215
11.5在跑步小人與其他sprite對象之間檢測碰撞216
11.6處理碰撞217
11.7優化碰撞檢測220
11.7.1改善包圍盒220
11.7 .2使用空間分割方法221
11.8監測碰撞檢測的運行性能222
11.9編程實現碰撞檢測的邊界案例223
11.10小結226
11.11練習226
第12章重力228
12.1為跑步小人實現墜落行為228
12.2實現重力230
12.2. 1跑步小人的墜落行為232
12.2.2計算初始下降速度236
12.2.3在跑步小人墜落過程中暫停遊戲237
12.3最終版的碰撞檢測237
12.4小結238
12.5練習239
第13章sprite動畫和特殊效果240
13.1實現sprite動畫241
13.2創建特效246
13.2.1晃動遊戲畫面246
13.2.2場景切換248
13.3編排效果253
13.3.1炸死蜜蜂254
13.3.2引爆按鈕256
13.4小結258
13.5練習258
第14章聲音和音樂259
14.1創建聲音和音樂文件261
14.2加載音樂和音效262
14.3設置聲音和音樂控件263
14.4播放音樂264
14.5循環播放音樂265
14.6播放音效267
14.6.1創建sprite音頻對象270
14.6.2定義音效對象271
14.6.3實現多聲道播放音效272
14.7打開和關閉聲音播放279
14.8小結280
14.9練習280
第15章移動設備281
15.1在移動設備上運行Snail Bait遊戲284
15.2檢測移動設備284
15.3縮放遊戲以適應移動設備286
15.3.1 HTML5 viewport元標籤287
15.3.2以編程方式調整遊戲畫面以適應移動設備屏幕291
15.4修改遊戲動畫底部的控制說明295
15.5修改歡迎界面295
15.5.1實現歡迎提示296
15.5.2實現移動設備中的控制說明301
15.5.3實現移動設備版開始提示305
15.5.4顯示移動設備中的開始提示306
15.6添加觸控事件307
15.7在移動設備中處理音頻的方法310
15.8在主屏幕上添加啟動圖標，並以全屏模式運行遊戲312
15.9小結313
15.10練習313
第16章粒子系統314
16.1排煙孔粒子系統315
16.2使用排煙孔粒子系統318
16.2.1定義排煙孔粒子系統數據318
16.2 .2創建排煙孔粒子系統318
16.2.3將排煙孔粒子系統存入Snail Bait遊戲的sprite對像數組中319
16.2.4在每個動畫幀中滾動排煙孔粒子系統320
16.3編程實現排煙孔粒子系統321
16.3.1把排煙孔粒子系統偽裝成sprite對象321
16.3.2組合火焰粒子323
16.3.3組合菸泡327
16.4暫停排煙孔粒子系統337
16.5小結338
16.6練習338
第17章用戶界面339
17.1記錄玩家遊戲成績340
17.2增加遊戲生命指示器343
17.3顯示遊戲字幕348
17.4使用Tweet發布玩家遊戲得分354
17.5當遊戲運行緩慢時通知遊戲玩家357
17.5.1監控幀速率361
17.5.2編程實現運行緩慢通知的事件處理句柄363
17.6編程實現通關動畫364
17.7小結368
17.8練習368
第18章開發者後門程序370
18.1 Snail Bait遊戲的開發者後門372
18.2開發者後門的HTML元素及CSS 373
18.3顯示及隱藏開發者後門375
18.4更新開發者後門的元素377
18.5實現開發者後門的複選框378
18.5.1顯示及隱藏碰撞矩形380
18.5.2啟用或禁用運行緩慢通知382
18.5.3顯示或隱藏排煙孔粒子系統383
18.5.4更新開發者後門的複選框383
18.6實現開發者後門的滑動條384
18.6.1為開發者後門的滑動條定義HTML元素及CSS 386
18.6.2在Snail Bait遊戲的Java -Script代碼中訪問滑動條的讀數387
18.6.3創建並初始化開發者後門的滑動條388
18.6.4將運行緩慢的滑動條關聯到遊戲中389
18.6.5將時間速率滑動條關聯到遊戲中389
18.6.6將游戲關聯到時間速率滑動條上390
18.6.7在顯示開發者後門之前更新滑動條391
18.7實現開發者後門刻度尺392
18.7.1創建並訪問刻度尺的canvas元素393
18.7.2淡入淡出刻度尺394
18.7.3繪製刻度尺395
18.7.4更新刻度尺396
18.7.5拖動遊戲畫面397
18.8小結401
18.9練習401
第19章服務器端開發：內部指標、高分記錄及部署403
19.1 Node .js及socket.io簡介404
19.2在Snail Bait遊戲中引入socket.io 406
19.3創建一個簡單的服務器407
19.4在服務器端創建套接字407
19.5啟動服務器408
19.6在客戶端創建一個套接字並連接到服務器408
19.7記錄遊戲內部指標409
19.8管理高分記錄412
19.8.1實現高分記錄的用戶界面413
19.8.2檢索服務器中的高分記錄415
19.8.3在客戶端顯示高分記錄418
19.8. 4監視姓名輸入419
19.8.5驗證並將高分記錄存儲到服務器420
19.8.6重新顯示高分記錄422
19.8.7開始新遊戲422
19.9部署Snail Bait遊戲423
19.10將文件上傳到服務器425
19.11小結426
19.12練習426
第20章後記：Bodega Revenge遊戲428
20.1設計用戶界面430
20.2創建sprite表單433
20.3實例化遊戲433
20.4實現sprite對象434
20.4.1砲塔434
20.4.2砲彈437
20.4.3小鳥439
20.5實現sprite對象的行為441
20.5.1砲塔的行為442
20.5.2砲彈的行為447
20.5.3小鳥的行為450
20.6繪製剩餘砲彈指示器454
20.7為移動設備實現觸摸控制456
20.8小結458
20.9練習459