本書是HTML5游戲開發(fā)課程教材。全書分為6章,內容包括構建Canvas開發(fā)環(huán)境、Canvas基本功能、CreateJS函數(shù)庫、簡單效果案例、HTML5小型游戲、太空英雄大戰(zhàn)游戲。全書每章內容與實例緊密結合,并與極客學院網站視頻教學課程相結合,學生可以掃描二維碼進行視頻課程學習,有助于學生隨時理解知識、應用知識,使得視頻、書籍和課堂緊密配合,達到學以致用的目的。
全書內容簡單、基礎,案例豐富,講解清楚,配置開發(fā)環(huán)境簡單,老師易教,學生易學,開發(fā)成果有趣且易實現(xiàn)。
37個在線微課視頻配合圖書同步講解,難點不再有,步驟跟著走
2個小型+1個大型HTML5游戲開發(fā)案例,即學即練
附贈案例源代碼、PPT課件
陳惠紅,福建古田人,副教授,計算機技術類作家,信息系統(tǒng)項目管理師,美國信息系統(tǒng)項目管理協(xié)會成員,長期從事計算機應用的研究,研究方向為網站設計與制作、游戲開發(fā)與大數(shù)據(jù)處理等。曾在Oracle和華為等公司從事開發(fā)和管理工作,具有豐富的軟件項目開發(fā)、實施和管理經驗。
現(xiàn)在高校從事計算機應用技術專業(yè)、軟件技術專業(yè)的教學工作,主講Java語言、軟件工程、HTML5、游戲設計、面向對象程序設計等課程。擅長軟件系統(tǒng)構架和游戲設計,對基于HTML5的游戲開發(fā)方法有著深入研究。
開發(fā)準備篇
第1章 構建Canvas開發(fā)環(huán)境 2
1.1 網頁游戲概述 3
1.2 游戲開發(fā)流程 4
1.3 HTML5基礎知識 5
1.3.1 HTML5概述 5
1.3.2 Canvas簡介 6
1.4 開發(fā)環(huán)境配置 7
1.4.1 開發(fā)服務器 7
1.4.2 開發(fā)工具 7
1.4.3 瀏覽器 13
基礎知識篇
第2章 Canvas基本功能 16
2.1 Canvas標簽 17
2.1.1 定義Canvas標簽 17
2.1.2 理解Canvas坐標系 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 設置文字格式 47
2.3.3 設置文字對齊方式 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基礎 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 圍住神經貓游戲 143
5.1.1 介紹圍住神經貓游戲的玩法 143
5.1.2 使用CreateJS圍住神經貓 145
5.1.3 繪制圍住神經貓游戲頁面元素 146
5.1.4 添加圍住神經貓游戲監(jiān)聽事件 150
5.1.5 使用簡單的邏輯實現(xiàn)圍住神經貓游戲效果 151
5.1.6 實現(xiàn)圍住神經貓游戲完整效果 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 準備項目 167
6.2.1 設置HTML文件 167
6.2.2 Sprite Sheet文件 169
6.2.3 資源管理 171
6.2.4 創(chuà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)建分數(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)建游戲結束場景 186
6.7 創(chuàng)建游戲 188
6.7.1 設置游戲參數(shù) 188
6.7.2 初始化游戲 189
6.7.3 創(chuàng)建游戲Sprites 189
6.7.4 設計游戲控制 190
6.7.5 創(chuàng)建游戲循環(huán) 191
6.7.6 設置游戲更新功能 192
6.7.7 創(chuàng)建渲染函數(shù) 194
6.7.8 創(chuàng)建場景響應函數(shù) 195
6.7.9 檢測碰撞效果 196
6.7.10 創(chuàng)建檢測函數(shù) 197