大名鼎鼎的物理引擎box2d基本上大家都听说过，网上有两个javascript版本的box2d库，一个时box2djs，已经停止维护，一个是box2dweb。下面就来介绍一下box2dweb的基本信息。
一 包，类介绍
BOX2D.Collision>>>碰撞，冲击包；
b2AABB AABB坐标
b2OBB OBB坐标
b2ContactID 接触ID
b2ContactPoint 接触点
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）
3 为材质定义添加一个形状
b2PolygonShape多边形；b2CircleSharp圆形设置该材质形状的大小；b2PolygonShape对应着SetAsBox(halfWidth,halfHeight)方法设置半长半宽，值//得注意的是Box2d中的单位//是米，一米是30像素，如果自定义多边形可以使用一个SetAsArray(vertexArray,vertexCount)，其中vertexArray为顶点矢量（b2Vec2）数组，vertexCount为顶点数，最多8个。b2CircleSharp对应的设置属性为SetRadius(radius);
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);
其他一些属性
body.ApplyForce(force, point); //添加一个外力，force一个b2Vec2的向量代表外力，point一个b2Vec2的向量代表物体的着力点。
body.SetMassFromShapes();//根据形状计算质量
四 调试
实现一个基于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);