HTML5 Canvas游戲開發(fā)實戰(zhàn)：系統(tǒng)講解HTML 5 Canvas的基礎(chǔ)知識和高級技巧，以及如何利用它開發(fā)射擊游戲、物理游戲、網(wǎng)絡(luò)游戲、頁面游戲

前　　言
第一部分　準(zhǔn)備工作篇
第1章　準(zhǔn)備工作 / 2
1.1　HTML5介紹 / 2
1.1.1　什么是HTML5 / 2
1.1.2　HTML5的新特性 / 2
1.2　Canvas簡介 / 5
1.2.1　Canvas標(biāo)簽的歷史 / 5
1.2.2　Canvas的定義和用法 / 6
1.2.3　如何使用Canvas來繪圖 / 6
1.2.4　Canvas的限制 / 7
1.3　開發(fā)與運行環(huán)境的準(zhǔn)備 / 7
1.3.1　瀏覽器的支持 / 7
1.3.2　準(zhǔn)備一個本地的服務(wù)器 / 8
1.4　開發(fā)工具的選擇 / 8
1.5　測試與上傳代碼 / 12
1.6　JavaScript中的面向?qū)ο?/ 13
1.6.1　類 / 13
1.6.2　靜態(tài)類 / 16
1.6.3　繼承 / 16
1.7　小結(jié) / 17
第二部分　基礎(chǔ)知識篇
第2章　Canvas基本功能 / 20
2.1　繪制基本圖形 / 20
2.1.1　畫線 / 20
2.1.2　畫矩形 / 22
2.1.3　畫圓 / 24
2.1.4　畫圓角矩形 / 26
2.1.5　擦除Canvas畫板 / 27
2.2　繪制復(fù)雜圖形 / 28
2.2.1　畫曲線 / 28
2.2.2　利用clip在指定區(qū)域繪圖 / 30
2.2.3　繪制自定義圖形 / 31
2.3　繪制文本 / 32
2.3.1　繪制文字 / 32
2.3.2　文字設(shè)置 / 33
2.3.3　文字的對齊方式 / 38
2.4　圖片操作 / 41
2.4.1　利用drawImage繪制圖片 / 41
2.4.2　利用getImageData和putImageData繪制圖片 / 45
2.4.3　利用createImageData新建像素 / 47
2.5　小結(jié) / 49
第3章　Canvas高級功能 / 50
3.1　變形 / 50
3.1.1　放大與縮小 / 50
3.1.2　平移 / 53
3.1.3　旋轉(zhuǎn) / 54
3.1.4　利用transform矩陣實現(xiàn)多樣化的變形 / 56
3.2　圖形的渲染 / 65
3.2.1　繪制顏色漸變效果的圖形 / 65
3.2.2　顏色合成之globalCompositeOperation屬性 / 67
3.2.3　顏色反轉(zhuǎn) / 69
3.2.4　灰度控制 / 70
3.2.5　陰影效果 / 71
3.3　自定義畫板 / 72
3.3.1　畫板的建立 / 72
3.3.2　Canvas畫布的導(dǎo)出功能 / 79
3.4　小結(jié) / 81
第4章　lufylegend開源庫件 / 82
4.1　lufylegend庫件簡介 / 82
4.1.1　工作原理 / 82
4.1.2　庫件使用流程 / 83
4.2　圖片的加載與顯示 / 84
4.2.1　圖片顯示舉例 / 84
4.2.2　LBitmapData對象 / 86
4.2.3　LBitmap對象 / 87
4.3　層的概念 / 88
4.4　使用LGraphics對象繪圖 / 90
4.4.1　繪制矩形 / 90
4.4.2　繪制圓 / 91
4.4.3　繪制任意多邊形 / 92
4.4.4　使用Canvas的原始繪圖函數(shù)進行繪圖 / 93
4.4.5　使用LSprite對象進行繪圖 / 94
4.4.6　使用LGraphics對象繪制圖片 / 95
4.5　文本 / 101
4.5.1　文本屬性 / 101
4.5.2　輸入框 / 102
4.6　事件 / 103
4.6.1　鼠標(biāo)事件 / 103
4.6.2　循環(huán)事件 / 104
4.6.3　鍵盤事件 / 105
4.7　按鈕 / 106
4.8　動畫 / 108
4.9　小結(jié) / 113
第三部分　開發(fā)實戰(zhàn)篇
第5章　從簡單做起—“石頭剪子布”游戲 / 116
5.1　游戲分析 / 116
5.2　必要的JavaScript知識 / 117
5.2.1　隨機數(shù) / 117
5.2.2　條件分支 / 117
5.3　分層實現(xiàn) / 117
5.4　各個層的基本功能 / 119
5.4.1　基本畫面顯示 / 119
5.4.2　結(jié)果層的顯示 / 126
5.4.3　控制層的顯示 / 127
5.5　出拳 / 129
5.6　結(jié)果判定 / 131
5.7　小結(jié) / 137
第6章　開發(fā)“俄羅斯方塊”游戲 / 138
6.1　游戲分析 / 138
6.2　必要的JavaScript知識 / 138
6.3　游戲標(biāo)題畫面顯示 / 139
6.4　向游戲里添加方塊 / 141
6.5　控制方塊的移動 / 152
6.5.1　鍵盤事件 / 152
6.5.2　觸屏事件 / 155
6.6　方塊的消除和得分的顯示 / 157
6.7　小結(jié) / 160
第7章　開發(fā)“是男人就下一百層”游戲 / 161
7.1　游戲分析 / 161
7.2　游戲標(biāo)題畫面顯示 / 161
7.3　讀取圖片與背景顯示 / 162
7.4　添加一個靜止的地板 / 167
7.5　添加游戲主角 / 170
7.5.1　讓游戲主角出現(xiàn)在畫面上 / 170
7.5.2　通過鍵盤事件來控制游戲主角的移動 / 177
7.5.3　通過觸屏事件來控制游戲主角的移動 / 178
7.6　添加多種多樣的地板 / 179
7.6.1　會消失的地板 / 179
7.6.2　帶刺的地板 / 181
7.6.3　帶有彈性的地板 / 182
7.6.4　向左和向右移動的地板 / 184
7.7　游戲數(shù)據(jù)的顯示 / 187
7.8　游戲結(jié)束與重開 / 190
7.9　小結(jié) / 192
第8章　開發(fā)射擊類游戲 / 193
8.1　游戲分析 / 193
8.2　添加一架可控飛機 / 194
8.2.1　添加一個飛機類 / 194
8.2.2　可控飛機類 / 197
8.3　為飛機添加多樣化的子彈 / 203
8.3.1　建立一個子彈類 / 203
8.3.2　單發(fā)子彈 / 205
8.3.3　多發(fā)子彈 / 207
8.3.4　環(huán)形子彈 / 208
8.3.5　反向子彈 / 209
8.4　添加敵機 / 209
8.4.1　建立一個敵機類 / 210
8.4.2　建立一個敵機Boss類 / 214
8.5　碰撞檢測 / 217
8.5.1　飛機與子彈的碰撞 / 217
8.5.2　我機與敵機的碰撞 / 220
8.6　子彈的變更 / 221
8.6.1　建立一個彈藥類 / 222
8.6.2　彈藥與我機的碰撞 / 223
8.7　飛機生命值的顯示 / 225
8.8　游戲勝利與失敗判定 / 226
8.9　小結(jié) / 228
第9章　開發(fā)物理游戲 / 229
9.1　Box2D簡介 / 229
9.2　Box2dWeb在lufylegend庫件中的使用 / 229
9.3　創(chuàng)建各種各樣的物體 / 234
9.3.1　矩形物體 / 234
9.3.2　圓形物體 / 237
9.3.3　多邊形物體 / 239
9.4　響應(yīng)鼠標(biāo)拖拽物體 / 242
9.5　關(guān)節(jié)（Joint） / 243
9.5.1　距離關(guān)節(jié)（b2DistanceJointDef） / 243
9.5.2　旋轉(zhuǎn)關(guān)節(jié)（b2RevoluteJointDef）  / 245
9.5.3　滑輪關(guān)節(jié)（b2PulleyJointDef）  / 247
9.5.4　移動關(guān)節(jié)（b2PrismaticJoint）  / 248
9.5.5　齒輪關(guān)節(jié)（b2GearJoint）  / 250
9.5.6　懸掛關(guān)節(jié)（b2LineJoint） / 252
9.5.7　焊接關(guān)節(jié)（b2WeldJoint）  / 253
9.5.8　鼠標(biāo)關(guān)節(jié)（Mouse Joint） / 254
9.6　力 / 254
9.7　碰撞檢測 / 256
9.8　鏡頭移動 / 260
9.9　做一個簡單的物理游戲 / 263
9.10　小結(jié) / 267
第10章　開發(fā)網(wǎng)絡(luò)游戲 / 268
10.1　HTTP通信 / 268
10.1.1　如何實現(xiàn)HTTP通信 / 268
10.1.2　HTTP通信的弊端 / 275
10.2　Socket通信 / 275
10.2.1　區(qū)分Socket通信和HTTP通信 / 276
10.2.2　服務(wù)器端 / 276
10.2.3　客戶端 / 281
10.3　利用WebSocket實現(xiàn)簡單的聊天室 / 283
10.4　做一款多人在線的坦克大戰(zhàn) / 293
10.4.1　服務(wù)器 / 293
10.4.2　客戶端 / 293
10.5　小結(jié) / 307
第四部分　技能提高篇
第11章　提高效率的分析 / 310
11.1　繪圖時使用小數(shù)的影響 / 310
11.2　drawImage和putImageData的效率比較 / 311
11.3　區(qū)域更新和圖片大小對繪圖效率的影響 / 311
11.4　圖片格式對繪圖效率的影響 / 313
11.5　優(yōu)化代碼以提高整體效率 / 314
11.5.1　使用位運算 / 314
11.5.2　少用Math靜態(tài)類 / 316
11.5.3　優(yōu)化算法 / 319
11.6　小結(jié) / 322