box2d 初识 强大的物理碰撞引擎 结合canvas

一个小的Demo

http://jsfiddle.net/qAjPt/

Box2D是一个用于模拟2D刚体物体的C++引擎。作者为Erin Catto。Box2D使用zlib许可。zlib许可是一个自由软件授权协议，但并非copyleft。

它已被用于蜡笔物理学、愤怒的小鸟、Rolando、Fantastic Contraption、Incredibots、Tiny Wings、Transformice、Happy Wheels等游戏的开发，[3]对于iPhone、iPad和Android游戏，可以使用Cocos2d游戏引擎和Corona Framework。

百度百科：http://baike.baidu.com/link?url=u0_cLX42FXa3Tt8q6QvSS8VcCHJcFu4Fmk_BIJhWz4DXpU_UMK7DZHi1Ab8qXuaWyICyr1bQtdmSw72BER13Rq

Box2D分为box2d-flash和box2d-js，下面主要说box2d-js

画矩形

var Shape3 = new b2BoxDef();    //Shape3:矩形
    Shape3.extents.Set(300, 5);         //定义矩形高、宽
    Shape3.userData = "#000";
    var BodyDef = new b2BodyDef();
    BodyDef.position.Set(200, 500);    //设置物体的初始位置
    BodyDef.AddShape(Shape3);          //物体中加入Shape3
    world.CreateBody(BodyDef);

和canvas不同的是，box2d的形状，需要先定义物体，然后定义形状，

把物体装进形状，在此时可以添加box2d的属性，例如弹性，摩擦力等

，然后用canvas原生方法把图形画出来。

这个可以当作库方法来使用，用来画形状

function drawJoint(joint, context) {
    var b1 = joint.m_body1;
    var b2 = joint.m_body2;
    var x1 = b1.m_position;
    var x2 = b2.m_position;
    var p1 = joint.GetAnchor1();
    var p2 = joint.GetAnchor2();
    context.strokeStyle = '#000';
    context.beginPath();
    switch (joint.m_type) {
    case b2Joint.e_distanceJoint:
        context.moveTo(p1.x, p1.y);
        context.lineTo(p2.x, p2.y);
        break;

    case b2Joint.e_pulleyJoint:
        // TODO
        break;

    default:
        if (b1 == world.m_groundBody) {
            context.moveTo(p1.x, p1.y);
            context.lineTo(x2.x, x2.y);
        }
        else if (b2 == world.m_groundBody) {
            context.moveTo(p1.x, p1.y);
            context.lineTo(x1.x, x1.y);
        }
        else {
            context.moveTo(x1.x, x1.y);
            context.lineTo(p1.x, p1.y);
            context.lineTo(x2.x, x2.y);
            context.lineTo(p2.x, p2.y);
        }
        break;
    }
    context.stroke();
}
function drawShape(shape, context) {
    
    
    context.fillStyle = shape.m_userData;
    context.beginPath();
    switch (shape.m_type) {
    case b2Shape.e_circleShape:
        {
            var circle = shape;
            var pos = circle.m_position;
            var r = circle.m_radius;
            var segments = 16.0;
            var theta = 0.0;
            var dtheta = 2.0 * Math.PI / segments;
            // draw circle
            context.moveTo(pos.x + r, pos.y);
            for (var i = 0; i < segments; i++) {
                var d = new b2Vec2(r * Math.cos(theta), r * Math.sin(theta));
                var v = b2Math.AddVV(pos, d);
                context.lineTo(v.x, v.y);
                theta += dtheta;
            }
            context.lineTo(pos.x + r, pos.y);
    
            // draw radius
            context.moveTo(pos.x, pos.y);
            var ax = circle.m_R.col1;
            var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
            context.lineTo(pos2.x, pos2.y);
        }
        break;
    case b2Shape.e_polyShape:
        {
            
            var poly = shape;
            var tV = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
            context.moveTo(tV.x, tV.y);
            for (var i = 0; i < poly.m_vertexCount; i++) {
                var v = b2Math.AddVV(poly.m_position, b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
                context.lineTo(v.x, v.y);
            }
            context.lineTo(tV.x, tV.y);
        }
        break;
    }
    context.fill();
}