Box2d – 用 JavaScript 构建物理世界

varlast=0;

functionanimate(time){

vartimeStep=time-last;

last=time;

//velocityInterations 是对速率的纠正程度, 越高计算量越大.

varvelocityInterations=10;

//velocityInterations 是对位置的纠正程度, 越高计算量越大.

varpositionIterations=10;

world.Step(timeStep,velocityInterations,positionIterations);

world.ClearForces();

world.DrawDebugData();//绘制绑定到debug视图上渲染

requestAnimationFrame(animate);

animate();

ardebug=newb2DebugDraw();

debug.SetSprite(document.getElementById("canvas").getContext("2d"));

debug.SetLineThickness(1);

debug.SetFillAlpha(0.9);

debug.SetAlpha(1);

debug.SetDrawScale(PTM_RATIO);

debug.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);

world.SetDebugDraw(debug);

//创建一个带有重力的世界（box2d中所有的物体都必须被包括在一种叫“世界”的大容器中）

vargravity=newb2Vec2(0,9.8);

vardoSleep=true;//当物体停止运动以后，停止对对象的物理模拟。

world=newb2World(gravity,doSleep);

//b2_dynamicBody说明他是一个 动态物体.

//就是说他不是一个像地面一样一动不动的东西，当你给他一个力，它就会动。

bodyDef.type=b2Body.b2_dynamicBody;

//定义了他在世界中的位置，PTM_RATIO 这个个东西是缩放比，后面会解释。

bodyDef.position.Set(canvaswidth/PTM_RATIO/2，canvasheight/PTM_RATIO/2);

varbody=world.CreateBody(bodyDef)//world.CreateBody 物体有这个方法来创建

varfixDef=newb2FixtureDef;//这货其实和 bodyDef一样 是材质的 “制造机”

fixDef.density=.5;//density 定义质量

fixDef.friction=0.4;//friction 定义表面的摩擦力

fixDef.restitution=0.8;//定义弹性

fixDef.shape=newb2CircleShape(10/drawScale);// 定义了 形状 ： b2CircleShape 圆形

body.CreateFixture(fixDef)//把我们创操出来的 材质 绑定到一个 物体上。

varfixDef=newb2FixtureDef;

fixDef.density=.5;

fixDef.friction=0.4;

fixDef.restitution=0.8;

varbodyDef=newb2BodyDef;

bodyDef.type=b2Body.b2_staticBody;

fixDef.shape=newb2PolygonShape;

fixDef.shape.SetAsBox(canvaswidth/PTM_RATIO/2,5/PTM_RATIO);

bodyDef.position.Set(canvaswidth/PTM_RATIO/2,(canvasheight-5)/PTM_RATIO);

world.CreateBody(bodyDef).CreateFixture(fixDef);

vardebug=newb2DebugDraw();

debug.SetSprite(document.getElementById("canvas").getContext("2d"));

debug.SetLineThickness(1);

debug.SetFillAlpha(0.9);

debug.SetAlpha(1);

debug.SetDrawScale(PTM_RATIO);

debug.SetFlags(b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit);

world.SetDebugDraw(debug);

setInterval(update,(1000/60));

functionupdate(){

vartimeStep=1/30;

varvelocityInterations=10;

varpositionIterations=10;

world.Step(timeStep,velocityInterations,positionIterations);

world.ClearForces();

world.DrawDebugData();//绘制绑定到debug视图上渲染 请看下文介绍

	
functionrender(){

varbList=world.GetBodyList();//获取刚体集合 注意他是一个链表.

while(bList){

varb=bList;

varbList=bList.GetNext();//获取下一个元素,如果到达最后,则返回 null

if(b.GetUserData()){

varimg=b.GetUserData();

img.style.top=b.GetPosition().y*30-25+"px";

img.style.left=b.GetPosition().x *30-25+"px";

img.style.webkitTransform="rotate("+b.GetAngle()*180/Math.PI+"deg)"