HTML5 移动游戏开发高级编程

内容概要

Pascal Rettig经营着网络咨询公司Cykod；Cykod成立于2006年，总部设在波士顿，主营业务是在线交互应用。Pascal也是GamesForLanguage的CTO，他组织成立了波士顿HTML5游戏开发研讨会，同时担任UX Magazine游戏版块的特约编辑。

书籍目录

第Ⅰ部分  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

作者简介

热切期望进入如火如荼的移动游戏世界？ HTML5移动游戏开发高级编程  将助你实现梦想。这本精品书籍面向有兴趣为所有移动和触摸屏设备创建游戏的开发人员，以你现有的HTML5和JavaScript知识为基础，分步讲解如何使用HTML5构建单玩家和多玩家移动游戏。本书涵盖构建HTML5游戏的标准模式、构建方法的选择(CSS3、SVG或画布)以及流行的游戏引擎和框架等主题。最重要的是，你可修改和扩展本书提供的6个基础游戏的代码，最终开发出自己的游戏。

主要内容

◆
阐释如何择机选用三种主要方法(CSS3、SVG或画布)之一来构建HTML游戏

◆
介绍使用HTML5构建实时多玩家游戏的标准模式

◆
讲述JavaScript游戏开发基础知识

◆
分步讲解如何创建2D平台动作游戏以及构建非传统多人游戏界面

◆
介绍各种移动增强功能，如地理定位、设备方向、加速和声音等

◆
提供将HTML5游戏打包以便将其发布到应用商店的建议

 HTML5 移动游戏开发高级编程下载