初识box2dweb-canvasexplorer

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

第一步:需要引用canvasexplorer

          <script type="text/javascript" src="http://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="http://files.cnblogs.com/mytree/excanvas.js" οnlοad="explorercanvasload"></script>
        <script type="text/javascript">
            Object.defineProperty = function(a, b, c) {
            };
        </script>
    <![endif] --> 

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

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

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

     < script  src ="http://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 > 

转载于:https://www.cnblogs.com/mytree/archive/2012/11/13/2767551.html