本書是HTML5游戲開發(fā)課程教材。全書分為6章,內(nèi)容包括構(gòu)建Canvas開發(fā)環(huán)境、Canvas基本功能、CreateJS函數(shù)庫、簡單效果案例、HTML5小型游戲、太空英雄大戰(zhàn)游戲。全書每章內(nèi)容與實例緊密結(jié)合,并與極客學(xué)院網(wǎng)站視頻教學(xué)課程相結(jié)合,學(xué)生可以掃描二維碼進(jìn)行視頻課程學(xué)習(xí),有助于學(xué)生隨時理解知識、應(yīng)用知識,使得視頻、書籍和課堂緊密配合,達(dá)到學(xué)以致用的目的。
全書內(nèi)容簡單、基礎(chǔ),案例豐富,講解清楚,配置開發(fā)環(huán)境簡單,老師易教,學(xué)生易學(xué),開發(fā)成果有趣且易實現(xiàn)。
37個在線微課視頻配合圖書同步講解,難點不再有,步驟跟著走
2個小型+1個大型HTML5游戲開發(fā)案例,即學(xué)即練
附贈案例源代碼、PPT課件
陳惠紅,福建古田人,副教授,計算機(jī)技術(shù)類作家,信息系統(tǒng)項目管理師,美國信息系統(tǒng)項目管理協(xié)會成員,長期從事計算機(jī)應(yīng)用的研究,研究方向為網(wǎng)站設(shè)計與制作、游戲開發(fā)與大數(shù)據(jù)處理等。曾在Oracle和華為等公司從事開發(fā)和管理工作,具有豐富的軟件項目開發(fā)、實施和管理經(jīng)驗。
現(xiàn)在高校從事計算機(jī)應(yīng)用技術(shù)專業(yè)、軟件技術(shù)專業(yè)的教學(xué)工作,主講Java語言、軟件工程、HTML5、游戲設(shè)計、面向?qū)ο蟪绦蛟O(shè)計等課程。擅長軟件系統(tǒng)構(gòu)架和游戲設(shè)計,對基于HTML5的游戲開發(fā)方法有著深入研究。
開發(fā)準(zhǔn)備篇
第1章 構(gòu)建Canvas開發(fā)環(huán)境 2
1.1 網(wǎng)頁游戲概述 3
1.2 游戲開發(fā)流程 4
1.3 HTML5基礎(chǔ)知識 5
1.3.1 HTML5概述 5
1.3.2 Canvas簡介 6
1.4 開發(fā)環(huán)境配置 7
1.4.1 開發(fā)服務(wù)器 7
1.4.2 開發(fā)工具 7
1.4.3 瀏覽器 13
基礎(chǔ)知識篇
第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è)置文字對齊方式 52
2.4 Canvas圖片 55
2.4.1 繪制drawImage圖片 55
2.4.2 使用getImageData()和putImageData()繪制圖片 57
2.4.3 使用createImageData()新建像素 59
第3章 CreateJS函數(shù)庫 62
3.1 初識CreateJS 63
3.1.1 下載CreateJS 63
3.1.2 介紹CreateJS 64
3.1.3 對比CreateJS與Canvas 65
3.2 CreateJS包簡介 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
案例實戰(zhàn)篇
第4章 簡單效果案例 122
4.1 幀動畫效果 123
4.2 跳舞蝴蝶效果 125
4.3 顏色拼圖游戲 127
4.4 圖像處理效果 130
4.5 處理跑跳效果 134
4.6 實現(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)貓游戲頁面元素 146
5.1.4 添加圍住神經(jīng)貓游戲監(jiān)聽事件 150
5.1.5 使用簡單的邏輯實現(xiàn)圍住神經(jīng)貓游戲效果 151
5.1.6 實現(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 游戲簡介 167
6.2 準(zhǔn)備項目 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)建對象池 183
6.6 創(chuàng)建場景 184
6.6.1 創(chuàng)建游戲菜單場景 184
6.6.2 創(chuàng)建游戲場景 185
6.6.3 創(chuàng)建游戲結(jié)束場景 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è)計游戲控制 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)建場景響應(yīng)函數(shù) 195
6.7.9 檢測碰撞效果 196
6.7.10 創(chuàng)建檢測函數(shù) 197