html5 canvas遊戲開發實戰》
前 言
第一部分 準備工作篇
第1章 準備工作 / 2
1.1 html5介紹 / 2
1.1.1 什麼是html5 / 2
1.1.2 html5的新特性 / 2
1.2 canvas簡介 / 5
1.2.1 canvas標簽的曆史 / 5
1.2.2 canvas的定義和用法 / 6
1.2.3 如何使用canvas來繪圖 / 6
1.2.4 canvas的限製 / 7
1.3 開發與運行環境的準備 / 7
1.3.1 瀏覽器的支持 / 7
1.3.2 準備一個本地的服務器 / 8
1.4 開發工具的選擇 / 8
1.5 測試與上傳代碼 / 12
1.6 javascript中的麵嚮對象 / 13
1.6.1 類 / 13
1.6.2 靜態類 / 16
.1.6.3 繼承 / 16
1.7 小結 / 17
第二部分 基礎知識篇
第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 繪製復雜圖形 / 28
2.2.1 畫麯綫 / 28
2.2.2 利用clip在指定區域繪圖 / 30
2.2.3 繪製自定義圖形 / 31
2.3 繪製文本 / 32
2.3.1 繪製文字 / 32
2.3.2 文字設置 / 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 小結 / 49
第3章 canvas高級功能 / 50
3.1 變形 / 50
3.1.1 放大與縮小 / 50
3.1.2 平移 / 53
3.1.3 鏇轉 / 54
3.1.4 利用transform矩陣實現多樣化的變形 / 56
3.2 圖形的渲染 / 65
3.2.1 繪製顔色漸變效果的圖形 / 65
3.2.2 顔色閤成之globalcompositeoperation屬性 / 67
3.2.3 顔色反轉 / 69
3.2.4 灰度控製 / 70
3.2.5 陰影效果 / 71
3.3 自定義畫闆 / 72
3.3.1 畫闆的建立 / 72
3.3.2 canvas畫布的導齣功能 / 79
3.4 小結 / 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的原始繪圖函數進行繪圖 / 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 鼠標事件 / 103
4.6.2 循環事件 / 104
4.6.3 鍵盤事件 / 105
4.7 按鈕 / 106
4.8 動畫 / 108
4.9 小結 / 113
第三部分 開發實戰篇
第5章 從簡單做起—“石頭剪子布”遊戲 / 116
5.1 遊戲分析 / 116
5.2 必要的javascript知識 / 117
5.2.1 隨機數 / 117
5.2.2 條件分支 / 117
5.3 分層實現 / 117
5.4 各個層的基本功能 / 119
5.4.1 基本畫麵顯示 / 119
5.4.2 結果層的顯示 / 126
5.4.3 控製層的顯示 / 127
5.5 齣拳 / 129
5.6 結果判定 / 131
5.7 小結 / 137
第6章 開發“俄羅斯方塊”遊戲 / 138
6.1 遊戲分析 / 138
6.2 必要的javascript知識 / 138
6.3 遊戲標題畫麵顯示 / 139
6.4 嚮遊戲裏添加方塊 / 141
6.5 控製方塊的移動 / 152
6.5.1 鍵盤事件 / 152
6.5.2 觸屏事件 / 155
6.6 方塊的消除和得分的顯示 / 157
6.7 小結 / 160
第7章 開發“是男人就下一百層”遊戲 / 161
7.1 遊戲分析 / 161
7.2 遊戲標題畫麵顯示 / 161
7.3 讀取圖片與背景顯示 / 162
7.4 添加一個靜止的地闆 / 167
7.5 添加遊戲主角 / 170
7.5.1 讓遊戲主角齣現在畫麵上 / 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 遊戲數據的顯示 / 187
7.8 遊戲結束與重開 / 190
7.9 小結 / 192
第8章 開發射擊類遊戲 / 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 單發子彈 / 205
8.3.3 多發子彈 / 207
8.3.4 環形子彈 / 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 小結 / 228
第9章 開發物理遊戲 / 229
9.1 box2d簡介 / 229
9.2 box2dweb在lufylegend庫件中的使用 / 229
9.3 創建各種各樣的物體 / 234
9.3.1 矩形物體 / 234
9.3.2 圓形物體 / 237
9.3.3 多邊形物體 / 239
9.4 響應鼠標拖拽物體 / 242
9.5 關節（joint） / 243
9.5.1 距離關節（b2distancejointdef） / 243
9.5.2 鏇轉關節（b2revolutejointdef） / 245
9.5.3 滑輪關節（b2pulleyjointdef） / 247
9.5.4 移動關節（b2prismaticjoint） / 248
9.5.5 齒輪關節（b2gearjoint） / 250
9.5.6 懸掛關節（b2linejoint） / 252
9.5.7 焊接關節（b2weldjoint） / 253
9.5.8 鼠標關節（mouse joint） / 254
9.6 力 / 254
9.7 碰撞檢測 / 256
9.8 鏡頭移動 / 260
9.9 做一個簡單的物理遊戲 / 263
9.10 小結 / 267
第10章 開發網絡遊戲 / 268
10.1 http通信 / 268
10.1.1 如何實現http通信 / 268
10.1.2 http通信的弊端 / 275
10.2 socket通信 / 275
10.2.1 區分socket通信和http通信 / 276
10.2.2 服務器端 / 276
10.2.3 客戶端 / 281
10.3 利用websocket實現簡單的聊天室 / 283
10.4 做一款多人在綫的坦剋大戰 / 293
10.4.1 服務器 / 293
10.4.2 客戶端 / 293
10.5 小結 / 307
第四部分 技能提高篇
第11章 提高效率的分析 / 310
11.1 繪圖時使用小數的影響 / 310
11.2 drawimage和putimagedata的效率比較 / 311
11.3 區域更新和圖片大小對繪圖效率的影響 / 311
11.4 圖片格式對繪圖效率的影響 / 313
11.5 優化代碼以提高整體效率 / 314
11.5.1 使用位運算 / 314
11.5.2 少用math靜態類 / 316
11.5.3 優化算法 / 319
11.6 小結 / 322
· · · · · · (
收起)
