HTML5游戏开发案例教程

开发准备篇 第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 基础知识篇 第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 案例实战篇 第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信息