審校者簡介
譯者序
前言
第1章　HTML5遊戲概述1
1.1　探索HTML5新功能1
1.1.1　Canvas2
1.1.2　音頻2
1.1.3　GeoLocation2
1.1.4　WebGL2
1.1.5　WebSocket3
1.1.6　本地存儲4
1.1.7　離綫應用程序4
1.2　探索CSS3新功能5
1.2.1　CSS3轉換5
1.2.2　CSS3變換7
1.2.3　CSS3動畫7
1.3　HTML5和CSS3新功能的更多細節8
1.4　創建HTML5遊戲的好處8
1.4.1　不需要第三方插件9
1.4.2　不需要插件就能支持iOS設備9
1.4.3　突破常規瀏覽器遊戲限製9
1.4.4　創建HTML5遊戲9
1.5　HTML5還能做些什麼11
1.5.1　《記憶配對》遊戲11
1.5.2　Sinuous11
1.5.3　小行星式書簽小程序12
1.5.4　Quake 212
1.5.5　蝌蚪聊天室13
1.5.6　Scrabb.ly13
1.5.7　Aves引擎14
1.6　瀏覽更多HTML5遊戲15
1.7　本書主要涉及哪些遊戲15
1.8　總結16
第2章　DOM遊戲開發入門17
2.1　準備開發工具18
2.2　為DOM遊戲準備HTML文檔18
2.2.1　新式HTML5 doctype聲明19
2.2.2　頁眉和頁腳20
2.2.3　JavaScript代碼最佳位置20
2.2.4　頁麵加載完後運行代碼20
2.3　設置《乒乓球》遊戲元素21
2.3.1　jQuery簡述23
2.3.2　jQuery選擇器基礎知識23
2.3.3　jQuery css函數24
2.3.4　使用jQuery的好處25
2.3.5　使用jQuery操縱DOM遊戲元素25
2.3.6　絕對位置的行為26
2.4　獲取玩傢的鍵盤輸入27
2.4.1　瞭解按鍵代碼29
2.4.2　讓常數更具可讀性29
2.4.3　用parseInt函數將字符串轉換為數字30
2.4.4　在控製颱麵闆中直接執行JavaScript錶達式31
2.4.5　檢查控製颱窗口32
2.5　支持玩傢多鍵盤同時輸入32
2.5.1　更好地聲明全局變量34
2.5.2　用setInterval函數創建JavaScript定時器35
2.5.3　理解遊戲主循環35
2.6　通過JavaScript間隔移動DOM對象35
2.7　開始碰撞檢測37
2.8　動態顯示HTML文本41
2.9　總結43
第3章　用CSS3構建《紙牌記憶配對》遊戲44
3.1　用CSS3轉換和變換模塊移動遊戲對象44
3.1.1　2D變換函數47
3.1.2　3D變換函數48
3.1.3　用CSS3轉換實現樣式間過渡49
3.2　創建翻牌效果50
3.2.1　使用jQuery toggleClass函數切換類 52
3.2.2　通過z-index控製重疊元素的可見性53
3.2.3　介紹CSS perspective屬性53
3.2.4　介紹背麵可見性54
3.3　創建《紙牌記憶配對》遊戲55
3.3.1　下載紙牌精靈錶圖像55
3.3.2　設置遊戲開發環境56
3.3.3　使用jQuery復製DOM元素61
3.3.4　使用jQuery的子節點過濾器選擇首個子元素61
3.3.5　垂直對齊DOM元素62
3.3.6　通過背景位置來使用CSS精靈62
3.4　給配對遊戲添加遊戲邏輯63
3.4.1　在CSS轉換完後執行代碼66
3.4.2　翻牌後延遲代碼的執行67
3.4.3　在JavaScript中隨機化數組67
3.4.4　通過HTML5自定義數據屬性保存內部自定義數據68
3.4.5　用JQuery訪問自定義數據屬性68
3.4.6　製作其他紙牌遊戲70
3.5　在遊戲中嵌入Web字體70
3.6　總結73
第4章　用Canvas和繪圖API構建《解題》遊戲74
4.1　介紹HTML5 Canvas元素75
4.2　在Canvas中繪製圓形75
4.2.1　當Web瀏覽器不支持Canvas時的反饋信息77
4.2.2　用Canvas的arc函數繪製圓和圖形78
4.2.3　把角度轉換為弧度78
4.2.4　在Canvas中執行路徑繪製的操作82
4.2.5　在切換路徑樣式時先調用BeginPath82
4.2.6　關閉路徑83
4.2.7　將畫圓功能封裝成函數83
4.2.8　在JavaScript中生成隨機數85
4.2.9　保存圓的位置85
4.3　在Canvas中畫綫87
4.4　通過Canvas中的鼠標事件與繪製對象交互90
4.4.1　在Canvas元素中獲取鼠標位置93
4.4.2　在Canvas中檢測鼠標事件是否發生在圓上93
4.4.3　遊戲主循環95
4.4.4　清除Canvas95
4.5　在Canvas中檢測綫的交點96
4.6　製作《解題》遊戲100
4.6.1　定義關卡數據105
4.6.2　判斷是否過關105
4.6.3　顯示當前關卡和完成進度105
4.7　總結106
第5章　構建大師級Canvas遊戲107
5.1　用漸變色來填充圖形108
5.1.1　給漸變添加色標109
5.1.2　填充徑嚮漸變色110
5.2　在Canvas中繪製文本112
5.3　在Canvas中繪製圖像116
5.3.1　使用drawImage函數120
5.3.2　裝點Canvas遊戲121
5.4　在Canvas中播放精靈錶動畫123
5.5　創建多層Canvas遊戲127
5.6　總結132
第６章　給遊戲添加聲音效果134
6.1　給PLAY按鈕添加聲音效果135
6.1.1　定義audio元素137
6.1.2　播放聲音138
6.1.3　暫停聲音138
6.1.4　調整音量大小139
6.1.5　使用jQuery 的hover事件139
6.1.6　創建Ogg格式的音頻以支持Mozilla Firefox140
6.1.7　不同Web瀏覽器所支持的音頻格式141
6.2　構建迷你鋼琴音樂遊戲141
6.2.1　在HTML5遊戲中創建場景144
6.2.2　讓音樂播放可視化144
6.2.3　為音樂遊戲選擇正確的歌麯149
6.2.4　存儲和提取歌麯關卡數據149
6.2.5　獲取遊戲的流逝時間150
6.2.6　創建音樂點150
6.2.7　移動音樂點151
6.3　將PLAY按鈕與音樂遊戲場景鏈接起來152
6.4　構建鍵盤驅動的迷你鋼琴音樂遊戲155
6.4.1　通過按鍵來擊打三條音樂綫156
6.4.2　判斷按鍵是否擊中音樂點157
6.4.3　通過給定索引將元素從數組中移除158
6.5　給迷你鋼琴遊戲添加額外的功能159
6.5.1　 根據玩傢的錶現而調整音樂音量159
6.5.2　從遊戲中刪除音樂點161
6.5.3　保存最近5個音樂點的成功率計數162
6.5.4　記錄音符來得到關卡數據162
6.6　音樂播放完後處理audio事件164
6.7　總結166
第7章　利用本地存儲技術保存遊戲數據167
7.1　使用HTML5本地存儲技術保存數據168
7.1.1　創建遊戲結束對話框168
7.1.2　在瀏覽器中保存成績171
7.1.3　通過本地存儲技術保存和加載數據172
7.1.4　本地存儲隻保存字符串值173
7.1.5　將本地存儲對象看做關聯數組173
7.2　在本地存儲中保存對象174
7.2.1　在JavaScript中獲取當前日期和時間177
7.2.2　使用原生JSON將對象編碼成字符串178
7.2.3　從JSON字符串中加載所保存的對象178
7.2.4　在控製颱窗口中檢測本地存儲179
7.3　用一種漂亮的彩帶效果來告訴玩傢破記錄瞭180
7.4　保存整個遊戲的進度183
7.4.1　保存遊戲進度183
7.4.2　從本地存儲中刪除記錄186
7.4.3　在JavaScript中復製數組186
7.4.4　恢復遊戲進度187
7.5　總結189
第8章　利用WebSocket構建多人 遊戲—《我畫你猜》190
8.1　初試WebSocket Web應用程序190
8.2　安裝WebSocket服務器192
8.2.1　安裝Node.JS WebSocket服務器193
8.2.2　創建廣播連接數的WebSocket服務器194
8.2.3　初始化WebSocket服務器195
8.2.4　在服務器端監聽連接事件195
8.2.5　在服務器端獲取已連接的客戶端數196
8.2.6　嚮所有已連接的瀏覽器廣播消息196
8.2.7　創建客戶端來連接WebSocket服務器並獲取總連接數196
8.2.8　建立WebSocket連接198
8.2.9　WebSocket客戶端事件198
8.3　使用WebSocket構建聊天室199
8.3.1　嚮服務器發送消息199
8.3.2　從客戶端發送消息到服務器201
8.3.3　在服務器端接收消息201
8.4　通過在服務端廣播接收到的消息來創建聊天室202
8.5　使用Canvas和WebSocket製作共享繪圖闆205
8.5.1　構建本地繪圖闆205
8.5.2　廣播繪圖數據給所有已連接的瀏覽器208
8.5.3　定義用於在客戶端與服務器之間進行通信的數據對象211
8.5.4　將畫綫數據打包成JSON以便於廣播211
8.5.5　再現從其他客戶端接收到的畫綫數據212
8.6　構建多人遊戲：《我畫你猜》212
8.6.1　控製多人遊戲的遊戲流程217
8.6.2　在服務器端羅列齣所有已連接客戶端218
8.6.3　在服務器端發送消息給指定的連接218
8.6.4　改進現有遊戲218
8.7　用CSS裝點《我畫你猜》遊戲219
8.8　總結221
第9章　用Box2D和Canvas構建物理類汽車遊戲222
9.1　安裝Box2d JavaScript庫223
9.1.1　用b2World創建新的物理世界對象226
9.1.2　用b2AABB定義物理邊界226
9.1.3　給物理世界設置重力226
9.1.4　設置 Box2D忽略休眠物體227
9.2　在物理世界中創建靜態地麵227
9.2.1　創建物體形狀228
9.2.2　創建物理物體228
9.3　在Canvas上繪製物理世界 229
9.4　在物理世界裏創建動態的長方形232
9.5　推進物理世界的時間233
9.6　給遊戲安裝車輪234
9.7　創建物理汽車235
9.8　通過鍵盤給汽車施加動力237
9.8.1　嚮物體施加動力238
9.8.2　理解ApplyForce與ApplyImpulse之間的不同點239
9.8.3　給遊戲環境添加坡道239
9.9　在Box2D世界檢測碰撞240
9.10　重啓遊戲242
9.11　讓遊戲支持關卡244
9.12　為Box2D繪製圖形輪廓247
9.12.1　使用形狀和物體的userData屬性250
9.12.2　根據物理物體的狀態來繪製每一幀圖像250
9.12.3　在Canvas中鏇轉和翻轉圖片251
9.13　給遊戲添加裝飾，讓遊戲更具趣味性251
9.13.1　用燃料的限製加速256
9.13.2　用CSS3進度條顯示剩餘燃料256
9.14　總結257
9.14.1　HTML5 遊戲引擎258
9.14.2　遊戲精靈以及貼圖258
9.14.3　聲音效果258
附錄　突擊測驗答案259
· · · · · · (收起)