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 汽車的第一部分。通過使用矢量圖形而不是位圖可以讓外觀更好看。矢量圖形能在所有分辨率下呈現流暢的圖形效果，因為它在調整大小后會保留細節。