HTML5 Canvas游戲開發實戰 PDF掃描版

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?
教程地址: HTML5 Canvas游戲開發實戰 PDF掃描版

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/369985.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/369985.shtml
英文地址,請注明出處:http://en.pswp.cn/news/369985.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

多線程之創建線程

在Java中,線程能區分兩種不同類型的線程:前臺線程和后臺線程。這兩者的區別就是:應用程序必須運行完所有的前臺線程才可以退出;而對于后臺線程,應用程序則可以不考慮其是否已經運行完畢而直接退出,所有的后…

阿 Q 的停車場

問題描述 剛拿到駕照的 KJ 總喜歡開著車到處兜風,玩完了再把車停到阿 Q 的停車場里,雖然 她對自己停車的水平很有信心,但她還是不放心其他人的停車水平,尤其是 Kelukin。于是, 她每次都把自己的愛車停在距離其它車最遠…

css3圖片垂直居中

圖片相對父元素垂直居中, css3屬性給父級元素設置 display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; 需要注意的是: 父級元素要有確定的高度!

聲明式的理解【gpt】

一 MyBatis采用了聲明式語法來進行SQL映射配置【mybatis聲明式】 MyBatis是一款優秀的持久層框架,支持自定義SQL、存儲過程以及高級映射,使得開發人員能夠專注于SQL本身而不是數據庫訪問。MyBatis提供了兩種配置方式:XML配置和注解配置&…

網絡局域網看不到其它計算機,局域網中看不到其它計算機怎么辦

通過網上鄰居或查看網絡計算機時,看不到局域網中其它計算機,這是怎么回事呢?下面是學習啦小編給大家整理的一些有關看不到局域網中其它計算機的解決方法,希望對大家有幫助!局域網中看不到其它計算機的解決方法打開“控制面板”-“網絡和Inte…

iconfont 圖標轉為字體_iconfont字體圖標的使用方法--超簡單!

我之前因為項目用bootstrap比較多,所以使用font awesome字體圖標比較多,后來接觸到了iconfont,發現想要的什么圖標都有,還可以自定義圖標,非常強大!之前看了一波教程,覺得繁瑣,自己弄明白后感覺如此簡單,做了這么個簡單教程,直接上圖,簡單粗暴,避免新手走彎路,這里講解的默認是…

一罐來統治所有人

跳下內存通道 早在1998年,當我是一名C / C 開發人員時,嘗試使用Java時,有關該語言的一些內容對我來說就顯得有些惱火了。 我記得很擔心這些 為什么沒有合適的編輯器呢? C / C 有很多。 我為Java擁有的只是舊的記事本。 當我想要…

Django集合Ueditor

語言版本環境:python3.6 1、win安裝步驟: 1 git下載源碼https://github.com/zhangfisher/DjangoUeditor 2 解壓DjangoUeditor3-master.tar 3 cd C:\Users\fj\Desktop\DjangoUeditor3-master 4 python setup.py install 官方建議使用pip install Djang…

計算機二級高級應用考題,2016計算機二級MSOFFICE高級應用考試真題

2016計算機二級MSOFFICE高級應用考試真題離2016上半年的計算機等級考試只有一個多月了,為了幫助大家盡快考試過關,小編整理了計算機二級office考試題,希望能幫助到大家!(1)下列敘述中正確的是A)一個算法的空間復雜度大,則其時間復…

ANTLR –語義謂詞

用antlr解析簡單的語法很簡單 。 您要做的就是使用正則表達式描述您的語言,并讓antlr生成詞法分析器和解析器。 解析大型或復雜的語言有時會需要更多,因為僅使用正則表達式描述它們是困難的,甚至是不可能的。 語義謂詞是在語法內部編寫的Jav…

python輸入一個數組輸出24進制式的時間_4.4 用于數組的文件輸入輸出 線性代數...

Numpy能夠讀寫磁盤上的文本數據或二進制數據。這一小節只討論Numpy的內置二進制格式,因為更多的用戶會使用pandas或其它工具加載文本或表格數據(見第6章)。np.save和np.load是讀寫磁盤數組數據的兩個主要函數。默認情況下,數組是以未壓縮的原始二進制格式…

DBMS-數據庫設計與E-R模型:E-R模型、約束、E-R圖、E-R擴展特性、E-R圖轉換為關系模式、UML建模...

設計過程概覽 1. 設計階段 最初階段:刻畫未來數據庫用戶的數據需求,產品為用戶需求規格說明; 概念設計階段(conceptual-design phase):(關注描述抽象數據及其聯系,通常使用實體-聯系…

tooltip.css-2.0文檔

tooltip.css 純CSS鼠標提示工具。 v. 2.0.0 更新日期&#xff1a;2018.4.12 預覽DEMO。 安裝&#xff1a; 只需在頁面中引入"tooltip.css"或“tooltip.min.css”文件即可。 如&#xff1a; <link rel"stylesheet" href"css/tooltip.css"…

Java虛擬機:如何判定哪些對象可回收?

版權聲明&#xff1a;本文為博主原創文章&#xff0c;轉載請注明出處&#xff0c;歡迎交流學習&#xff01; 在堆內存中存放著Java程序中幾乎所有的對象實例&#xff0c;堆內存的容量是有限的&#xff0c;Java虛擬機會對堆內存進行管理&#xff0c;回收已經“死去”的對象&…

html標簽object和embed,html標簽object和embed的區別

object和embed的區別The code in bold above is the actual code that you need to place in your page to embed a FusionCharts chart.In the above code, weveused and tags to embed the 3D Column Chart (Column3D.swf) within the HTML page.used &dataUrlData.xml u…

Apache Apollo REST API

Apache Apollo是新一代&#xff0c;高性能&#xff0c;多協議的消息傳遞代理&#xff0c;它是從頭開始構建的&#xff0c;可以替代ActiveMQ5.x。 我過去曾在博客上發表過文章 &#xff08;第一部分已經與第二部分一起發布了&#xff09;。 Apollo的非阻塞異步體系結構使其速度…

bzoj1588 [HNOI2002]營業額統計

1588: [HNOI2002]營業額統計 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 17931 Solved: 7391[Submit][Status][Discuss]Description 營業額統計 Tiger最近被公司升任為營業部經理&#xff0c;他上任后接受公司交給的第一項任務便是統計并分析公司成立以來的營業情況。 T…

python管道通信_Python進程通信之匿名管道實例講解

匿名管道管道是一個單向通道,有點類似共享內存緩存.管道有兩端,包括輸入端和輸出端.對于一個進程的而言,它只能看到管道一端,即要么是輸入端要么是輸出端.os.pipe()返回2個文件描述符(r, w),表示可讀的和可寫的.示例代碼如下:復制代碼 代碼如下:#!/usr/bin/pythonimport timeim…

css3中的box-sizing屬性的使用

box-sizing屬性用來定義元素的width和height所表示的區域,該屬性一般有三種值&#xff1a;content-box、border-box、inherit。 其中inherit表示box-sizing的值應該從父元素繼承。 content-box和border-box的主要區別就是元素的width和height的值包不包括border、padding這兩…

ES6擴展運算符...進行的數組刪除

今天寫了按照React小書寫了Reducer&#xff0c;發現基礎真是太重要了&#xff0c;所有關于上層建筑的細節都需要回到下層細節中去尋找&#xff0c;而且現在的基礎也由ES3變成了ES6了。 const ADD_USER "ADD_USER" const DELETE_USER "DELETE_USER" const…