HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎，我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。

本文由NTFusion团队所作，结合了他们在Google Chrome Web Store上发布的《拯救PAPA》和大家分享一下使用HTML5开发物理游戏的心得。

在阅读本文之前，您可以从Chrome Web Store安装《拯救PAPA》来尝个鲜儿。

搭建物理世界

物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是Box2D物理引擎的JavaScript版本。Box2D引擎里面有一个很好的功能DebugDraw，可以模拟出我们预设的物理世界并展示给我们看，非常适合我们做快速游戏原型开发。

下图就是使用DebugDraw绘制出来的《拯救PAPA》中的物理世界实例：

图1

构建物理世界的时候，首先我们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理参数。

1. 		// 创建物理世界实例  

2. var world = new b2World(new b2Vec2(0, 9.8), true);  
3. var scale = 1 / 30; /*像素与Box2D里的长度单位的转换*/  
4.  
5. // 创建地面和其物理性质的设定  
6. var bodyDef = new b2BodyDef();  
7. var body = world.CreateBody(bodyDef);  
8. var fixtureDef = new b2FixtureDef();  
9. fixtureDef.density = 10;  
10. fixtureDef.friction = 0.3;  
11. fixtureDef.restitution = 0.1;  
12. var polygonShape = new b2PolygonShape();  
13. polygonShape.SetAsBox(800 * scale, 20 * scale);  
14. fixtureDef.shape = polygonShape; body.SetType(b2Body.b2_staticBody);  
15. body.CreateFixture(fixtureDef);  
16. body.SetPosition(new b2Vec2(400 * scale, 490 * scale));  
17.  
18. // 创建PAPA方块和其物理性质的设定  
19. var bodyDef = new b2BodyDef();  
20. var body = world.CreateBody(bodyDef);  
21. var fixtureDef = new b2FixtureDef();  
22. fixtureDef.density = 10; /* density 为密度*/  
23. fixtureDef.friction = 0.3; /* friction 为摩擦系数*/  
24. fixtureDef.restitution = 0.8; /* restitution 为弹性系数*/  
25. var polygonShape = new b2PolygonShape();  
26. polygonShape.SetAsBox(30 * scale, 30 * scale);  
27. fixtureDef.shape = polygonShape;  
28. body.SetType(b2Body.b2_dynamicBody);