第1章 概述 1
1.1 Snai1Bait游戏 3
1.2 HTML5游戏开发最佳实践 8
1.2.1 窗口失去焦点时暂停游戏 8
1.2.2 窗口重获焦点时实现倒计时功能 9
1.2.3 使用CSS实现UI特效 10
1.2.4 对游戏运行缓慢的状态做出检测和处理 11
1.2.5 添加社交功能 11
1.2.6 将所有游戏图像放在单独的sprite表单中 11
1.2.7 在服务器中存储高分榜和实时游戏数据 13
1.3 特别功能 13
1.4 Snail Bait游戏中的HTML和CSS 15
1.5 开始Snail Bait游戏编程 21
1.6 本书中使用的JavaScript 23
1.7 小结 25
1.8 练习 26
第2章 原始素材和开发环境 27
2.1 使用开发者工具 28
2.1.1 控制台 29
2.1.2 Chrome Canary的帧速率计数器 32
2.1.3 调试 34
2.1.4 时间线 35
2.1.5 Profiling 39
2.2 获取资源 40
2.2.1 图像 40
2.2.2 图像处理 41
2.2.3 音效和音乐 41
2.2.4 动画 42
2.3 使用CSS背景 43
2.4 生成小图标 45
2.5 缩短编码周期 46
2.6 小结 48
2.7 练习 48
第3章 图形和动画 49
3.1 使用HTML5 canvas元素绘制图形和图像 51
3.1.1 绘制背景 52
3.1.2 绘制跑步小人 53
3.1.3 绘制平台 53
3.2 实现平滑的HTML5动画 55
3.2.1 requestAnimationFrame()方法 57
3.2.2 requestAnimationFrame()的polyfill实现 57
3.3 实现游戏主循环 60
3.4 计算帧速率 61
3.5 滚动游戏背景 62
3.5.1 平移坐标系 62
3.5.2 滚动Snail Bait游戏的背景 65
3.6 制作基于时间的运动 67
3.7 反转滚动方向 67
3.8 绘制动画帧 68
3.9 使用视差产生视深的假象 68
3.10 小结 71
3.11 练习 71
第4章 游戏的基本架构 72
4.1 在JavaScript对象中封装游戏函数 73
4.1.1 SnailBait的构造函数 74
4.1.2 SnailBait的原型 75
4.2 理解JavaScript语言中挑剔的this指针 77
4.3 处理键盘输入 79
4.4 玩家按P键时暂停或者恢复游戏 81
4.5 冻结游戏，确保它精确地在暂停的位置恢复 82
4.6 在窗口失去焦点时暂停游戏 83
4.7 使用动态的倒计时来恢复一个暂停的游戏 84
4.7.1 向游戏玩家显示提示板（简短信息） 85
4.7.2 Snail Bait的倒计时 87
4.8 小结 89
4.9 练习 90
第5章 游戏加载动画 91
5.1 定义SnailBait游戏的窗口 93
5.2 使用CSS过渡让元素淡入、淡出 96
5.2.1 让元素淡入 97
5.2.2 让元素淡出 98
5.2.3 snailbait-toast元素的CSS 99
5.2.4 显示和隐藏提示板 100
5.3 让拥有与CSS过渡属性Opacity关联的元素淡入、淡出 103
5.4 实现加载动画 105
5.5 显示游戏画面 109
5.6 小结 112
5.7 练习 113
第6章 sprite对象 114
6.1 sprite对象 116
6.1.1 sprite对象的属性 118
6.1.2 sprite对象的构造函数 119
6.1.3 sprite对象的方法 119
6.2 将sprite对象整合到游戏主循环中 121
6.3 实现sprite对象的artist对象 124
6.3.1 图形artist对象 124
6.3.2 图像artist对象 125
6.3.3 sprite图像表单artist对象 125
6.3.4 定义sprite图像表单单元格 128
6.4 创建和初始化游戏的sprite对象 130
6.5 使用元数据定义sprite对象 133
6.6 滚动sprite对象 136
6.7 小结 138
6.8 练习 138
第7章 sprite对象行为 140
7.1 行为基础 142
7.2 跑步小人行为 143
7.3 跑步小人的跑动行为 146
7.4 轻量级行为 148
7.5 游戏独立行为 150
7.6 组合行为 155
7.7 小结 159
7.8 练习 159
第8章 时间轴，第1部分：有限行为及线性运动 160
8.1 实现一个初始的跳跃行为算法 161
8.2 将处理跳跃行为的职责转交给跑步小人 162
8.3 实现跳跃行为 164
8.4 使用秒表记录动画时间 165
8.5 重新定义跳跃行为 168
8.6 实现线性运动 170
8.6.1 上升阶段 170
8.6.2 下降阶段 171
8.7 暂停行为 173
8.8 小结 175
8.9 练习 175
第9章 时间轴，第2部分：非线性运动 176
9.1 理解时间及其衍生物 177
9.2 使用动画计时器和缓变功能实现非线性跳跃 177
9.3 实现动画计时器 179
9.4 实现缓变功能 181
9.5 微调缓变功能 184
9.6 实现真实的跳动行为 185
9.7 使行为随机化 189
9.8 使用动画计时器和缓变功能实现非线性颜色改变 190
9.9 小结 193
9.10 练习 193
第10章 时间轴，第3部分：时间系统 194
10.1 Snail Bait游戏的时间系统 195
10.2 创建和启动时间系统 197
10.3 将时间系统整合进Snail Bait游戏中 198
10.3.1 使用时间系统驱动游戏动画 198
10.3.2 实现使用时间系统修改游戏时间流的函数 199
10.3.3 在计算帧速率时分解时间比率 199
10.3.4 使用时间系统暂停和恢复游戏 200
10.4 重新定义秒表和动画计时器的当前时间 202
10.5 实现时间系统 206
10.6 小结 208
10.7 练习 208
第11章 碰撞检测 209
11.1 碰撞检测过程 210
11.2 碰撞检测技术 211
11.3 Snail Bait游戏中的碰撞检测 212
11.3.1 sprite对象的碰撞矩形 212
11.3.2 跑步小人的碰撞行为 214
11.4 为碰撞检测选择碰撞候选对象 215
11.5 在跑步小人与其他sprite对象之间检测碰撞 216
11.6 处理碰撞 217
11.7 优化碰撞检测 220
11.7.1 改善包围盒 220
11.7.2 使用空间分割方法 221
11.8 监测碰撞检测的运行性能 222
11.9 编程实现碰撞检测的边界案例 223
11.10 小结 226
11.11 练习 226
第12章 重力 228
12.1 为跑步小人实现坠落行为 228
12.2 实现重力 230
12.2.1 跑步小人的坠落行为 232
12.2.2 计算初始下降速度 236
12.2.3 在跑步小人坠落过程中暂停游戏 237
12.3 最终版的碰撞检测 237
12.4 小结 238
12.5 练习 239
第13章 sprite动画和特殊效果 240
13.1 实现sprite动画 241
13.2 创建特效 246
13.2.1 晃动游戏画面 246
13.2.2 场景切换 248
13.3 编排效果 253
13.3.1 炸死蜜蜂 254
13.3.2 引爆按钮 256
13.4 小结 258
13.5 练习 258
第14章 声音和音乐 259
14.1 创建声音和音乐文件 261
14.2 加载音乐和音效 262
14.3 设置声音和音乐控件 263
14.4 播放音乐 264
14.5 循环播放音乐 265
14.6 播放音效 267
14.6.1 创建sprite音频对象 270
14.6.2 定义音效对象 271
14.6.3 实现多声道播放音效 272
14.7 打开和关闭声音播放 279
14.8 小结 280
14.9 练习 280
第15章 移动设备 281
15.1 在移动设备上运行Snail Bait游戏 284
15.2 检测移动设备 284
15.3 缩放游戏以适应移动设备 286
15.3.1 HTML5 viewport元标签 287
15.3.2 以编程方式调整游戏画面以适应移动设备屏幕 291
15.4 修改游戏动画底部的控制说明 295
15.5 修改欢迎界面 295
15.5.1 实现欢迎提示 296
15.5.2 实现移动设备中的控制说明 301
15.5.3 实现移动设备版开始提示 305
15.5.4 显示移动设备中的开始提示 306
15.6 添加触控事件 307
15.7 在移动设备中处理音频的方法 310
15.8 在主屏幕上添加启动图标，并以全屏模式运行游戏 312
15.9 小结 313
15.10 练习 313
第16章 粒子系统 314
16.1 排烟孔粒子系统 315
16.2 使用排烟孔粒子系统 318
16.2.1 定义排烟孔粒子系统数据 318
16.2.2 创建排烟孔粒子系统 318
16.2.3 将排烟孔粒子系统存入Snail Bait游戏的sprite对象数组中 319
16.2.4 在每个动画帧中滚动排烟孔粒子系统 320
16.3 编程实现排烟孔粒子系统 321
16.3.1 把排烟孔粒子系统伪装成sprite对象 321
16.3.2 组合火焰粒子 323
16.3.3 组合烟泡 327
16.4 暂停排烟孔粒子系统 337
16.5 小结 338
16.6 练习 338
第17章 用户界面 339
17.1 记录玩家游戏成绩 340
17.2 增加游戏生命指示器 343
17.3 显示游戏字幕 348
17.4 使用Tweet发布玩家游戏得分 354
17.5 当游戏运行缓慢时通知游戏玩家 357
17.5.1 监控帧速率 361
17.5.2 编程实现运行缓慢通知的事件处理句柄 363
17.6 编程实现通关动画 364
17.7 小结 368
17.8 练习 368
第18章 开发者后门程序 370
18.1 Snail Bait游戏的开发者后门 372
18.2 开发者后门的HTML元素及CSS 373
18.3 显示及隐藏开发者后门 375
18.4 更新开发者后门的元素 377
18.5 实现开发者后门的复选框 378
18.5.1 显示及隐藏碰撞矩形 380
18.5.2 启用或禁用运行缓慢通知 382
18.5.3 显示或隐藏排烟孔粒子系统 383
18.5.4 更新开发者后门的复选框 383
18.6 实现开发者后门的滑动条 384
18.6.1 为开发者后门的滑动条定义HTML元素及CSS 386
18.6.2 在SnailBait游戏的Java-Script代码中访问滑动条的读数 387
18.6.3 创建并初始化开发者后门的滑动条 388
18.6.4 将运行缓慢的滑动条关联到游戏中 389
18.6.5 将时间速率滑动条关联到游戏中 389
18.6.6 将游戏关联到时间速率滑动条上 390
18.6.7 在显示开发者后门之前更新滑动条 391
18.7 实现开发者后门刻度尺 392
18.7.1 创建并访问刻度尺的canvas元素 393
18.7.2 淡入淡出刻度尺 394
18.7.3 绘制刻度尺 395
18.7.4 更新刻度尺 396
18.7.5 拖动游戏画面 397
18.8 小结 401
18.9 练习 401
第19章 服务器端开发：内部指标、高分记录及部署 403
19.1 Nodejs及socket.io简介 404
19.2 在Snail Bait游戏中引入socket.io 406
19.3 创建一个简单的服务器 407
19.4 在服务器端创建套接字 407
19.5 启动服务器 408
19.6 在客户端创建一个套接字并连接到服务器 408
19.7 记录游戏内部指标 409
19.8 管理高分记录 412
19.8.1 实现高分记录的用户界面 413
19.8.2 检索服务器中的高分记录 415
19.8.3 在客户端显示高分记录 418
19.8.4 监视姓名输入 419
19.8.5 验证并将高分记录存储到服务器 420
19.8.6 重新显示高分记录 422
19.8.7 开始新游戏 422
19.9 部署Snail Bait游戏 423
19.10 将文件上传到服务器 425
19.11 小结 426
19.12 练习 426
第20章 后记：Bodega Revenge游戏 428
20.1 设计用户界面 430
20.2 创建sprite表单 433
20.3 实例化游戏 433
20.4 实现sprite对象 434
20.4.1 炮塔 434
20.4.2 炮弹 437
20.4.3 小鸟 439
20.5 实现sprite对象的行为 441
20.5.1 炮塔的行为 442
20.5.2 炮弹的行为 447
20.5.3 小鸟的行为 450
20.6 绘制剩余炮弹指示器 454
20.7 为移动设备实现触摸控制 456
20.8 小结 458
20.9 练习 459