carGame game.js

var carGame = {};
var car;
var canvas;             // үндсэн канвас
var ctx;                // canvas ийн 2d хэлбэрийг хадгална
var canvasWidth;        // канвасын өргөн
var canvasHeight;       // канвасын өндөр
$(function() {
  carGame.world = createWorld();             // world обьектыг үүсгэж байна
  createGround();                            // газрыг үүсгэх
  createObstacle();
  carGame.car = createCarAt(50, 210);



  console.log("The world is created. ", carGame.world);   // Консол руу бичиж байна
  canvas = document.getElementById('game');       // канвасыг id гаар нь дамжуулж авах
  ctx = canvas.getContext('2d');                  // канвасын 2d хэлбэрийг авах
  canvasWidth = parseInt(canvas.width);
  canvasHeight = parseInt(canvas.height);
  drawWorld(carGame.world, ctx);                  // дэлхийг үүсгэх
  step();                       // цагийг ажиллуулах
});
function createObstacle() {
  var boxSd = new b2BoxDef();
  boxSd.density = 1.0;
  boxSd.friction = 1.5;
  boxSd.restitution = .4;
  boxSd.extents.Set(80, 150);
  // Тодорхойлсон биетээ бодитжуулах
  var boxBd = new b2BodyDef();
  boxBd.AddShape(boxSd);
  boxBd.position.Set(400, 150);
  carGame.world.CreateBody(boxBd);
}
function createWorld() {
  var worldAABB = new b2AABB();         // b2AABB функц нь хоосон орон зайг тодорхойлж өгдөг.
  worldAABB.minVertex.Set(-4000, -4000);    // зүүн дээрх өнцөг буюу left, top утга
  worldAABB.maxVertex.Set(4000, 4000);      // баруун доорх өнцөг буюу right, bottom утга. Ингэснээр 8000x8000 хэмжээтэй талбай үүслээ

  // b2Vec2 функцаар тухайн обьектын татах хүчийг тодорхойлж өгдөг.
  // Авах параметр нь 1x2 хэмжээс бүхий матрикс хэлбэртэй байдаг. Эгц доош нь 300 гийн таталт өгч байна.
  var gravity = new b2Vec2(0, 300);

  // Физик обьект хэт их оруулах нь тоглоомын FPS д сөргөөр нөлөөлдэг. Хэдий чинээ ихийг оруулна төдий чинээ
  // давталт, шалгалтууд gameloops д явагддаг. Үүнээс сэргийлэхийн тулд зарим обьектыг "унтуулах" буюу хөдөлгөөнгүй
  // бэхэлж, түүнийгээ жагсаалтаас гаргадаг.
  var doSleep = false;

  // b2World функцаар обьектыг үүсгэнэ. Үүнд хэмжээс, таталцал, унтаа эсэхийг оруулдаг.
  var world = new b2World(worldAABB, gravity, doSleep);

  // обьектыг буцааж байна. 8р мөрийг харна уу.
  return world;
}

// Газрын гадаргуу үүсгэх. Уг гадаргыг үүсгэхгүй бол мэдээж бүх зүйлс browser аас тань халин доош унана.
function createGround() {
  // гадаргуугийн хэлбэрийг тодорхойлж байна.
  var groundSd = new b2BoxDef();
  groundSd.extents.Set(250, 25);
  groundSd.restitution = 0.4;
  // дээр тодорхойлсон хэлбэрээр гадаргууг үүсгэж байна. (Классаас Обьект үүсгэхтэй адил)
  var groundBd = new b2BodyDef();
  groundBd.AddShape(groundSd);       // хэлбэрээ өгөх
  groundBd.position.Set(250, 370);   // байрлуулах координат
  var body = carGame.world.CreateBody(groundBd);      // обьектыг дэлхийдээ хавсаргах

  return body;
}

// Машиныг зурах
function createCarAt(x, y) {
  // Машины дөрвөлжин биетийг тодорхойлох
  var boxSd = new b2BoxDef();
  boxSd.density = 1.0;
  boxSd.friction = 1.5;
  boxSd.restitution = .4;
  boxSd.extents.Set(40, 20);
  // Тодорхойлсон биетээ бодитжуулах
  var boxBd = new b2BodyDef();
  boxBd.AddShape(boxSd);
  boxBd.position.Set(x,y);
  var carBody = carGame.world.CreateBody(boxBd);
  // дугуйг зурах (функц нь доор байгаа)
  var wheelBody1 = createWheel(carGame.world, x-25, y+20);
  var wheelBody2 = createWheel(carGame.world, x+25, y+20);

  // b2RevoluteJointDef функцийг тусдаа үүсгэгдсэн обьектуудыг "эргүүлэгтэй" холбоход ашиглана.
  // бусад төрлийн холболтыг http://www.box2d.org/manual.html#_Toc258082974 ээс үзнэ үү
  var jointDef = new b2RevoluteJointDef();
  jointDef.anchorPoint.Set(x-25, y+20);
  jointDef.body1 = carBody;
  jointDef.body2 = wheelBody1;
  carGame.world.CreateJoint(jointDef);
  // Баруун дугуй
  var jointDef = new b2RevoluteJointDef();
  jointDef.anchorPoint.Set(x+25, y+20);
  jointDef.body1 = carBody;
  jointDef.body2 = wheelBody2;
  carGame.world.CreateJoint(jointDef);
  return carBody;
}

function createWheel(world, x, y) {
  // Дугуйны дүрсийг тодорхойолох
  var ballSd = new b2CircleDef();
  ballSd.density = 1.0;        // нягтшил
  ballSd.radius = 10;          // радиус
  ballSd.restitution = 0.1;    // ойлт
  ballSd.friction = 4.3;       // үрэлт
  // Дугуйг бодьтжуулах
  var ballBd = new b2BodyDef();
  ballBd.AddShape(ballSd);
  ballBd.position.Set(x,y);
  return world.CreateBody(ballBd);
}

// Дэлхийг үүсгэх буюу обьектуудыг канвас руу зурах
function drawWorld(world, context) {
  for (var b = world.m_bodyList; b != null; b = b.m_next) {
    for (var s = b.GetShapeList(); s != null; s = s.GetNext()) {
      drawShape(s, context);
    }
  }

}
function drawShape(shape, context) {
  context.strokeStyle = '#003300';
  context.beginPath();
  switch (shape.m_type) {
    case b2Shape.e_circleShape:

      var circle = shape;
      var pos = circle.m_position;
      var r = circle.m_radius;
      var segments = 16.0;
      var theta = 0.0;
      var dtheta = 2.0 * Math.PI / segments;
      context.moveTo(pos.x + r, pos.y);
      for (var i = 0; i < segments; i++) {
        var d = new b2Vec2(r * Math.cos(theta),
          r * Math.sin(theta));
        var v = b2Math.AddVV(pos, d);
        context.lineTo(v.x, v.y);
        theta += dtheta;
      }
      context.lineTo(pos.x + r, pos.y);
      context.moveTo(pos.x, pos.y);
      var ax = circle.m_R.col1;
      var pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
      context.lineTo(pos2.x, pos2.y);
      break;
    case b2Shape.e_polyShape:
      var poly = shape;
      var tV = b2Math.AddVV(poly.m_position,
        b2Math.b2MulMV(poly.m_R, poly.m_vertices[0]));
      context.moveTo(tV.x, tV.y);
      for (var i = 0; i < poly.m_vertexCount; i++) {
        var v = b2Math.AddVV(poly.m_position,
          b2Math.b2MulMV(poly.m_R, poly.m_vertices[i]));
        context.lineTo(v.x, v.y);
      }
      context.lineTo(tV.x, tV.y);
      break;
  }
  context.stroke();
}

// Үндсэн цагийн механизм.
function step() {
  carGame.world.Step(1.0/60, 1);
  // Канвасаа цэвэрлэх. Уг нь бол сайн код бичие гэвэл канвасаа бүхлээр нь цэвэрлэх ёсгүй.
  // Харин үйлдэл хийгдэж өөрчлөгдөж буй обьект болгоны хувьд канвасаа цоолж зөвхөн тухайн хэсгийн үзэгдэх байдлыг
  // санах ойруу хуулж, түүнийгээ буцаан гаргах маягаар ажилладаг.
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // Ертөнцөө шинээр зурах
  drawWorld(carGame.world, ctx);
  setTimeout(step, 10);            // 10 миллсекунд
}

// Товч даралтыг "чагнах" listener тавьж байна.
$(document).keydown(function(e) {
  switch(e.keyCode) {
    case 88: // X товчны ASCII од
      var force = new b2Vec2(10000000, 0);           // Баруун
      carGame.car.ApplyForce                         // ApplyForce 2 параметр авдаг. Эхнийх нь хүч, 2 дахь нь чиглэл.
      (force, carGame.car.GetCenterPosition());
      break;
    case 90: // z товчны ASCII од
      var force = new b2Vec2(-10000000, 0);          // Зүүн
      carGame.car.ApplyForce
      (force, carGame.car.GetCenterPosition());
      break;
  }
});