开发准备篇 2
第1章 构建Canvas开发环境 2
1.1 网页游戏概述 3
1.2 游戏开发流程 4
1.3 HTML5基础知识 5
1.3.1 HTML5概述 5
1.3.2 Canvas简介 6
1.4 开发环境配置 7
1.4.1 开发服务器 7
1.4.2 开发工具 7
1.4.3 浏览器 13
基础知识篇 16
第2章 Canvas基本功能 16
2.1 Canvas标签 17
2.1.1 定义Canvas标签 17
2.1.2 理解Canvas坐标系 18
2.1.3 获取Canvas环境上下文 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函数库 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函数包 114
3.5.1 CSSPlugin 114
3.5.2 Ease 115
3.5.3 MotionGuidePlugin 117
3.5.4 Tween 119
案例实战篇 122
第4章 简单效果案例 122
4.1 帧动画效果 123
4.2 跳舞蝴蝶效果 125
4.3 颜色拼图游戏 127
4.4 图像处理效果 130
4.5 处理跑跳效果 134
4.6 实现炫酷效果 139
第5章 HTML5小型游戏 142
5.1 围住神经猫游戏 143
5.1.1 介绍围住神经猫游戏的玩法 143
5.1.2 使用CreateJS围住神经猫 145
5.1.3 绘制围住神经猫游戏页面元素 146
5.1.4 添加围住神经猫游戏监听事件 150
5.1.5 使用简单的逻辑实现围住神经猫游戏效果 151
5.1.6 实现围住神经猫游戏完整效果 153
5.2 看你有多色游戏 159
5.2.1 介绍看你有多色游戏 159
5.2.2 使用CreateJS开发看你有多色 161
5.2.3 制作看你有多色游戏 162
第6章 HTML5大型游戏——太空英雄大战 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 创建应用类 171
6.3 创建Sprites 174
6.3.1 创建英雄飞船 174
6.3.2 创建敌方飞船 176
6.3.3 创建子弹和爆炸效果 177
6.4 创建参谋中心（HUD） 179
6.4.1 创建HUD Sprite框架 179
6.4.2 创建HUD效果图 179
6.4.3 创建分数板 181
6.4.4 创建生命箱 182
6.5 创建对象池 183
6.6 创建场景 184
6.6.1 创建游戏菜单场景 184
6.6.2 创建游戏场景 185
6.6.3 创建游戏结束场景 186
6.7 创建游戏 188
6.7.1 设置游戏参数 188
6.7.2 初始化游戏 189
6.7.3 创建游戏Sprites 189
6.7.4 设计游戏控制 190
6.7.5 创建游戏循环 191
6.7.6 设置游戏更新功能 192
6.7.7 创建渲染函数 194
6.7.8 创建场景响应函数 195
6.7.9 检测碰撞效果 196
6.7.10 创建检测函数 197