使用HTML 5制作物理游戏.pdfVIP

HTML5技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功 能让我们在浏览器上开发游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引 擎，我们可以轻松地完成休闲游戏的开发。玩家只需打开浏览器，不用安装插件便可以享受 到游戏带来的乐趣。 本文由NTFusion团队所作，结合了他们在GoogleChromeWebStore上发布的《拯 救PAPA》和大家分享一下使用HTML5开发物理游戏的心得。 在阅读本文之前，您可以从ChromeWebStore安装《拯救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); 29 body.CreateFixture(fixtureDef); 30 body.SetPosition(new b2Vec2(400 * scale, 100 * scale)); 物理世界构建完毕后，通过DebugDraw功能我们就可以看到游戏的原型，这样我们就 可以在这个基础上调整物体的参数、制作关卡等等。这些工作完成以后，下一步我们需要在