HTML5遊戲開發實戰

《HTML5遊戲開發實戰》是2012年出版的圖書，作者是Makzan。

《HTML5遊戲開發實戰》是一本經典的HTML5遊戲開發教程，它清晰而全面地展示了如何使用最新的HTML5和CSS3標準來構建各種常見類型的遊戲。《HTML5遊戲開發實戰》實戰性非常強，圍繞紙牌遊戲、繪圖遊戲、物理遊戲和多人遊戲精心組織了6個富有趣味性和技術性的遊戲案例。如果動手實踐這些案例，不僅能掌握各種類型遊戲的開發思路和設計方法，而且還能掌握HTML5和CSS3技術中與遊戲開發相關的理論知識。

基本介紹

• 作者：Makzan
• ISBN：9787111391760
• 頁數：260
• 定價：59.00元
• 出版時間：2012-7
• 叢書：  華章程式設計師書庫

內容介紹

《HTML5遊戲開發實戰》共分9章，第1章介紹HTML5、CSS3，以及相關的JavaScript API 新功能；第2章通過使用DOM和jQuery創建傳統遊戲；第3章討論如何用DOM和CSS3來創建遊戲；第4章介紹在頁面如何通過Canvas來繪製遊戲並與之互動；第5章介紹如何在Canvas中繪製漸變效果和加入圖像；第6章使用Audio元素給遊戲添加聲音效果和背景音樂；第7章使用新的本地存儲API保存和恢復遊戲進度，進一步增強遊戲；第8章討論如何實現多人聯網玩遊戲；第9章講解如何把Box2D集成到Canvas遊戲中。

《HTML5遊戲開發實戰》以實例為導向，系統介紹網路遊戲開發技術，結合具體示例的操作步驟講解，淺顯易懂，適合網路遊戲開發人員、管理人員閱讀。

編輯推薦

《HTML5遊戲開發實戰》清晰而全面地展示了如何使用最新的HTML5和CSS3標準來構建紙牌、繪圖、物理等各種常見類型的遊戲。

目錄

審校者簡介

譯者序

前言

第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 jQuerycss函式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

第6章 給遊戲添加聲音效果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 初試WebSocketWeb應用程式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