CodeForge

height:1.5;">连接到一起，可进行某种运动。在这里我们使用棱柱、旋转和鼠标关节。

棱柱关节允许两个刚体”沿特定轴相对转化。棱柱关节阻止了刚体间的相对旋转。
旋转关节允许两个刚体绕着锚定点旋转。
鼠标关节仅用于连接轮子和底盘，不让这些刚体直接接触。
图像：棱柱和旋转关节 

有时不需要让关节在范围内完全运动，这时可以使用关节限制来限制关节的运动。关节也可以应用马达，马达会根据关节的自由水平，驱动相连刚体的运动。
汽车

汽车包含 5 个刚体，底盘、轮子、 减震器 (悬架)。所有刚体都是部分动态的，这意味着静态或动态部分之间互相交互 并完全模拟： 在力和速率的作用下运动。减震器只是个不可见的小部件，仅提供棱柱和旋转关节之间的连接。通过棱柱关节，减震器从顶向下运动，轮子通过旋转关节连接到减震器上，可以围绕自己的中心旋转。轮子是跟地面接触。它们的摩擦（以及地面的摩擦）会影响汽车的粘合。
在这里的例子中，汽车的功能全部由Car 类提供。创建函数创建新的汽车。
例子：创建汽车的所有刚体

function create(scene, x, y)
{
    var damperHeight = 8*this._images.wheel.width * this._scale/10;
    var wheelDistance = 7 * this._images.body.width*this._scale / 10;
 
    // create bodies:
    this._body = scene.addPolygonBody(this._images.body, #dynamic, 0.1, 0.0, 0.0, this._images.body.width*this._scale, this._images.body.height*this._scale);
    this._body.z = 2;
    this._body.scale = this._scale;
    this._body.setPosition(x, y);
    // FRONT
    this._frontDamper = scene.addPolygonBody(null, #dynamic, 10.0, 0.0, 0.0, 2, this._images.wheel.width / 2 * this._scale);
    this._frontDamper.setPosition(x + wheelDistance / 2, y + damperHeight - this._images.wheel.width / 4 * this._scale);
 
    this._frontWheel = scene.addCircleBody(this._images.wheel, #dynamic, 0.1, 0.4, 0.0, this._images.wheel.width / 2 * this._scale);
    this._frontWheel.scale = this._scale;
    this._frontWheel.setPosition(x + wheelDistance / 2, y + damperHeight);
 
    // BACK
    this._backDamper = scene.addPolygonBody(null, #dynamic, 10.0, 0.0, 0.0, 2, this._images.wheel.width / 2 * this._scale);
    this._backDamper.setPosition(x - wheelDistance / 2, y + damperHeight - this._images.wheel.width / 4 * this._scale);
 
    this._backWheel = scene.addCircleBody(this._images.wheel, #dynamic, 0.1, 0.4, 0.0, this._images.wheel.width / 2 * this._scale);
    this._backWheel.scale = this._scale;;
    this._backWheel.setPosition(x - wheelDistance / 2, y + damperHeight);
    ...  JOINTS ....

所有刚体都通过关节连接到一起。减震器通过棱柱关节连接到底盘。棱柱关节中应用限制和马达。限制会限制关节传动的上限和下限。传动上限是悬架完全伸展时轮子的最低位置，下限是相反位置。
棱柱关节也使用马达来驱动悬架的垂直运动。马达的最大力低于当轮子撞到障碍时影响轮子的力，但是大于轮子的重力，让轮子能很好地越过障碍。
旋转关节用于使轮子绕中心旋转。旋转关节应用马达让汽车有足够的力运动。汽车的速度根据用户事件而更改。
Image: 关节


例子: 创建关节
  

   // JOINTS
    // prismatic joins
    var jointDef = {
        lowerTranslation    : -3 * (damperHeight / scene.scale) / 10, //(damperHeight / 5) / scene.scale,  /*meters*/
        upperTranslation    : 0.0,  /*meters*/
        enableLimit         : true,
        enableMotor         : true,
        motorSpeed          : 2.5,
        maxMotorForce       : this._body.getMass() * 8.5,
    }
    this._joints.push(scene.createPrismaticJoint(this._frontDamper, this._body, x + wheelDistance / 2, y, 0.0, 1.0, 0.0, jointDef, false));
    this._joints.push(scene.createPrismaticJoint(this._backDamper, this._body, x - wheelDistance / 2, y, 0.0, 1.0, 0.0, jointDef, false));
 
    // revolute joints
    jointDef = {
        enableMotor     : true,         // enable motor
        maxMotorTorque  : 1500000,         // maximum torque
        motorSpeed      : 0.0,         // it is changed latery*/
    }
   this._motorJoint = scene.createRevoluteJoint(this._frontDamper, this._frontWheel, x + wheelDistance / 2, y + damperHeight, jointDef, false);
   this._motorJointB = scene.createRevoluteJoint(this._backDamper, this._backWheel, x - wheelDistance / 2, y + damperHeight, jointDef, false);
 
   this._joints.push(this._motorJoint);
   this._joints.push(this._motorJointB);
   this._joints.push(scene.createMouseJoint(this._body, this._frontWheel, null, false));
   this._joints.push(scene.createMouseJoint(this._body, this._backWheel, null, false));
}

通过更改旋转关节上的马达可以让汽车减速或者提速。
例子: 提速

function speedUp()
{
    // check if motors does not have maximum speed
    if (this._motorJoint.motorSpeed > -12*Math.PI) {
        // speed motors up
        this._motorJoint.motorSpeed -= this._speedStep;
        this._motorJointB.motorSpeed -= this._speedStep;
    }
}

场景
汽车场景中有很多小的障碍来展示悬架的工作原理。障碍是在整个场景中随机分布的小矩形。在场景中还有 3 个跳跃。汽车运行的场景通常比设备的屏幕大。这就意味这需要横向或者纵向滚动场景。要滚动场景，可以滚动绘制场景的画布。画布使用绘图方法滚动。

例子: 在滚动画布上绘制场景

function draw(canvas)
{
    // draw background
    canvas.drawRect(0, 0, System.width, System.height, this._bg);
    // save default canvas state (without translation)
    canvas.save();
    // translate canvas
    canvas.translate(this._translateX, this._translateY);
    this._x += this._translateX;
    this._translateX = 0;
    // draw all scene elements
    super.draw(canvas);
     // restore default canvas state (without translation)
    canvas.restore();
}

变量 ._translateX 和 ._translateY 在过程函数中会更新，该函数每25ms 被调用一次。该函数会检查汽车当前位置并更新转换变量。

例子: 更新转化变量

// reaction to onproces event (repeates about every 25 miliseconds) function process()
{
   var (x, y) = this._car.getPosition(); if (true) { this._translateX = -1*((x) - (4*System.width / 10)); this.menu.translateX = this._translateX;
    } if (y < 2*System.height / 10) { this._translateY = -1*(y - 2*System.height / 10); this.menu.translateY = this._translateY;
    } if (y > 8*System.height / 10) { this._translateY = 1*(y - 8*System.height / 10); this.menu.translateY = this._translateY;
    } // create step in physics world  this.step(1.0/40.0);
}

改进


这是介绍如何制作基本的 box2d 汽车的第一部分。通过使用矢量图形而不是位图可以让外观更好看。矢量图形能在所有分辨率下呈现流畅的图形效果，因为它在调整大小后会保留细节。