第Ⅰ部分 HTML5潜力初探 3
第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
游戏中 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 69
第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游戏开发基础 117
第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在OSX上安装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构建游戏 223
第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画布 301
第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
第Ⅵ部分 多人游戏 393
第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在OSX上安装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
第Ⅶ部分 移动增强 447
第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 Break468游戏 468
25.4构建一个移动音效系统 469
25.4.1使用音效精灵 469
25.4.2生成精灵文件 472
25.4.3将音效精灵添加到游戏 473
25.5展望HTML5音频的未来 474
25.6小结 474
第Ⅷ部分 游戏引擎和应用商店 477
第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和 496
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