HTML5游戏编程核心技术与实战

目　录

第1章　游戏和HTML5初探　1
1.1　网页游戏和HTML5　1
1.1.1　网页游戏简介　1
1.1.2　HTML5简介　2
1.1.3　HTML5浏览器工具　4
1.1.4　HTML5开发工具　6
1.2　HTML5新特性初探　10
1.2.1　canvas元素　10
1.2.2　WebGL　12
1.2.3　多媒体元素　13
1.2.4　地理信息服务　14
1.2.5　本地存储　15
1.2.6　Web sockets网络通信　16
1.2.7　Web Worker多线程　16
1.3　小结　18

第2章　Canvas绘图　19
2.1　基本知识　19
2.1.1　创建canvas　20
2.1.2　理解canvas坐标系　20
2.1.3　获取canvas环境上下文　20
2.2　图形API　21
2.2.1　理解路径　21
2.2.2　路径操作API　21
2.2.3　绘制线条　22
2.2.4　绘制矩形　23
2.2.5　绘制圆弧　24
2.2.6　绘制贝塞尔曲线　25
2.2.7　线条属性　27
2.2.8　线条颜色　28
2.2.9　填充　28
2.2.10　绘图状态　31
2.3　图像API　32
2.3.1　使用canvas绘制图像　32
2.3.2　案例：放大镜　33
2.3.3　案例：帧动画实现　34
2.3.4　像素操作　36
2.3.5　案例：转换灰度图　37
2.3.6　案例：浮雕效果　39
2.4　坐标变换　40
2.5　绘制文字　42
2.6　其他全局属性　44
2.7　案例：《你画我猜》　45
2.7.1　UI界面设计　45
2.7.2　定义画板对象　47
2.7.3　初始化画笔选项区　47
2.7.4　实现画板绘制　49
2.7.5　整合代码　50
2.8　小结　54

第3章　多媒体元素　55
3.1　多媒体基本知识　55
3.1.1　多媒体容器　55
3.1.2　音视频解码器　56
3.2　使用多媒体元素　57
3.2.1　属性　58
3.2.2　方法　59
3.2.3　事件　60
3.2.4　多媒体元素的限制　61
3.3　案例：本地音乐播放器　61
3.3.1　UI界面设计　61
3.3.2　创建Player对象　62
3.3.3　添加本地文件　65
3.3.4　实现播放进度条　66
3.3.5　实现播放功能　67
3.3.6　整合代码　68
3.4　音频处理高级技巧　74
3.4.1　Web Audio API简介　74
3.4.2　Audio上下文　74
3.4.3　加载和播放音频　76
3.4.4　调节音频增益　77
3.4.5　混合多个音频　79
3.4.6　3D音效　82
3.4.7　显示声音波形　83
3.5　小结　86

第4章　制作2D游戏引擎　87
4.1　理解游戏循环　87
4.2　渲染引擎实现　88
4.2.1　游戏引擎介绍　88
4.2.2　建立游戏主循环框架　89
4.2.3　控制游戏帧数　92
4.2.4　游戏监听器　94
4.2.5　创建游戏主窗口　97
4.2.6　创建游戏精灵　104
4.2.7　案例：屏幕弹球　112
4.2.8　游戏精灵帧动画　115
4.2.9　加载游戏资源　131
4.2.10　游戏IO控制　142
4.3　使用引擎构建游戏实例　144
4.4　小结　152

第5章　网络通信基础　153
5.1　网络协议基础　153
5.1.1　通信协议　153
5.1.2　TCP/IP　153
5.1.3　HTTP　154
5.1.4　套接字　156
5.2　服务器端框架Node.js基础　157
5.2.1　简介　157
5.2.2　安装　158
5.2.3　应用　158
5.2.4　案例：简单的Web服务器　159
5.3　Web sockets基础　162
5.3.1　简介　162
5.3.2　应用　162
5.3.3　案例：基于socket.io.js框架的聊天室　164
5.4　小结　167

第6章　游戏常用算法　168
6.1　追踪算法　168
6.2　碰撞检测算法　172
6.2.1　地图格子算法　172
6.2.2　包围盒检测算法　173
6.2.3　像素检测算法　183
6.3　路径搜索算法　186
6.3.1　随机迷宫算法　186
6.3.2　A*算法　189
6.4　有限状态机　194
6.4.1　原理　194
6.4.2　实现　195
6.4.3　案例：勤劳的蚂蚁　198
6.5　粒子系统　206
6.6　小结　210

第7章　Box2D引擎和物理游戏　211
7.1　Box2D基础　211
7.1.1　安装Box2D库　211
7.1.2　Box2D中的基本概念　212
7.1.3　创建Box2D物理世界　213
7.1.4　添加物体到空间中　213
7.1.5　渲染Box2D世界　215
7.2　案例：结合渲染引擎渲染Box2D世界　217
7.2.1　建立游戏框架，初始化Box2D世界　217
7.2.2　更新Box2D物理世界　219
7.2.3　创建Box2D物理精灵　219
7.3　小结　222

第8章　使用CSS3开发游戏　223
8.1　CSS历史　223
8.2　CSS3选择器　224
8.2.1　属性选择器　224
8.2.2　结构伪类选择器　224
8.2.3　target伪类选择器　229
8.2.4　UI元素状态伪类选择器　230
8.2.5　反向伪类选择器　230
8.2.6　通用兄弟元素选择器　230
8.3　CSS3动画　231
8.3.1　变形　231
8.3.2　过渡　234
8.3.3　案例：手风琴效果　235
8.3.4　动画　237
8.3.5　案例：沿路径移动的小球　239
8.3.6　案例：地板上弹跳的小球　241
8.4　案例：俄罗斯方块　244
8.4.1　游戏规则和游戏UI　244
8.4.2　分析游戏　246
8.4.3　游戏实现　250
8.5　小结　255

第9章　编程实战之太空战机　256
9.1　创建主框架　256
9.2　创建开始场景　259
9.3　创建运行场景　261
9.3.1　创建视差滚动背景　261
9.3.2　创建射击类　264
9.3.3　创建玩家类　268
9.3.4　创建敌机类　273
9.3.5　创建子弹类　275
9.3.6　游戏配置实现　277
9.3.7　运行场景实现　282
9.4　创建结束场景　285
9.5　小结　286

第10章　编程实战之《你画我猜》　287
10.1　了解游戏逻辑　287
10.2　UI界面设计　288
10.3　登录到服务器的实现　289
10.3.1　创建简单的游戏服务器对象　290
10.3.2　创建服务客户端对象　291
10.3.3　创建客户端对象　293
10.4　画板对象实现　295
10.5　游戏数据定义　299
10.6　显示所有玩家　301
10.7　发送文本消息　303
10.8　游戏逻辑实现　304
10.9　最终实现　305
10.9.1　主页面最终实现　305
10.9.2　客户端最终实现　307
10.9.3　画板最终实现　312
10.9.4　游戏服务器最终实现　315
10.9.5　游戏配置最终实现　319
10.9.6　服务客户端最终实现　320
10.10　小结　322

第11章　编程实战之《疯狂的小鸟》　323
11.1　建立游戏主界面　323
11.2　创建B2Sprite类　328
11.3　创建Bird类　330
11.3.1　Bird状态分析及实现　330
11.3.2　绘制Bird飞行轨迹　334
11.3.3　Box2D中的碰撞检测　336
11.3.4　Bird碰撞效果处理　338
11.3.5　Bird类的实现　339
11.4　Pig类的实现　343
11.5　Block类的实现　345
11.6　TGame类的实现　347
11.7　小结　352

附录A　游戏的历史　353
附录B　游戏类型　373