HTML5制作基于模拟现实物理效果的游戏代码

简介

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

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

搭建物理世界

物理游戏当中的一切物体，都是在一个设定好的物理世界中运作的。创建物理世界，我们现在使用的是Box2D物理引擎的JavaScript版本。构建物理世界的时候，首先我们需要定义相关的物理物体，然后根据游戏的特性所需，设定相关的物理参数。

// 创建物理世界实例var world = new b2World(new b2Vec2(0, 9.8), true);var scale = 1 / 30; /*像素与Box2D里的长度单位的转换*/// 创建地面和其物理性质的设定var bodyDef = new b2BodyDef();var body = world.CreateBody(bodyDef);var fixtureDef = new b2FixtureDef();fixtureDef.density = 10;fixtureDef.friction = 0.3;fixtureDef.restitution = 0.1;var polygonShape = new b2PolygonShape();polygonShape.SetAsBox(800 * scale, 20 * scale);fixtureDef.shape = polygonShape; body.SetType(b2Body.b2_staticBody);body.CreateFixture(fixtureDef);body.SetPosition(new b2Vec2(400 * scale, 490 * scale));// 创建PAPA方块和其物理性质的设定var bodyDef = new b2BodyDef();var body = world.CreateBody(bodyDef);var fixtureDef = new b2FixtureDef();fixtureDef.density = 10; /* density 为密度*/fixtureDef.friction = 0.3; /* friction 为摩擦系数*/fixtureDef.restitution = 0.8; /* restitution 为弹性系数*/var polygonShape = new b2PolygonShape();polygonShape.SetAsBox(30 * scale, 30 * scale);fixtureDef.shape = polygonShape;body.SetType(b2Body.b2_dynamicBody);body.CreateFixture(fixtureDef);body.SetPosition(new b2Vec2(400 * scale, 100 * scale));        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。