利用HTML5、CSS3和WebGL开发HTML5游戏

目 录

第一部分 HTML5游戏入门指导

第1章 网页上的游戏 2

1．1 追溯HTML5的历史 2

1．2 在游戏中使用HTML5 3

1．2．1 canvas（画布） 3

1．2．2 audio（声音） 4

1．2．3 WebSocket（网络接口） 5

1．2．4 Web Storage（网络存储） 6

1．2．5 WebGL（网络图形语言） 7

1．2．6 HTML5（不）是Flash杀手 7

1．3 实现向下兼容性 7

1．3．1 特征检测 7

1．3．2 使用Modernizr检测库 8

1．3．3 用polyfill填充缺口 9

1．4 创建一个游戏 10

1．5 总结 10

第2章 迈出第一步 11

2．1 理解游戏 11

2．1．1 交换宝石 12

2．1．2 配成3个 12

2．1．3 等级进阶 12

2．2 识别游戏阶段 12

2．2．1 启动界面 12

2．2．2 主界面 13

2．2．3 游戏画面 13

2．2．4 最高分 13

2．3 创建程序架构 14

2．3．1 建立HTML 15

2．3．2 添加各种风格 16

2．3．3 加载脚本 17

2．4 创建启动画面 21

2．4．1 使用网络字体 21

2．4．2 装饰启动画面 22

2．5 总结 24

第3章 移植到手机 25

3．1 开发移动网页应用程序 25

3．1．1 一次写，多次读 26

3．1．2 移动平台的挑战 26

3．2 处理用户在移动设备里的输入 26

3．2．1 键盘输入 27

3．2．2 鼠标VS．触摸 27

3．3 适配小屏幕分辨率 28

3．3．1 创建可调整的布局 29

3．3．2 控制视口 31

3．3．3 屏蔽缩放功能 31

3．4 创建不同的视图 32

3．4．1 创建主菜单 32

3．4．2 添加屏幕模块 34

3．4．3 使用CSS媒体查询 37

3．4．4 检测设备的旋转 38

3．4．5 添加一个移动样式表 39

3．5 在iOS和Android设备上开发 42

3．5．1 将网页应用程序发布于主界面上 42

3．5．2 清除浏览器的障碍 49

3．6 调试移动网页应用程序 52

3．6．1 启用Safari调试器 52

3．6．2 访问Android日志 54

3．7 总结 54

第二部分 创建一个简单游戏

第4章 建立游戏 56

4．1 建立游戏面板模块 56

4．1．1 初始化游戏状态 57

4．1．2 填充初始面板 60

4．2 生成规则 62

4．2．1 验证交换 62

4．2．2 检测链 65

4．2．3 重新填充面板 69

4．2．4 交换宝石 72

4．3 总结 74

第5章 将任务委托给Web Workers 75

5．1 使用Web Workers 75

5．1．1 工作线程的使用限制 76

5．1．2 工作线程能做什么 77

5．2 使用工作线程 78

5．2．1 发送消息 78

5．2．2 接收消息 79

5．2．3 捕获错误 79

5．2．4 共享工作线程 79

5．2．5 一个素数检测的例子 81

5．3 在游戏中使用Web Workers 84

5．3．1 创建工作线程模块 84

5．3．2 保持相同的接口 86

5．4 总结 91

第6章 在画布（canvas）里创建图形 92

6．1 canvas与其他方法比较 92

6．1．1 位图图像 92

6．1．2 SVG图像 93

6．1．3 画布canvas 93

6．1．4 何时选择canvas 94

6．2 使用canvas绘制 94

6．2．1 绘制形状和路径 95

6．2．2 使用高级画笔与填充样式 103

6．2．3 使用变换 107

6．2．4 添加文本、图像和阴影 108

6．2．5 管理状态栈 112

6．2．6 绘制HTML5徽标 113

6．2．7 图像合成 119

6．3 访问图像数据 120

6．3．1 获取像素值 120

6．3．2 更新像素值 121

6．3．3 导出图像文件数据 122

6．3．4 理解安全限制 123

6．3．5 创建基于像素的效果 123

6．4 总结 125

第7章 创建游戏界面 126

7．1 预加载游戏文件 126

7．1．1 检测宝石大小 127

7．1．2 修改加载器脚本 128

7．1．3 添加一个进度条 132

7．2 改进背景 135

7．3 创建游戏界面 137

7．3．1 使用canvas绘制面板 139

7．3．2 使用CSS和图片绘制面板 145

7．4 总结 151

第8章 游戏互动 152

8．1 获取用户输入 152

8．1．1 在触摸屏上实现鼠标功能 152

8．1．2 虚拟键盘 153

8．1．3 触摸操作 154

8．1．4 输入操作和canvas 159

8．2 创建输入模块 161

8．2．1 执行游戏操作 165

8．2．2 捆绑输入与游戏函数 170

8．3 总结 177

第9章 绘制游戏动画 178

9．1 让游戏动起来 178

9．1．1 动画计时 179

9．1．2 绘制光标 183

9．1．3 绘制游戏动画 185

9．2 添加分数和事件 193

9．2．1 创建UI元素 194

9．2．2 创建游戏计时器 197

9．2．3 奖励分数 199

9．2．4 游戏结束 207

9．3 总结 210

第三部分 添加3D与声音

第10章 为游戏创建音频 212

10．1 HTML5音频 212

10．1．1 检测音频支持 213

10．1．2 理解音频格式之争 213

10．1．3 寻找音效 215

10．2 使用audio元素 216

10．2．1 播放控制 218

10．2．2 在移动设备上使用音频 222

10．3 使用音频数据 222

10．3．1 使用Mozilla音频数据接口 223

10．3．2 一些例子 225

10．4 建立音频模块 229

10．4．1 为音效回播做准备 230

10．4．2 播放声音效果 231

10．4．3 停止播放 233

10．4．4 清除声音 233

10．5 为游戏添加声音效果 235

10．5．1 在游戏界面里播放音频 235

10．6 总结 236

第11章 使用WebGL创建3D图形 237

11．1 网页上的3D 237

11．1．1 开始使用WebGL 238

11．1．2 调试WebGL 239

11．1．3 创建一个辅助模块 239

11．2 着色器 240

11．2．1 变量和数据类型 240

11．2．2 通过WebGL使用着色引擎 244

11．2．3 统一变量 249

11．2．4 变化变量 250

11．3 渲染3D对象 251

11．3．1 使用顶点缓冲区 251

11．3．2 使用索引缓冲区 253

11．3．3 使用模型、视图和投影 254

11．3．4 渲染 257

11．3．5 加载Collada模块 260

11．4 使用纹理和光照 262

11．4．1 添加光效 262

11．4．2 添加per-pixel 光效 265

11．4．3 创建纹理 268

11．5 创建WebGL显示模块 273

11．5．1 加载WebGL文件 274

11．5．2 设置WebGL 275

11．5．3 渲染宝石 278

11．5．4 让宝石动起来 283

11．6 总结 286

第四部分 本地存储与多人游戏

第12章 本地存储与缓存 288

12．1 使用网页存储器（Web Storage）存储数据 288

12．1．1 使用存储接口 289

12．1．2 建立存储模块 292

12．2 使游戏状态持续 294

12．2．1 退出游戏 294

12．2．2 暂停游戏 296

12．2．3 存储游戏数据 298

12．3 建立高分列表 301

12．3．1 建立高分界面 301

12．3．2 存储高分数据 304

12．3．3 显示高分数据 305

12．4 程序缓存 307

12．4．1 缓存舱单 307

12．5 总结 310

第13章 使用网络接口联网 311

13．1 WebSockets的应用 311

13．1．1 连接服务器 312

13．1．2 与WebSocket连接 314

13．2 在服务器上使用Node 315

13．2．1 安装Node 316

13．2．2 利用Node创建HTTP服务器 318

13．2．3 创建一个WebSocket聊天室 319

13．3 总结 326

第14章 资源 327

14．1 使用中间设备 327

14．1．1 Box2D 327

14．1．2 Impact 329

14．1．3 Three．js 331

14．2 在移动设备上部署 332

14．2．1 PhoneGap 332

14．2．2 Appcelerator Titanium 336

14．3 发布游戏 337

14．3．1 Chrome Web Store 337

14．3．2 Zeewe 338

14．3．3 Android Market 338

14．3．4 App Store 339

14．4 使用线上服务 339

14．4．1 TapJS 339

14．4．2 Playtomic 340

14．4．3 JoyentCloud Node 341

14．5 总结 341