本書是HTML5游戲開發(fā)課程教材。全書分為6章,內(nèi)容包括構(gòu)建Canvas開發(fā)環(huán)境、Canvas基本功能、CreateJS函數(shù)庫(kù)、簡(jiǎn)單效果案例、HTML5小型游戲、太空英雄大戰(zhàn)游戲。全書每章內(nèi)容與實(shí)例緊密結(jié)合,并與極客學(xué)院網(wǎng)站視頻教學(xué)課程相結(jié)合,學(xué)生可以掃描二維碼進(jìn)行視頻課程學(xué)習(xí),有助于學(xué)生隨時(shí)理解知識(shí)、應(yīng)用知識(shí),使得視頻、書籍和課堂緊密配合,達(dá)到學(xué)以致用的目的。
全書內(nèi)容簡(jiǎn)單、基礎(chǔ),案例豐富,講解清楚,配置開發(fā)環(huán)境簡(jiǎn)單,老師易教,學(xué)生易學(xué),開發(fā)成果有趣且易實(shí)現(xiàn)。
37個(gè)在線微課視頻配合圖書同步講解,難點(diǎn)不再有,步驟跟著走
2個(gè)小型+1個(gè)大型HTML5游戲開發(fā)案例,即學(xué)即練
附贈(zèng)案例源代碼、PPT課件
陳惠紅,福建古田人,副教授,計(jì)算機(jī)技術(shù)類作家,信息系統(tǒng)項(xiàng)目管理師,美國(guó)信息系統(tǒng)項(xiàng)目管理協(xié)會(huì)成員,長(zhǎng)期從事計(jì)算機(jī)應(yīng)用的研究,研究方向?yàn)榫W(wǎng)站設(shè)計(jì)與制作、游戲開發(fā)與大數(shù)據(jù)處理等。曾在Oracle和華為等公司從事開發(fā)和管理工作,具有豐富的軟件項(xiàng)目開發(fā)、實(shí)施和管理經(jīng)驗(yàn)。
現(xiàn)在高校從事計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)、軟件技術(shù)專業(yè)的教學(xué)工作,主講Java語(yǔ)言、軟件工程、HTML5、游戲設(shè)計(jì)、面向?qū)ο蟪绦蛟O(shè)計(jì)等課程。擅長(zhǎng)軟件系統(tǒng)構(gòu)架和游戲設(shè)計(jì),對(duì)基于HTML5的游戲開發(fā)方法有著深入研究。
開發(fā)準(zhǔn)備篇
第1章 構(gòu)建Canvas開發(fā)環(huán)境 2
1.1 網(wǎng)頁(yè)游戲概述 3
1.2 游戲開發(fā)流程 4
1.3 HTML5基礎(chǔ)知識(shí) 5
1.3.1 HTML5概述 5
1.3.2 Canvas簡(jiǎn)介 6
1.4 開發(fā)環(huán)境配置 7
1.4.1 開發(fā)服務(wù)器 7
1.4.2 開發(fā)工具 7
1.4.3 瀏覽器 13
基礎(chǔ)知識(shí)篇
第2章 Canvas基本功能 16
2.1 Canvas標(biāo)簽 17
2.1.1 定義Canvas標(biāo)簽 17
2.1.2 理解Canvas坐標(biāo)系 18
2.1.3 獲取Canvas環(huán)境上下文 19
2.2 Canvas圖形 20
2.2.1 繪制Canvas路徑 20
2.2.2 繪制Canvas變形圖形 31
2.2.3 處理Canvas圖形 40
2.3 Canvas文本 45
2.3.1 繪制文字 45
2.3.2 設(shè)置文字格式 47
2.3.3 設(shè)置文字對(duì)齊方式 52
2.4 Canvas圖片 55
2.4.1 繪制drawImage圖片 55
2.4.2 使用getImageData()和putImageData()繪制圖片 57
2.4.3 使用createImageData()新建像素 59
第3章 CreateJS函數(shù)庫(kù) 62
3.1 初識(shí)CreateJS 63
3.1.1 下載CreateJS 63
3.1.2 介紹CreateJS 64
3.1.3 對(duì)比CreateJS與Canvas 65
3.2 CreateJS包簡(jiǎn)介 69
3.2.1 EaselJS包 69
3.2.2 TweenJS包 70
3.2.3 SoundJS包 72
3.2.4 PreLoadJS包 73
3.3 EaselJS基礎(chǔ) 75
3.3.1 EaselJS容器 75
3.3.2 EaselJS繪圖 82
3.3.3 EaselJS事件 92
3.4 CreateJS控件 101
3.4.1 Text 101
3.4.2 BitMap 103
3.4.3 MovieClip 106
3.4.4 Sprite 108
3.4.5 DOMElement 111
3.5 Tween函數(shù)包 114
3.5.1 CSSPlugin 114
3.5.2 Ease 115
3.5.3 MotionGuidePlugin 117
3.5.4 Tween 119
案例實(shí)戰(zhàn)篇
第4章 簡(jiǎn)單效果案例 122
4.1 幀動(dòng)畫效果 123
4.2 跳舞蝴蝶效果 125
4.3 顏色拼圖游戲 127
4.4 圖像處理效果 130
4.5 處理跑跳效果 134
4.6 實(shí)現(xiàn)炫酷效果 139
第5章 HTML5小型游戲 142
5.1 圍住神經(jīng)貓游戲 143
5.1.1 介紹圍住神經(jīng)貓游戲的玩法 143
5.1.2 使用CreateJS圍住神經(jīng)貓 145
5.1.3 繪制圍住神經(jīng)貓游戲頁(yè)面元素 146
5.1.4 添加圍住神經(jīng)貓游戲監(jiān)聽事件 150
5.1.5 使用簡(jiǎn)單的邏輯實(shí)現(xiàn)圍住神經(jīng)貓游戲效果 151
5.1.6 實(shí)現(xiàn)圍住神經(jīng)貓游戲完整效果 153
5.2 看你有多色游戲 159
5.2.1 介紹看你有多色游戲 159
5.2.2 使用CreateJS開發(fā)看你有多色 161
5.2.3 制作看你有多色游戲 162
第6章 HTML5大型游戲——太空英雄大戰(zhàn) 166
6.1 游戲簡(jiǎn)介 167
6.2 準(zhǔn)備項(xiàng)目 167
6.2.1 設(shè)置HTML文件 167
6.2.2 Sprite Sheet文件 169
6.2.3 資源管理 171
6.2.4 創(chuàng)建應(yīng)用類 171
6.3 創(chuàng)建Sprites 174
6.3.1 創(chuàng)建英雄飛船 174
6.3.2 創(chuàng)建敵方飛船 176
6.3.3 創(chuàng)建子彈和爆炸效果 177
6.4 創(chuàng)建參謀中心(HUD) 179
6.4.1 創(chuàng)建HUD Sprite框架 179
6.4.2 創(chuàng)建HUD效果圖 179
6.4.3 創(chuàng)建分?jǐn)?shù)板 181
6.4.4 創(chuàng)建生命箱 182
6.5 創(chuàng)建對(duì)象池 183
6.6 創(chuàng)建場(chǎng)景 184
6.6.1 創(chuàng)建游戲菜單場(chǎng)景 184
6.6.2 創(chuàng)建游戲場(chǎng)景 185
6.6.3 創(chuàng)建游戲結(jié)束場(chǎng)景 186
6.7 創(chuàng)建游戲 188
6.7.1 設(shè)置游戲參數(shù) 188
6.7.2 初始化游戲 189
6.7.3 創(chuàng)建游戲Sprites 189
6.7.4 設(shè)計(jì)游戲控制 190
6.7.5 創(chuàng)建游戲循環(huán) 191
6.7.6 設(shè)置游戲更新功能 192
6.7.7 創(chuàng)建渲染函數(shù) 194
6.7.8 創(chuàng)建場(chǎng)景響應(yīng)函數(shù) 195
6.7.9 檢測(cè)碰撞效果 196
6.7.10 創(chuàng)建檢測(cè)函數(shù) 197