大名鼎鼎的物理引擎box2d基本上大家都听说过，网上有两个javascript版本的box2d库，一个时box2djs，已经停止维护，一个是box2dweb。下面就来介绍一下box2dweb的基本信息。
一 包，类介绍
BOX2D.Collision>>>碰撞，冲击包；
b2AABB AABB坐标b2OBB OBB坐标b2ContactID 接触IDb2ContactPoint 接触点b2ManifoldPoint 繁殖点BOX2D.Collision.Shapes>>>碰撞形状形变包；b2CircleShape 圆外形.b2EdgeChainDef边缘图形.b2MassData 质量运算器.b2PolygonShape 凸多边形.b2Shape 图形基类.BOX2D.Common >>>通用包；b2Color 调试绘图颜色.b2Settings 全局设置BOX2D.Common.Math>>>通用数学包；b2Mat22 2*2 矩阵b2Mat33 3*3 矩阵b2Sweep 碰撞描述.b2Vec2 向量(x ,y).b2Vec3 向量(x, y z).b2XForm 坐标转换,平移或旋转BOX2D.Dynamics>>>动态包；b2Body 刚体或叫物体.b2BodyDef 刚体定义.b2ContactFilter 继承这个类用来获取过滤碰撞b2ContactListener 继承这个类用来获取碰撞结果,根据这个判断游戏逻辑或声音处理. 你也可以获取碰撞在时间步后,时间步会有一个碰撞列表.然而你也有可能漏掉一些碰撞,因为在一个时间步内有多个子步.你应该尽量提高碰撞回调方法的效率,因为在每个时间步内有诸多回调.b2FilterData 碰撞过滤数据b2DebugDraw 调试绘图,用于调试.b2DestructionListener 关节或外形销毁时处理方法b2FixtureDef 材质定义类b2Fixture材质类b2World 物理世界Box2D.Dynamics.Contacts>>>碰撞管理包b2Contact 管理两个外形接触.b2ContactEdge 接触边用来连接多个物体和接触到一个接触表(物体是一个节点而接触相当于一个接触边)b2ContactResult 记录接触结果BOX2D.Dynamics.Joints>>>动态关节包；b2DistanceJoint 距离连接b2DistanceJointDef 距离连接定义.b2GearJoint 齿轮连接.b2GearJointDef 齿轮连接定义.b2Joint 连接基类.b2JointDef 连接定义基类.b2JointEdge 用于组合刚体或连接到一起.刚体相当于节点,而连接相当于边b2MouseJoint 鼠标连接.b2MouseJointDef 鼠标连接定义.b2PrismaticJoint 移动连接.b2PrismaticJointDef 移动连接定义.b2PulleyJoint 滑轮连接.b2PulleyJointDef 滑轮连接定义.b2RevoluteJoint 旋转连接.b2RevoluteJointDef 旋转连接定义.二 创建世界
var world = new b2World( gravity, doSleep);
上面这段代码就创建了一个box2d的世界（Box2D.Dynamics.b2World），所有的box2d中的物体都依托于这个世界存在。下面详细介绍:
gravity 定义了世界的重力 也是一个2d向量（Box2D.Common.Math.b2Vec2(x,y)),其中x是水平方向重力，正为右，负为左；y是垂直方向重力，正为下，负为上。var gravity=new b2Vec2(0,300）;
doSleep 一个布尔值变量，设定了当物体停止移动时是否允许物体休眠。一个休眠中的物体不需要任何模拟。常用的方法:CreateBody(b2BodyDef);//*所有世界中的物体都必须由本方法创建DestoryBody(b2Body);ClearForces();GetBodyList();GetBodyCount();GetJointCount();GetJointList();IsLocked();SetDebugDraw(b2DebugDraw);Step(dt, velocityIterations, positionIterations);上面我们就创建了一个box2d的世界。下面让我们来看如何向这个世界中添加物体。
三 创建物体、刚体
1 首先要创建一个物体定义
var bodydef=new b2BodyDef();// 物体类型定义，基本上常用的有两种定义：b2_staticBody 静态物体; .b2_dynimacBod动态物体bodydef.type= b2Body.b2_staticBody;//定义物体位置。也可以这样 bodydef.position.x=10; bodydef.position.y=10;bodydef.position.Set(x,y);//定义用户自己的数据bodydef.userData=*;
2 其次要定义一个材质定义
var fixDef = new b2FixtureDef();fixDef.density = 1.0; // desity 密度，如果密度为0或者null，该物体则为一个静止对象fixDef.friction = 0.5; //摩擦力（0~1）fixDef.restitution = 0.2;// 弹性（0~1）
fixDef.sharp=new b2PolygonShape();fixDef.sharp.SetAsBox(100/30,20/30);fixDef.sharp=new b2CircleShape(60/30);fixDef.sharp=new b2CircleShape();fixDef.sharp.SetRadius(100/30);fixDef.shape.SetAsArray([new b2Vec2(0,0),new b2Vec2(2,0),new b2Vec2(3,1.5),new b2Vec2(2,3),new b2Vec2(0,3),new b2Vec2(-1,1.5)],6);
4 根据物体定义，材质定义创建物体
var body=world.CreateBody(bodydef);body.CreateFixture(fixDef);
四 调试
实现一个基于html5的canvas对象的2d上下文的调试实例，并利用SetDebugDraw方法将其赋予一个世界。
var debugDraw = new b2DebugDraw();debugDraw.SetSprite(document.getElementById("canvas").getContext("2d"));debugDraw.SetDrawScale(30.0);debugDraw.SetFillAlpha(0.3);debugDraw.SetLineThickness(1.0);debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);world.SetDebugDraw(debugDraw); 五 世界更新
一切都准备好了，我们要让所有对象模拟运动。其实他也是通过侦听帧频率而不断刷新实现的，把上面那两个参数传入世界对象的Step方法中即可，
同时我们需要遍历世界中的一切对象，并对每个对象的坐标和角度进行更新。function update() {world.Step(1/60//帧率,10//速率, 10//position iterations);world.DrawDebugData();//绘制调试数据world.ClearForces();//绘制完毕后清除外力};//循环更新和绘制世界setInteval(update,1000 / 60);