《HTML5 2D遊戲程式設計核心技術》是為希望使用HTML5進行2D遊戲開發，且具備一定JavaScript程式設計經驗的開發人員而準備的。在《HTML5 2D遊戲程式設計核心技術》中，筆者從零開始完整講解了一個複雜的橫向卷軸平臺視頻遊戲的開發過程，並將該視頻遊戲命名為“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和CSS15
1.5 開始Snail Bait遊戲程式設計21
1.6 本書中使用的Java Script23
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 Profiling39
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 使用HTML5canvas元素繪製圖形和圖像51
3.1.1 繪製背景52
3.1.2 繪製跑步小人53
3.1.3 繪製平臺53
3.2 實現平滑的HTML5動畫55
3.2.1 request Animation Frame（）方法57
3.2.2 request Animation Frame（）的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 在Java Script物件中封裝遊戲函數73
4.1.1 Snail Bait的構造函數74
4.1.2 Snail Bait的原型75
4.2 理解Java Script語言中挑剔的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元素的CSS99
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 HTML5viewport元標籤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元素及CSS373
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元素及CSS386
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.io406
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
The Translator’s Words
譯 者
序時下，HTML5已經不再是Web技術愛好者口中的下一代Web語言，在歷經8年的艱辛努力後，萬維網聯盟（W3C）終於在2014年發佈了正式版的HTML5標準規範。HTML5由此結束了搖擺不定的狀態，正式成為行業標準，成為互聯網巨頭們爭相熱捧的Web技術和框架。約伯斯的預言正在成為現實。
早在HTML5標準規範制定初期，HTML5遊戲就已經出現，不過那時候的遊戲更多的是以HTML5教學用例或個人學習成果的形式出現的。隨著流覽器廠商不斷完善對HTML5的支援，HTML5遊戲也得到了進一步的發展，並在2012年形成一波HTML5遊戲浪潮，此後便轉入沉寂。2014年7月，《圍住神經貓》這款HTML5小遊戲在微信朋友圈火熱轉發，讓業界看到了HTML5移動遊戲的優勢和潛力；此後的HTML5版《愚公移山》則讓移動遊戲開發者看到了讓HTML5遊戲實現商業化的希望。
得益于移動智慧設備硬體性能的不斷提升及移動端流覽器的強大支持，HTML5遊戲正在擺脫小遊戲、輕遊戲的困局，具備了開發中度、重度遊戲的基礎。越來越多的大型遊戲開發商正在加入HTML5遊戲開發的隊伍，全新Unity5、虛幻引擎、3D引擎Sting Ray等遊戲引擎開始支援HTML5遊戲開發，HTML5遊戲的前景得到了行業的廣泛認可。
作為一個標準，HTML5不僅僅是一種標記語言,也不僅僅局限于遊戲開發，而是一種Web應用開發的框架和平臺，包括了無需外掛程式的視頻、音訊、本機存放區、Canvas元素及絢麗的渲染效果等。而其中，最讓前端開發者激動的當屬Canvas元素，它賦予了前端開發者充分發揮自身豐富想像力的可能，結合JavaScript語言、CSS（層疊樣式表），前端開發者能渲染出各種美輪美奐的視覺效果，帶給使用者最佳的使用體驗。
譯者也正是因為在實際工作中需要在流覽器端實現精美的資料視覺化效果而開始學習、使用HTML5技術的。像大多數的軟體發展者一樣，譯者也常感到在學習一項新技術時，拋開技術本身的難度不說，如何在實際工作中應用這項新技術才是決定把知識轉化為能力的關鍵。而對於HTML5來說，從嚴格意義上講，它只是一個停留在W3C眾多草案中的標準，實際應用效果如何除了看流覽器的支持程度外，更重要的還是如何在開發中利用JavaScript語言和CSS來充分發揮HTML5的各項優勢。因此，掌握HTML5技術的困難之處不在於對HTML5標準規範的理解，或是對HTML5單個特性的掌握，而在於如何把眾多分散在HTML5技術、JavaScript語言、CSS中的知識點有機地結合起來，在實際開發中應用這些核心技術、滿足開發需求，實現最終目的。
好在作者及時寫就了本書。
本書是作者在《HTML5 Canvas核心技術：圖形、動畫與遊戲開發》（已由機械工業出版社出版，書號為978-7-111-41634-0）之後的又一力作。在前作中，作者全面講解了Canvas元素的API介面，以及如何利用Canvas元素進行圖形繪製、動畫製作、物理效果類比、碰撞檢測、遊戲開發等內容，並使用大量的實例，演示了具體的實現方法。本書雖然也涉及相似內容的講解，但絕不是前作的重複，而是對這些技術的綜合、系統應用。
全書以完善作者在寫作《HTML5 Canvas核心技術：圖形、動畫與遊戲開發》過程中編寫的一款名為“Snail Bait”的二維橫向卷軸遊戲作為主線，系統地講解了如何從遊戲構思、收集原始素材、搭建遊戲框架、逐步添加遊戲功能到最終實現一個功能完善的遊戲開發過程，全面展示了二維遊戲開發的方方面面。
在開發過程中，作者沒有使用任何當下流行的HTML5圖形框架或遊戲框架，而是從零開始，一步步程式設計實現各種二維視頻遊戲的常見功能。因此，讀者可以從本書中學習如何通過程式設計實現平滑動畫、sprite行為、粒子系統、碰撞檢測、開發者後門、遊戲難易度設計等所有內容。這能夠讓讀者排除遊戲框架帶來的干擾，深入、細緻地瞭解遊戲實現的內部邏輯、機制及技術細節，對讀者理解遊戲框架、引擎的工作原理，更好地使用遊戲框架、引擎進行遊戲開發也是大有裨益的。
而作為作者用於系統講解相關技術的載體，Snail Bait遊戲雖然是只有一個關卡的小遊戲，但卻具備了二維視頻遊戲的各種要素：同時操作多個具有不同行為的sprite物件；在不同的sprite物件之間發生碰撞時，產生各不相同的效果；在播放背景音樂的同時，根據遊戲狀態同時播放多種音效；遊戲還具備了方便開發者調節遊戲難易度、拖曳遊戲主角的開發者後門；一個可以減慢或加快遊戲整體速度的時間系統。對於學習HTML5遊戲開發來說，Snail Bait遊戲是一個經典的案例：其技術覆蓋面廣泛，可以讓讀完整瞭解一個遊戲開發的各個方面；遊戲自身的可玩性強、難易度適中，既不會讓讀者在學習過程中感到枯燥無味，又不會讓讀者感覺到晦澀難懂。
作者沒有刻意對全書內容的先後順序進行編排，一切都是順著遊戲從構思到最終完善的漸進過程自然而然形成的。比如在實現遊戲主角的跳躍行為時，作者使用了兩章內容來講解，先實現一個基本的跳躍行為，然後逐步加入重力、時間等因素，最終實現一個真實的跳躍行為。在代碼的組織上，作者也頗費了一番工夫，按照每章內容講解完成時編寫的代碼來組織版本，從而使讀者在學習時能夠快速定位到本章內容的實現上，不至於淹沒在代碼中。沒有使用“需求分析、系統設計、程式設計實現”這種固定的軟體發展流程，作者使用的開發方法契合了個人和小團隊的實際開發模式需要，更有助於讀者在一邊學習技術的同時，一邊動手開發屬於自己的HTML5遊戲。
此外，作者在講述主要內容時，也簡明扼要地介紹了使用node.js部署遊戲、移動設備中的HTML5遊戲開發技術等內容。在代碼編寫方面，作者遵從低耦合的原則，使大部分代碼具備很強的通用性，能夠直接應用到讀者自己的HTML5遊戲中。
在本書的翻譯過程中，我們得到了機械工業出版社各位編輯及工作人員的熱情幫助，在此表示由衷的感謝。
譯者2016年9月
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。
