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

《HTML5游戏编程核心技术与实战》包含大量的游戏实例，并且将会开发出一个比较完善的游戏引擎，从理论中来，到实践中去，让读者清晰了解到游戏开发的每一个细节。《HTML5游戏编程核心技术与实战》是一本全面介绍HTML5游戏编程的书，在详细阐述HTML5的核心技术基础上，深入讲解游戏的运行机制，剖析游戏的核心——游戏引擎的细节内幕，并以大量完整的游戏实践开发案例为指导，逐步讲解游戏开发中常用的各种技术和方法。　　全书一共11章，先后介绍了HTML5的新特性、HTML5中的canvas绘图技术、多媒体技术、游戏运行机制及游戏渲染引擎的开发、HTML5中的网络通信基础和Node.js框架、游戏中常用的算法技巧、物理引擎Box2D创建物理游戏、使用CSS3创建游戏，然后给出一个飞行射击游戏的综合案例。此外，在最后两章分别通过Node.js结合socket.js框架实现了两个游戏。每一章的内容既包括丰富的理论知识，又给出实战性极强的案例。　　《HTML5游戏编程核心技术与实战》适合有一定HTML和JavaScript语言基础，对HTML5游戏编程有浓厚兴趣的Web前端开发工程师阅读，同样适合有一定的HTML5游戏开发基础的HTML5游戏开发的工程师阅读。