第1章 {.HTML5}}与javaScript概要 1

1.1 canvas元素 2

1.1.1 绘制矩形 3

1.1.2 绘制复杂形状或路径 5

1.1.3 绘制文本 7

1.1.4 自定义画笔样式（颜色和纹理） 8

1.1.5 绘制图像 9

1.1.6 平移和旋转 10

1.2 audio元素 11

1.3 image元素 14

1.3.1 图像加载 15

1.3.2 子画面页（精灵图） 15

1.4 动画：计时器和游戏循环 17

1.4.1 requestAnimationFrame 18

1.5 小结 20

第2章 创建基本的游戏世界 21

2.1 基本HTML布局 21

2.2 创建启动画面和主菜单 22

2.3 关卡选择 26

2.4 加载图像 29

2.5 加载关卡 33

2.6 动画 34

2.7 处理鼠标输入 37

2.8 设置游戏阶段 39

2.9 小结 42

第3章 物理引擎基础 43

3.1 Box2D基础 43

3.1.1 引入Box2D 44

3.1.2 定义World变量 45

3.1.3 添加第一个物体：地面 46

3.1.4 绘制世界：调试绘图模式 48

3.1.5 动画 50

3.2 更多的Box2D元素 52

3.2.1 创建矩形物体 52

3.2.2 创建圆形物体 54

3.2.3 创建多边形物体 56

3.2.4 创建多种形状的复杂物体 58

3.2.5 连接物体的接合点 61

3.3 追踪碰撞与破坏 64

3.3.1 接触监听器 65

3.4 绘制角色 68

3.5 小结 71

第4章 物理引擎集成 72

4.1 定义物体 72

4.2 添加Box2D 75

4.3 创建物体 78

4.4 向关卡加入物体 79

4.5 设置Box2D调试绘图 82

4.6 绘制物体 84

4.7 Box2D动画 86

4.8 加载英雄 88

4.9 发射英雄 91

4.10 结束关卡 94

4.11 碰撞损坏 96

4.12 绘制弹弓橡胶带 99

4.13 切换关卡 101

4.14 添加声音 103

4.14.1 添加断裂和反弹的音效 104

4.14.2 添加背景音乐 107

4.15 小结 110

第5章 创建即时战略游戏世界 111

5.1 基本HTML布局 112

5.2 创建启动画面和主菜单 112

5.3 地图与关卡 118

5.4 加载任务简介画面 120

5.5 制作游戏界面 124

5.6 实现地图平移 131

5.7 小结 137

第6章 加入单位 138

6.1 定义单位 138

6.2 第一个物体：主基地 139

6.3 为关卡添加单位 143

6.4 绘制单位 147

6.5 添加星港 150

6.6 添加炼油厂 154

6.7 添加炮塔 157

6.8 添加车辆 160

6.9 添加飞行器 165

6.10 添加地形 170

6.11 选中游戏单位 175

6.12 强调选中的单位 178

6.13 小结 183

第7章 单位智能移动 184

7.1 命令单位 184

7.2 发送和接收命令 186

7.3 执行指令 188

7.4 实现飞行器移动 189

7.5 路径规划 195

7.6 定义寻径格网 196

7.7 实现车辆移动 203

7.8 碰撞检测和导航 207

7.9 将采油车展开为炼油厂 214

7.10 流畅移动 215

7.11 小结 219

第8章 添加更多的游戏元素 220

8.1 实现基本的经济系统 220

8.1.1 设置启动资金 220

8.1.2 实现侧边栏 223

8.1.3 获取资金 225

8.2 购买建筑和单位 226

8.2.1 添加侧边栏按钮 226

8.2.2 启用与禁用侧边栏按钮 229

8.2.3 在星港建造车辆和飞行器 232

8.2.4 从基地建造建筑 241

8.3 结束关卡 249

8.3.1 实现消息对话框 250

8.3.2 实现触发器 254

8.4 小结 259

第9章 添加武器和战斗 261

9.1 实现战斗系统 261

9.1.1 添加炮弹 261

9.1.2 炮塔的战斗指令 269

9.1.3 飞行器的战斗指令 274

9.1.4 车辆的战斗指令 279

9.2 创建智能的敌人 284

9.3 添加战争迷雾 287

9.3.1 定义迷雾对象 287

9.3.2 绘制迷雾 290

9.3.3 禁止在迷雾上建造建筑 293

9.4 小结 295

第10章 完成单人战役 296

10.1 添加音效 296

10.1.1 创建音效 296

10.1.2 命令确认音效 298

10.1.3 消息提示音 301

10.1.4 战斗音效 302

10.2 创建单人战役 303

10.2.1 救援 303

10.2.2 袭击 312

10.2.3 抵抗围攻 318

10.3 小结 329

第11章 webSocket与多人对战模式 331

11.1 使用Node.js操作WebSocket API 331

11.1.1 浏览器端的WebSocket 331

11.1.2 使用Node.js创建HTTP服务器 334

11.1.3 创建WebSocket服务器 336

11.2 创建多人对战游戏大厅 339

11.2.1 定义多人对战大厅界面 339

11.2.2 游戏房间列表 341

11.2.3 进入和离开房间 345

11.3 启动多人对战游戏 351

11.3.1 定义多人对战关卡 351

11.3.2 加载多人战役关卡 354

11.4 小结 359

第12章 多人对战游戏操作 360

12.1 同步网络模型 360

12.1.1 测量网络传输时间 361

12.1.2 发送命令 365

12.2 结束多人对战 370

12.2.1 玩家被击败时结束游戏 370

12.2.2 玩家断开连接时结束游戏 375

12.2.3 玩家丢失连接时结束游戏 376

12.3 实现玩家聊天 378

12.4 小结 382

索引 384

欢迎阅读这本书。

我多么希望在我自己开始学习游戏开发的时候，能有这样一本书。现在，我就写了这本书。

与那些充斥着你永远用不到的抽象例程的书不同，这本书将向你提供第一手的关于HTML5如何被用来创建完整的可玩的游戏的资料。

我精心挑选了一款物理引擎游戏和一款即时战略游戏作为例子，这是因为，这两种类型的游戏中几乎包含了需要用来构建当下流行的各种类型游戏的所有的元素。

如果你完整地阅读本书，你将学到所有用来创建HTML5游戏的关键元素，并了解如何将这些元素组合在一起来实现看上去很专业的游戏。

如果你读完了本书，我希望你能够拥有自信，也拥有资源去开始创作你自己的令人惊叹的HTML5游戏。

本书读者

本书面向的读者将是那些已经有一些HTML和JavaScript开发经验，并且想要学习如何开发令人惊叹的HTML5游戏，却不知从哪里入手的人。

那些已经有一些其他语言（比如Flash）的游戏开发经验，并想尝试HTML5的读者也会从本书中找到很多有价值的信息。

如果你对自己的游戏开发技能还没什么自信，也不用着急。这本书包含了用来构建游戏的所有关键元素，便于你跟随本书的章节来逐步学习如何设计大型、专业的HTML5游戏。如果你不能跟上，这本书也会告诉你到哪里能够找到补习的资料。

本书对HTML5基础、Box2D引擎、路径规划和导航、战斗系统和敌人AI，以及使用Node.js和WebSockets的多人对战模式，都用独立的章节进行介绍。所以，无论你编写程序的水平如何，都能从本书中有所收获。

本书结构

本书将利用12章的内容向你展示创建两款完整游戏的过程。

前4章将创建游戏《水果战争》——一款基于Box2D物理引擎的游戏，它与游戏《愤怒的小鸟》极为类似。

第1章将讨论用来实现游戏的HTML5基础，如在canvas元素上绘图并产生动画，播放音乐，使用子画面页。

第2章将搭建一个基本的游戏框架，包括启动画面、主菜单、资源加载器和基于视差滚动的一个基本关卡。

第3章将详细介绍Box2D物理引擎，并展示如何使用Box2D来模拟游戏世界中的物理规律。

第4章将把游戏框架和Box2D引擎结合起来，添加音效和音乐，创建一个完整的可玩的物理类游戏。

接着，本书将创建一款即时战略游戏，包括单人战役模式和多人对战模式。接下来的6章将讨论单人战役模式。

第5章包含了建立基本游戏框架的内容，包括启动画面、主菜单、资源加载器和基于鼠标平移地图的基本关卡。

第6章向游戏中添加了不同类型的单位，如车辆、飞行器、建筑。

第7章使用路径规划算法和导航算法，展示如何使单位的移动更加智能。

第8章向游戏中添加经济系统和一个触发器系统。触发器将帮助我们编写游戏剧情。

第9章实现游戏的武器和战斗系统。

第10章在已有的框架之上，展示如何创建数个具有挑战性的单人战役关卡，并最终完成游戏单人战役模式。

最后两章将研究如何实现即时战略游戏的多人对战部分。

第11章将讨论使用WebSocket API和Node.js的基本方法，并创建一个多人对战大厅。

第12章将利用同步网络模型实现多人对战操作的框架，并在维持同步性的同时对网络延迟进行补偿。

下载源码

本书涉及的源代码可以在Apreess的Web站点（www.apreess.com）上下载。你可以在站点标题下方的Source Code/Downloads选项卡中找到本书信息页面的链接。

联系作者

如果你有任何问题或反馈，可以通过作者个人站点中本书的专页www.adityaravishankar. com/pro-html5-games/与他联系。你也可以通过E-mail：prohtml5games@adityaravishankar. com联系他。