第Ⅰ部分 HTML5潜力初探
第1章 先飞后走，先难后易 3
1.1 引言 3
1.2 用500行代码构建一个完整游戏 4
1.2.1 了解游戏 4
1.2.2 结构化游戏 4
1.2.3 最终实现的游戏 5
1.3 添加HTML和CSS样板代码 5
1.4 画布入门 6
1.4.1 访问上下文 7
1.4.2 在画布上绘制 7
1.4.3 绘制图像 8
1.5 创建游戏的结构 10
1.5.1 构建面向对象的JavaScript 10
1.5.2 利用鸭子类型 11
1.5.3 创建三个基本对象 11
1.6 加载精灵表 11
1.7 创建Game对象 13
1.7.1 实现Game对象 13
1.7.2 重构游戏代码 16
1.8 添加滚动背景 16
1.9 插入标题画面 20
1.10 添加主角 22
1.10.1 创建PlayerShip对象 22
1.10.2 处理用户输入 23
1.11 小结 24
第2章 从玩具到游戏 25
2.1 引言 25
2.2 创建GameBoard对象 25
2.2.1 了解GameBoard对象 26
2.2.2 添加和删除对象 26
2.2.3 遍历对象列表 27
2.2.4 定义面板的方法 29
2.2.5 处理碰撞 29
2.2.6 将GameBoard添加到
游戏中 30
2.3 发射导弹 31
2.3.1 添加炮弹精灵 31
2.3.2 连接导弹和玩家 32
2.4 添加敌方飞船 33
2.4.1 计算敌方飞船的移动 33
2.4.2 构造Enemy对象 34
2.4.3 移动和绘制Enemy对象 35
2.4.4 将敌方飞船添加到面板上 36
2.5 重构精灵类 37
2.5.1 创建一个通用的Sprite类 38
2.5.2 重构PlayShip 38
2.5.3 重构PlayerMissile 39
2.5.4 重构Enemy 40
2.6 处理碰撞 40
2.6.1 添加对象类型 41
2.6.2 让导弹和敌方飞船碰撞 41
2.6.3 让敌方飞船和玩家碰撞 42
2.6.4 制造爆炸 43
2.7 描述关卡 44
2.7.1 设置敌方飞船 44
2.7.2 设置关卡数据 45
2.7.3 加载和结束一关游戏 46
2.7.4 实现Level对象 47
2.8 小结 49
第3章 试飞结束，向移动进发 51
3.1 引言 51
3.2 添加触摸控件 51
3.2.1 绘制控件 52
3.2.2 响应触摸事件 54
3.2.3 在移动设备上测试 56
3.3 最大化游戏界面 57
3.3.1 设置视口 57
3.3.2 调整画布尺寸 58
3.3.3 添加到iOS主屏幕 60
3.4 添加得分 61
3.5 使之成为公平的战斗 62
3.6 小结 65
第Ⅱ部分 移动HTML5
第4章 移动设备上的HTML5 69
4.1 引言 69
4.2 HTML5的发展简史 70
4.2.1 了解HTML5“不同寻常”的成长历程 70
4.2.2 期待HTML6？HTML7？不，仅HTML5足矣 70
4.2.3 关于规范 71
4.2.4 区分HTML5家族和HTML5 71
4.3 恰当地使用HTML5 72
4.3.1 尝试HTML5 72
4.3.2 嗅探浏览器 72
4.3.3 确定功能而非浏览器 74
4.3.4 渐进增强 75
4.3.5 弥补差距的腻子脚本 76
4.4 从游戏角度考虑HTML5 76
4.4.1 画布 77
4.4.2 CSS3/DOM 77
4.4.3 SVG 78
4.5 从移动角度考虑HTML5 79
4.5.1 了解一些新的API 79
4.5.2 即将登场的WebAPI 80
4.6 调查移动浏览器的前景 80
4.6.1 WebKit：市场霸主 80
4.6.2 Opera：依然在埋头苦干 81
4.6.3 Firefox：Mozilla的移动产品 81
4.6.4 WP7上的Internet
Explorer 9 81
4.6.5 平板电脑 81
4.7 小结 82
第5章 了解一些有用的库 83
5.1 引言 83
5.2 了解JavaScript库 84
5.3 从jQuery谈起 84
5.3.1 将jQuery添加到页面 84
5.3.2 了解$操作符 85
5.3.3 操纵DOM 86
5.3.4 创建回调 87
5.3.5 绑定事件 89
5.3.6 发起Ajax调用 92
5.3.7 调用远程服务器 92
5.3.8 使用Deferred 93
5.4 使用Underscore.js 94
5.4.1 访问Underscore 94
5.4.2 使用集合 94
5.4.3 使用实用函数 95
5.4.4 链式调用Underscore方法 96
5.5 小结 96
第6章 成为一个良好的移动市民 97
6.1 引言 97
6.2 响应设备的能力 97
6.2.1 最大化实际使用面积 98
6.2.2 调整出合适的画布尺寸 98
6.3 处理浏览器的尺寸调整、滚动和缩放 100
6.3.1 处理尺寸调整 100
6.3.2 防止滚动和缩放 101
6.3.3 设置视口 102
6.3.4 去除地址栏 103
6.4 配置iOS主屏幕应用 105
6.4.1 把游戏变成Web应用可行的 105
6.4.2 添加启动画面 105
6.4.3 配置主屏幕图标 106
6.5 考虑移动设备的性能 107
6.6 适应有限的带宽和存储 108
6.6.1 为移动设备优化 108
6.6.2 移动设备好则一切皆好 108
6.6.3 缩减JavaScript 109
6.6.4 设置正确的头域内容 109
6.6.5 经由CDN提供 110
6.7 借助应用缓存的完全离线运行 111
6.7.1 创建代码清单文件 111
6.7.2 检查浏览器是否在线 113
6.7.3 监听更高级的行为 113
6.7.4 最后的警告 113
6.8 小结 114
第Ⅲ部分 JavaScript游戏 开发基础
第7章 了解HTML5游戏开发环境 117
7.1 引言 117
7.2 选择编辑器 118
7.3 探讨Chrome开发者工具 118
7.3.1 激活开发者工具 118
7.3.2 审查元素 118
7.3.3 查看页面资源 120
7.3.4 跟踪网络传输 121
7.4 调试JavaScript 123
7.4.1 查看Console选项卡 123
7.4.2 运用Script选项卡 125
7.5 分析和优化代码 127
7.5.1 运行性能分析 127
7.5.2 真正进行游戏优化 129
7.6 在移动设备上调试 131
7.7 小结 132
第8章 在命令行上运行JavaScript 133
8.1 引言 133
8.2 了解Node.js 134
8.3 安装Node 134
8.3.1 在Windows上安装Node 135
8.3.2 在OS X上安装Node 135
8.3.3 在Linux上安装Node 135
8.3.4 追踪最新版的Node 136
8.4 安装和使用Node模块 136
8.4.1 安装模块 136
8.4.2 诊断代码 136
8.4.3 缩减代码 137
8.5 创建自己的脚本 137
8.5.1 创建package.json文件 138
8.5.2 使用服务器端画布 139
8.5.3 创建可重用的脚本 140
8.6 编写一个精灵地图生成器 141
8.6.1 使用Futures模块 142
8.6.2 自上而下进行编码 143
8.6.3 加载图像 144
8.6.4 计算画布的尺寸 146
8.6.5 在服务器端画布上绘制图像 147
8.6.6 更新和运行脚本 148
8.7 小结 149
第9章 自建Quintus引擎(1) 151
9.1 引言 151
9.2 创建可重用HTML5引擎的框架 152
9.2.1 设计基本的引擎API 152
9.2.2 着手编写引擎代码 153
9.3 添加游戏循环 155
9.3.1 构建更好的游戏循环
定时器 155
9.3.2 将已优化的游戏循环添加
到Quintus 156
9.3.3 测试游戏循环 158
9.4 添加继承 159
9.4.1 在游戏引擎中使用继承 159
9.4.2 将传统继承添加至JavaScript 160
9.4.3 运用Class的功能 163
9.5 支持事件 164
9.5.1 设计事件API 164
9.5.2 编写Evented类 165
9.5.3 填写Evented方法 165
9.6 支持组件 168
9.6.1 设计组件API 168
9.6.2 实现组件系统 169
9.7 小结 172
第10章 自建Quintus引擎(2) 173
10.1 引言 173
10.2 访问游戏容器元素 173
10.3 捕捉用户输入 176
10.3.1 创建输入子系统 176
10.3.2 自建输入模块 177
10.3.3 处理键盘事件 179
10.3.4 添加小键盘控件 180
10.3.5 添加游戏手柄控件 183
10.3.6 绘制屏幕输入 186
10.3.7 完善和测试输入 188
10.4 加载资产 190
10.4.1 定义资产类型 191
10.4.2 加载特定资产 192
10.4.3 完善加载器 194
10.4.4 添加预加载支持 197
10.5 小结 198
第11章 自建Quintus引擎(3) 199
11.1 引言 199
11.2 定义精灵表 200
11.2.1 创建SpriteSheet类 200
11.2.2 跟踪和加载精灵表 201
11.2.3 测试SpriteSheet类 202
11.3 添加精灵 203
11.3.1 编写Sprite类 203
11.3.2 引用精灵、属性和资产 205
11.3.3 运用Sprite对象 205
11.4 使用场景设置舞台 209
11.4.1 创建Quintus.Scenes模块 210
11.4.2 编写Stage类 210
11.4.3 丰富场景功能 214
11.5 完成Blockbreak游戏的编写 217
11.6 小结 219
第Ⅳ部分 使用CSS3和SVG 构建游戏
第12章 使用CSS3构建游戏 223
12.1 引言 223
12.2 选定场景图 223
12.2.1 目标受众 224
12.2.2 交互方法 224
12.2.3 性能需求 224
12.3 实现DOM支持 225
12.3.1 考虑DOM的特性 225
12.3.2 自建Quintus的DOM模块 225
12.3.3 创建一致的移动方法 226
12.3.4 创建一致的过渡方法 229
12.3.5 实现DOM精灵类 230
12.3.6 创建DOM舞台类 232
12.3.7 替换画布的等价类 234
12.3.8 测试DOM功能 234
12.4 小结 235
第13章 制作一个CSS3 RPG游戏 237
13.1 引言 237
13.2 创建滚动的区块地图 237
13.2.1 了解性能问题 238
13.2.2 实现DOM区块地图类 238
13.3 构建RPG游戏 242
13.3.1 创建HTML文件 242
13.3.2 设置游戏 243
13.3.3 添加区块地图 245
13.3.4 创建一些有用的组件 247
13.3.5 添加玩家 250
13.3.6 添加迷雾、敌人和
战利品 251
13.3.7 使用精灵扩展区块地图 255
13.3.8 添加血槽和HUD 258
13.4 小结 262
第14章 使用SVG和物理引擎
构建游戏 263
14.1 引言 263
14.2 了解一些SVG基础知识 264
14.2.1 在页面上显示SVG 264
14.2.2 了解基本的SVG元素 265
14.2.3 变形SVG元素 269
14.2.4 应用笔画和填充 270
14.2.5 超越基础 272
14.3 通过JavaScript使用SVG 273
14.3.1 创建SVG元素 273
14.3.2 设置和读取SVG特性 274
14.4 将SVG支持添加到
Quintus 275
14.4.1 创建SVG模块 275
14.4.2 添加SVG精灵 276
14.4.3 创建SVG舞台类 278
14.4.4 测试SVG类 280
14.5 使用Box2D添加物理支持 283
14.5.1 了解物理引擎 283
14.5.2 实现world组件 284
14.5.3 实现physics组件 287
14.5.4 将物理支持添加到
例子中 290
14.6 创建一个大炮射击游戏 292
14.6.1 设计游戏 292
14.6.2 构建所需的精灵 292
14.6.3 收集用户输入并完成游戏编写 295
14.7 小结 296
第Ⅴ部分 HTML5画布
第15章 了解HTML5的杰出画布 301
15.1 引言 301
15.2 画布标签入门 302
15.2.1 了解CSS和像素尺寸 302
15.2.2 提取渲染上下文 305
15.2.3 通过画布创建图像 305
15.3 在画布上进行绘制 307
15.3.1 设置填充和笔画样式 307
15.3.2 设置笔画细节 309
15.3.3 调整不透明度 310
15.3.4 绘制矩形 310
15.3.5 绘制图像 311
15.3.6 绘制路径 311
15.3.7 在画布上渲染文本 313
15.4 使用画布变形矩阵 314
15.4.1 了解基本的变形 315
15.4.2 保存、恢复和重置变形矩阵 316
15.4.3 绘制雪花 316
15.5 应用画布效果 319
15.5.1 添加阴影 319
15.5.2 使用合成效果 319
15.6 小结 321
第16章 实现动画 323
16.1 引言 323
16.2 构建动画地图 323
16.2.1 确定动画API 324
16.2.2 编写动画模块 325
16.2.3 测试动画 329
16.3 添加画布视口 331
16.4 实现视差效果 334
16.5 小结 336
第17章 运用像素 337
17.1 引言 337
17.2 回顾2D物理学 338
17.2.1 了解力、质量和加速度 338
17.2.2 为炮弹建模 339
17.2.3 换成迭代解 340
17.2.4 抽取可重用类 341
17.3 实现Lander游戏 342
17.3.1 自建游戏 342
17.3.2 构建飞船 343
17.3.3 精确到像素级 345
17.3.4 运用ImageData对象 346
17.3.5 制造爆炸 350
17.4 小结 354
第18章 创建一个2D平台动作游戏 355
18.1 引言 355
18.2 创建区块层 356
18.2.1 编写TileLayer类 356
18.2.2 试用TileLayer代码 358
18.2.3 优化绘制 360
18.3 处理平台动作游戏的碰撞 361
18.3.1 添加2d组件 362
18.3.2 计算平台动作游戏的碰撞 364
18.3.3 使用PlatformStage拼接 366
18.4 构建游戏 368
18.4.1 自建游戏 368
18.4.2 创建敌人 369
18.4.3 添加子弹 371
18.4.4 创建玩家 372
18.5 小结 375
第19章 构建一个画布编辑器 377
19.1 引言 377
19.2 使用Node.js提供游戏服务 377
19.2.1 创建package.json文件 378
19.2.2 设置Node以提供静态资产 378
19.3 创建编辑器 379
19.3.1 修改平台动作游戏代码 380
19.3.2 创建编辑器模块 382
19.3.3 添加触摸和鼠标事件 385
19.3.4 选择区块 387
19.4 添加关卡保存支持 389
19.5 小结 390
第Ⅵ部分 多 人 游 戏
第20章 构建在线社交游戏 393
20.1 引言 393
20.2 了解基于HTTP的多玩家
游戏 394
20.3 设计一个简单的社交游戏 394
20.4 集成Facebook 395
20.4.1 生成Facebook应用 395
20.4.2 创建Node.js服务器 396
20.4.3 添加登录视图 399
20.4.4 测试Facebook身份验证 401
20.5 连接数据库 402
20.5.1 在Windows上安装MongoDB 402
20.5.2 在OS X上安装MongoDB 403
20.5.3 在Linux上安装MongoDB 403
20.5.4 通过命令行连接MongoDB 403
20.5.5 将MongoDB集成到游戏 405
20.6 完成Blob Clicker的编写 407
20.7 推送至托管服务 410
20.8 小结 412
第21章 实现实时交互 413
21.1 引言 413
21.2 了解WebSocket 413
21.3 在浏览器中使用原生
WebSocket 415
21.4 使用Socket.io：支持回退的WebSocket 417
21.4.1 创建涂鸦应用的
服务器端 417
21.4.2 添加涂鸦应用的客户端 419
21.5 用Socket.io构建一个多人乒乓球游戏 421
21.5.1 处理延时 422
21.5.2 防止作弊 422
21.5.3 部署实时应用 422
21.5.4 创建自动匹配的
服务器端 423
21.5.5 构建乒乓球游戏的前端 426
21.6 小结 431
第22章 构建非传统风格的游戏 433
22.1 引言 433
22.2 创建一个Twitter应用 433
22.3 将Node应用连接至Twitter 435
22.3.1 发送第一条推文 435
22.3.2 监听用户的信息流 436
22.4 随机生成单词 437
22.5 创建Twitter上的Hangman游戏 438
22.6 小结 443
第Ⅶ部分 移 动 增 强
第23章 通过地理位置定位 447
23.1 引言 447
23.2 地理定位入门 447
23.3 一次性获取位置 448
23.4 在地图上标出位置 450
23.5 监视位置随时间的变化 451
23.6 绘制交互式地图 452
23.7 计算两点间的距离 454
23.8 小结 454
第24章 查询设备的方向和加速 455
24.1 引言 455
24.2 考查设备的方向 455
24.3 设备方向事件入门 456
24.3.1 检测和使用事件 457
24.3.2 了解事件数据 457
24.4 试用设备方向 458
24.4.1 创建一个玩球的场所 458
24.4.2 添加方向控制 460
24.4.3 处理浏览器的旋转 461
24.5 小结 462
第25章 播放音效：移动设备的罩门 463
25.1 引言 463
25.2 使用audio标签 463
25.2.1 把audio标签用于简单
播放 464
25.2.2 处理不同的受支持格式 464
25.2.3 了解移动设备音频的局限性 465
25.3 构建一个简单的桌面音效引擎 465
25.3.1 将audio标签用于游戏音效 466
25.3.2 添加一个简单的音效系统 466
25.3.3 将音效添加到Block Break
游戏 468
25.4 构建一个移动音效系统 469
25.4.1 使用音效精灵 469
25.4.2 生成精灵文件 472
25.4.3 将音效精灵添加到游戏 473
25.5 展望HTML5音频的未来 474
25.6 小结 474
第Ⅷ部分 游戏引擎和应用商店
第26章 使用HTML5游戏引擎 477
26.1 引言 477
26.2 回顾HTML5引擎的历史 477
26.2.1 使用商用引擎 478
26.2.2 Impact.js 479
26.2.3 Spaceport.io 480
26.2.4 IDE引擎 480
26.3 使用开源引擎 481
26.3.1 Crafty.js 481
26.3.2 LimeJS 482
26.3.3 EaselJS 484
26.4 小结 487
第27章 瞄准应用商店 489
27.1 引言 489
27.2 为Google的Chrome Web
Store打包应用 490
27.2.1 创建托管应用 490
27.2.2 创建打包应用 492
27.2.3 发布应用 492
27.3 使用CocoonJS加速应用 493
27.3.1 准备把游戏载入
CocoonJS 493
27.3.2 在Android上测试
CocoonJS 495
27.3.3 构建云端应用 495
27.4 使用AppMobi的XDK和
DirectCanvas构建应用 496
27.4.1 了解DirectCanvas 496
27.4.2 安装XDK 496
27.4.3 创建应用 497
27.4.4 修改Alien Invasion以
使用DirectCanvas 497
27.4.5 在设备上测试应用 502
27.5 小结 502
第28章 挖掘下一个热点 503
28.1 引言 503
28.2 使用WebGL实现3D 503
28.3 使用Web Audio API获得
更好的声音访问 504
28.4 使用全屏API扩大游戏
画面 505
28.5 使用屏幕方向API锁定设备
屏幕 505
28.6 使用WebBTC添加实时
通信 505
28.7 追踪其他即将出现的本地化
功能 506
28.8 小结 506
附录A 资源 507
· · · · · · (收起)