初识box2dweb-canvasexplorer

前面我们已经可以使用box2dweb创建一个简单的自由落体运动,但是只有支持canvas的浏览器才能运行,下面我们加上canvasexplorer,让box2dweb也能在ie上run

第一步:需要引用canvasexplorer

          <script type="text/javascript" src="https://files.cnblogs.com/mytree/excanvas.js" onload="explorercanvasload"></script>

第二步:IE不支持defineProperty,因此我们需要为Object添加defineProperty

Object.defineProperty = function(a, b, c) {
            }; 

完整代码

<!--[if IE]>
        <script type="text/javascript" src="https://files.cnblogs.com/mytree/excanvas.js" onload="explorercanvasload"></script>
        <script type="text/javascript">
            Object.defineProperty = function(a, b, c) {
            };
        </script>
    <![endif]--> 

第三步:开始构建我们自己的box2d代码,全部代码如下

<!--[if IE]>
        <script type="text/javascript" src="https://files.cnblogs.com/mytree/excanvas.js" onload="explorercanvasload"></script>
        <script type="text/javascript">
            Object.defineProperty = function(a, b, c) {
            };
        </script>
    <![endif]-->

    <script src="https://files.cnblogs.com/mytree/Box2dWeb-2.1.a.3.js" type="text/javascript"></script>

    <script src="https://files.cnblogs.com/mytree/javascript-animate.js" type="text/javascript"></script>

    <canvas id="canvas" width="400" height="300"></canvas>

    <script type="text/javascript">
        var world;
        var ctx;
        var timer;
        window.onload = function () {
            ctx = document.getElementById("canvas").getContext("2d");
            world = new Box2D.Dynamics.b2World(new Box2D.Common.Math.b2Vec2(0, 10), true);
            var bodyDef = new Box2D.Dynamics.b2BodyDef();
            bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody;
            bodyDef.position.Set(200 / 30, 295 / 30);
            var fixDef = new Box2D.Dynamics.b2FixtureDef();
            fixDef.density = 1.0;
            fixDef.friction = 0.2;
            fixDef.restitution = 0.5;
            fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape();
            fixDef.shape.SetAsBox(200 / 30, 5 / 30);
            world.CreateBody(bodyDef).CreateFixture(fixDef);

            bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
            bodyDef.position.Set(200 / 30, 0);
            fixDef.shape = new Box2D.Collision.Shapes.b2CircleShape(10 / 30);
            world.CreateBody(bodyDef).CreateFixture(fixDef);

            var debug = new Box2D.Dynamics.b2DebugDraw();
            debug.SetSprite(ctx);
            debug.SetDrawScale(30);
            debug.SetAlpha(0.5);
            debug.SetFlags(Box2D.Dynamics.b2DebugDraw.e_shapeBit
                | Box2D.Dynamics.b2DebugDraw.e_centerOfMassBit);
            world.SetDebugDraw(debug);

            update();
        };
        function update() {
            world.Step(1 / 60, 10, 8);
            world.DrawDebugData();
            world.ClearForces();
            timer = requestAnimationFrame(update);
        }    
</script>