index.html页面

<?php
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" >
        <title>Box2d Test</title>
        <script src="js/Box2d.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="js/box2d.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body οnlοad="init();">
        <canvas id="canvas" width="640" height="480" style="border: 1px solid black;">Your browser does not support HTML5 Canvas</canvas>
    </body>
</html>

box2d.js页面

var world;
var scale = 30;//在canvas上的30像素表示Box2d世界中的1米

function init() {
    var gravity = new Box2D.Common.Math.b2Vec2(0,9.8);//表明重力加速度为9.8m/s平方,方向向下
    var allowSleep = true;//允许静止的物体进入休眠状态,休眠物体不参与物理仿真计算
    world = new Box2D.Dynamics.b2World(gravity,allowSleep);

    createFloor();

    //创建一些具有简单形状的物体
    createRectangularBody();
    createCircularBody();
    createSimplePolygonBody();
    createComplexbody();
    createResoluteJoint();
    createSpecialBody();
    listenForContact();
    setupDebugDraw();


    animate();
}

function drawSpecialBody() {
    var positon = specialBody.GetPosition();
    var angle = specialBody.GetAngle();

    //移动并旋转物体
    context.translate(positon.x*scale,positon.y*scale);
    context.rotate(angle);

    //绘制实心的圆面
    context.fillStyle = "rgb(200,150,250);";
    context.beginPath();
    context.arc(0,0,30,0,2*Math.PI,false);
    context.fill();

    //绘制两个矩形的眼睛
    context.fillStyle = "rgb(255,255,255);";
    context.fillRect(-15,-15,10,5);
    context.fillRect(5,-15,10,5);

    //绘制向上或向下的圆弧,根据生命值决定是否微笑
    context.strokeStyle = "rgb(255,255,255);";
    context.beginPath();
    if(specialBody.GetUserData().life > 100){
        context.arc(0,0,10,Math.PI,2*Math.PI,true);
    }else{
        context.arc(0,10,10,Math.PI,2*Math.PI,false);
    }
    context.stroke();

    context.rotate(-angle);
    context.translate(-positon.x*scale,-positon.y*scale);
}

var specialBody;
function createSpecialBody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef.position.x = 450/scale;
    bodyDef.position.y = 0/scale;

    specialBody = world.CreateBody(bodyDef);
    specialBody.SetUserData({name:"special",life:250});//设置物体的自定义属性

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1.0;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.5;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2CircleShape(30/scale);
    var fixture = specialBody.CreateFixture(fixtureDef);
}

function listenForContact() {
    /*
     Box2D.Dynamics.b2ContactListener 对象的方法
    BeginContact():两个物体开始接触时被调用
    EndContact():两个物体结束接触时被调用
    PostSolve():求解器完成后调用,进行碰撞检测时很有用
    PreSolve():在求解器求解前调用
     */
    var listener = new Box2D.Dynamics.b2ContactListener;
    listener.PostSolve = function(contact,impulse){
        var body1 = contact.GetFixtureA().GetBody();
        var body2 = contact.GetFixtureB().GetBody();

        if(body1 == specialBody || body2 == specialBody){
            var impulseAlongNormal = impulse.normalImpulses[0];
            specialBody.GetUserData().life -= impulseAlongNormal;

            console.log("The special body was in a collision with impulse",impulseAlongNormal,"and its life has now become",
            specialBody.GetUserData().life);
        }
    };
    world.SetContactListener(listener);
}
//创建转动关节
function createResoluteJoint() {
    //定义第一个物体
    var bodyDef1 = new Box2D.Dynamics.b2BodyDef();
    bodyDef1.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef1.position.x = 480/scale;
    bodyDef1.position.y = 50/scale;
    var body1 = world.CreateBody(bodyDef1);

    var fixtureDef1 = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef1.density = 1.0;
    fixtureDef1.friction = 0.5;
    fixtureDef1.restitution = 0.5;
    fixtureDef1.shape = new Box2D.Collision.Shapes.b2PolygonShape();
    fixtureDef1.shape.SetAsBox(50/scale,10/scale);
    body1.CreateFixture(fixtureDef1);

    var bodyDef2 = new Box2D.Dynamics.b2BodyDef();
    bodyDef2.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef2.position.x = 470/scale;
    bodyDef2.position.y = 50/scale;
    var body2 = world.CreateBody(bodyDef2);

    //创建第二个载具并向物体中添加多边形形状
    var fixtureDef2 = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef2.density = 1.0;
    fixtureDef2.friction = 0.5;
    fixtureDef2.restitution = 0.5;
    fixtureDef2.shape = new Box2D.Collision.Shapes.b2PolygonShape();

    var points = [
        new Box2D.Common.Math.b2Vec2(0,0),
        new Box2D.Common.Math.b2Vec2(40/scale,50/scale),
        new Box2D.Common.Math.b2Vec2(50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-40/scale,50/scale)
    ];

    fixtureDef2.shape.SetAsArray(points,points.length);
    body2.CreateFixture(fixtureDef2);

    //创建接合点连接body1和body2
    var jointDef = new Box2D.Dynamics.Joints.b2RevoluteJointDef();
    var jointCenter = new Box2D.Common.Math.b2Vec2(470/scale,50/scale);

    jointDef.Initialize(body1,body2,jointCenter);//指出接入物及接入点
    world.CreateJoint(jointDef);//创建接入点 并加入世界
}

//创建由两个物体组成的物体
function createComplexbody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef.position.x = 350/scale;
    bodyDef.position.y = 50/scale;
    var body = world.CreateBody(bodyDef);

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1.0;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.7;
    fixtureDef.shape = new Box2D.Collision.Shapes.b2CircleShape(40/scale);
    body.CreateFixture(fixtureDef);

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
    var points = [
      new Box2D.Common.Math.b2Vec2(0,0),
        new Box2D.Common.Math.b2Vec2(40/scale,50/scale),
        new Box2D.Common.Math.b2Vec2(50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-40/scale,50/scale)
    ];

    fixtureDef.shape.SetAsArray(points,points.length);

    body.CreateFixture(fixtureDef);


}

function createSimplePolygonBody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodyDef.position.x = 230/scale;
    bodyDef.position.y = 50/scale;

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.2;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();

    var points = [
        new Box2D.Common.Math.b2Vec2(0,0),
        new Box2D.Common.Math.b2Vec2(40/scale,50/scale),
        new Box2D.Common.Math.b2Vec2(50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-50/scale,100/scale),
        new Box2D.Common.Math.b2Vec2(-40/scale,50/scale)
    ];

    fixtureDef.shape.SetAsArray(points,points.length);

    var body = world.CreateBody(bodyDef);

    var fixture = body.CreateFixture(fixtureDef);

    /*
    所有的坐标都是相对于物体原点的.第一个点(0,0)开始于物体的原点,将被放置在物体的位置(230,50).
    无须闭合多边形,Box2D会自动帮我们完成它.
    所有的顶点必须以顺时针方向定义
     */

}

function createRectangularBody() {
   var bodydef =new Box2D.Dynamics.b2BodyDef();
    bodydef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
    bodydef.position.x = 40 / scale;
    bodydef.position.y = 100 / scale;

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density = 1;//密度
    fixtureDef.friction = 0.5;//摩擦系数
    fixtureDef.restitution = 0.8;//弹性恢复系数

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
    fixtureDef.shape.SetAsBox(30/scale,50/scale);

    var body = world.CreateBody(bodydef);
    var fixture = body.CreateFixture(fixtureDef);
}

function createCircularBody() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef();
    bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;

    bodyDef.position.x = 130/scale;
    bodyDef.position.y = 100/scale;

    var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
    fixtureDef.density  = 1;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.7;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2CircleShape(30/scale);
    var body = world.CreateBody(bodyDef);
    var fixture = body.CreateFixture(fixtureDef);

}

var timeStep = 1 / 60;

//按照Box2D手册建议的迭代数,速度是8,位置是3
var velocityIterations = 8;
var positionIterations = 3;

function animate() {
    world.Step(timeStep,velocityIterations,positionIterations);
    world.ClearForces();
    world.DrawDebugData();

    if(specialBody && specialBody.GetUserData().life <= 0){
        world.DestroyBody(specialBody);//将物体从世界中移除
        specialBody = undefined;
        console.log("The special body was destroyed");
    }
    if(specialBody){
        drawSpecialBody();
    }
    setTimeout(animate,timeStep);
}


function createFloor() {
    var bodyDef = new Box2D.Dynamics.b2BodyDef;
    bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody;
    bodyDef.position.x = 640/2/scale;
    bodyDef.position.y = 450/scale;

    //fixture用来向body添加shape以实现碰撞检测
    var fixtureDef = new Box2D.Dynamics.b2FixtureDef;
    fixtureDef.density = 1.0;
    fixtureDef.friction = 0.5;
    fixtureDef.restitution = 0.2;

    fixtureDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
    fixtureDef.shape.SetAsBox(320/scale,10/scale);

    var body = world.CreateBody(bodyDef);
    var fixture = body.CreateFixture(fixtureDef);

}

var context;
function setupDebugDraw() {
    context = document.getElementById('canvas').getContext('2d');
    var debugDraw = new Box2D.Dynamics.b2DebugDraw();

    //使用canvas绘图环境来绘制调试画面
    debugDraw.SetSprite(context);
    //设置绘图比例
    debugDraw.SetDrawScale(scale);
    //填充的透明度为0.3
    debugDraw.SetFillAlpha(0.3);
    //线条的宽度为1
    debugDraw.SetLineThickness(1.0);
    //绘制所有的shape和joint
    debugDraw.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit | Box2D.Dynamics.b2DebugDraw.e_jointBit);

    //设置调制绘图模式
    world.SetDebugDraw(debugDraw);
}