HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧,在介紹HTML5 Canvas相關特性的同時,還通過游戲開發實例深入剖析了其內在原理,讓讀者不僅知其然,而且知其所以然。在本書中,除了介紹了HTML5 Canvas的基礎API之外,還重點闡 ...
HTML5 Canvas游戲開發實戰主要講解使用HTML5 Canvas來開發和設計各類常見游戲的思路和技巧,在介紹HTML5 Canvas相關特性的同時,還通過游戲開發實例深入剖析了其內在原理,讓讀者不僅知其然,而且知其所以然。在本書中,除了介紹了HTML5 Canvas的基礎API之外,還重點闡述瞭如何在JavaScript中運用面向對象的編程思想來進行游戲開發。 本書在介紹每個游戲開發的過程時,都會包括游戲分析、開發過程、代碼解析和小結等相關內容,以幫助讀者瞭解每種類型游戲開發的詳細步驟,讓讀者徹底掌握各種類型游戲的開發思想。最後,還通過數據對比分析,指導讀者提升程式的性能,寫出高效的代碼,從而開發出運行流暢的游戲。 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
![](https://images2018.cnblogs.com/blog/1353898/201804/1353898-20180424234229032-593996409.jpg)