title: Cocos2D-JS Can not simulate Physics
body: <p>I am trying to simulate physics in Cocos2D-JS but I do not succeed. I am new to Cocos2D-JS. Can someone tell me why my Sprites are not falling if I have the world set with gravity to True? and also why does the DistanceJoint not work? Thank you very much.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var b2Vec2 = Box2D.Common.Math.b2Vec2
      , b2AABB = Box2D.Collision.b2AABB
      , b2BodyDef = Box2D.Dynamics.b2BodyDef
      , b2Body = Box2D.Dynamics.b2Body
      , b2FixtureDef = Box2D.Dynamics.b2FixtureDef
      , b2Fixture = Box2D.Dynamics.b2Fixture
      , b2World = Box2D.Dynamics.b2World
      , b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
      , b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
      , b2DebugDraw = Box2D.Dynamics.b2DebugDraw
      , b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef
      , b2DistanceJointDef =  Box2D.Dynamics.Joints.b2DistanceJointDef
      , b2Shape = Box2D.Collision.Shapes.b2Shape
      , b2_dynamicBody =  Box2D.Dynamics.b2_dynamicBody
  
  var HelloWorldLayer = cc.Layer.extend({
      spriteSoccerball:null,
      spriteBasketball:null,
      ctor:function () {
          this._super();
          var size = cc.winSize;
          var gravity = new Box2D.Common.Math.b2Vec2(0, -10)
          world = new b2World(gravity,true);
          //--------------------------
          var helloLabel = new cc.LabelTTF("RoboArm", "Arial", 38);
          helloLabel.x = size.width / 2;
          helloLabel.y = size.height / 2 + 200;
          this.addChild(helloLabel, 5);
          //--------------------------
          spriteSoccerball = new cc.Sprite(res.soccerBall_png);
          spriteSoccerball.setPositionX(300);
          spriteSoccerball.setPositionY(300);
          spriteSoccerball.anchorX=0.5;
          spriteSoccerball.anchorY=0.5;
          spriteSoccerball.setScale(0.1, 0.1);
          this.addChild(spriteSoccerball, 0);
          //--------------------------
          spriteBasketball = new cc.Sprite(res.basketBall_png);
          spriteBasketball.setPositionX(200);
          spriteBasketball.setPositionY(200);
          spriteBasketball.anchorX=0.5;
          spriteBasketball.anchorY=0.5;
          spriteBasketball.setScale(0.1, 0.1);
          this.addChild(spriteBasketball, 0);
          //--------------------------
          a = createBody(world, spriteBasketball, spriteBasketball.getPositionX(), spriteBasketball.getPositionY(), 1, 1);
          b = createBody(world, spriteSoccerball, spriteSoccerball.getPositionX(), spriteSoccerball.getPositionY(), 1, 1);
          createDistanceJoint(world,a,b);
          //--------------------------
          var listener = cc.EventListener.create({
              event: cc.EventListener.TOUCH_ALL_AT_ONCE,
              onTouchBegan: function (touch, event) {
                  return true;
              },
              onTouchesMoved: function (touch, event) {
                  var pos = touch[0].getLocation();
                  a.SetPosition(pos);
                  return true;
              },
              onTouchEnded: function (touch, event) {
                  return true;
              }
          });
          cc.eventManager.addListener(listener, this);
          this.scheduleUpdate();
      },
      update: function (dt) {
          spriteBasketball.setPosition(a.GetPosition().x ,
              a.GetPosition().y);
          var timeStep = 1.0/(fps * 0.8);
          //move the box2d world ahead
          world.Step(timeStep , 8 , 3);
          world.ClearForces();
          //call this function again after 1/60 seconds or 16.7ms
          setTimeout(this.step , 1000 / fps);
      }
  });
  
  //Create standard boxes of given height , width at x,y
  function createBox(world, x, y, width, height, options)
  {
      var body_def = new b2BodyDef();
      var fix_def = new b2FixtureDef();
  
      fix_def.shape = new b2PolygonShape();
      fix_def.shape.SetAsBox( width/2 , height/2 );
  
      body_def.position.Set(x , y);
      body_def.linearDamping = 0.5;
      body_def.angularDamping = 0.5;
  
      var b = world.CreateBody( body_def );
      var f = b.CreateFixture(fix_def);
  
      return b;
  }
  
  //Create standard boxes of given height , width at x,y
  function createBody(world, sprite, x, y, width, height)
  {
      var body_def = new b2BodyDef;
      body_def.type = b2_dynamicBody;
      body_def.angle = 1;
      body_def.gravityScale = 1.0;
      body_def.position.Set(x, y);
      body_def.linearVelocity.Set(1,1);
      body_def.angularVelocity = 2.0;
      body_def.linearDamping = 3.0;
      body_def.angularDamping = 4.0;
      body_def.inertiaScale = 3.0;
      body_def.active=true;
  
      var fix_def = new b2FixtureDef;
      fix_def.shape = new b2PolygonShape();
      fix_def.shape.SetAsBox( width/2 , height/2 );
      fix_def.density = 1.0;
      fix_def.friction = 0.3;
  
      var b = world.CreateBody(body_def);
      b.CreateFixture(fix_def);
  
      return b;
  }
  
  function createDistanceJoint(world, a,b)
  {
      //create distance joint between b and c
      var joint_def = new b2DistanceJointDef;
      joint_def.bodyA = a;
      joint_def.bodyB = b;
  
      //connect the centers - center in local coordinate - relative to body is 0,0
      joint_def.localAnchorA = new b2Vec2(0.5,0.5);
      joint_def.localAnchorB = new b2Vec2(0.5,0.5);
  
      //difference in angle of each body
      joint_def.referenceAngle = 1 * Math.PI / 3;
  
      //add the joint to the world
      world.CreateJoint(joint_def);
  }
  
  var HelloWorldScene = cc.Scene.extend({
      onEnter:function () {
          this._super();
          var layer = new HelloWorldLayer();
          this.addChild(layer);
      }
  });</code></pre>
  </div>
  </div>
  </p>