HTML5 Canvas游戲開發(fā)實戰(zhàn) PDF掃描版

HTML5 Canvas游戲開發(fā)實戰(zhàn)主要講解使用HTML5 Canvas來開發(fā)和設(shè)計各類常見游戲的思路和技巧,在介紹HTML5 Canvas相關(guān)特性的同時,還通過游戲開發(fā)實例深入剖析了其內(nèi)在原理,讓讀者不僅知其然,而且知其所以然。在本書中,除了介紹了HTML5 Canvas的基礎(chǔ)API之外,還重點闡述了如何在JavaScript中運用面向?qū)ο蟮木幊趟枷雭磉M行游戲開發(fā)。

本書在介紹每個游戲開發(fā)的過程時,都會包括游戲分析、開發(fā)過程、代碼解析和小結(jié)等相關(guān)內(nèi)容,以幫助讀者了解每種類型游戲開發(fā)的詳細步驟,讓讀者徹底掌握各種類型游戲的開發(fā)思想。最后,還通過數(shù)據(jù)對比分析,指導(dǎo)讀者提升程序的性能,寫出高效的代碼,從而開發(fā)出運行流暢的游戲。

HTML5 Canvas游戲開發(fā)實戰(zhàn) 目錄:

前  言?

第一部分 準(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?

教程地址:HTML5 Canvas游戲開發(fā)實戰(zhàn) PDF掃描版

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容