HTML5遊戲開發實戰

《HTML5遊戲開發實戰》
基本資料
原書名：HTML5 Games Development by Example: Beginner's Guide
作者： (美)Makzan
譯者： 呂定平 陳升想
出版社：機械工業出版社
ISBN：9787111391760
上架時間：2012-7-27
出版日期：2012 年7月
開本：16開
頁碼：1
版次：1-1
所屬分類： 電腦

更多關於 》》》《HTML5遊戲開發實戰(華章程式員書庫) 》
內容簡介
書籍
電腦書籍
　　《html5遊戲開發實戰》是一本經典的html5遊戲開發教程，它清晰而全面地展示了如何使用最新的html5和css3標準來構建各種常見類型的遊戲。本書實戰性非常強，圍繞紙牌遊戲、繪圖遊戲、物理遊戲和多人遊戲精心組織了6個富有趣味性和技術性的遊戲案例。如果動手實踐這些案例，不僅能掌握各種類型遊戲的開發思路和設計方法，而且還能掌握html5和css3技術中與遊戲開發相關的理論知識。本書共分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遊戲開發實戰》
審校者簡介
譯者序
前言
第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

本圖書資訊來源於：中國互動出版網