game.js

var carGame = {
  STATE_STARTING_SCREEN : 1,
  STATE_PLAYING : 2,
  STATE_GAMEOVER_SCREEN : 3,
  state : 0,
  fuel: 0,
  fuelMax: 0,
  currentLevel: 0
};

carGame.levels = new Array();  // Лэвэл буюу үеүүдийг хадгалах
carGame.levels[0] = [{
  "type":"car",
  "x":50,
  "y":210,
  "fuel":12
},
{
  "type":"box",
  "x":250,
  "y":270,
  "width":250,
  "height":25,
  "rotation":0
},
{
  "type":"box",
  "x":500,
  "y":250,
  "width":65,
  "height":15,
  "rotation":-10
},
{
  "type":"box",
  "x":600,
  "y":225,
  "width":80,
  "height":15,
  "rotation":-20
},
{
  "type":"box",
  "x":950,
  "y":225,
  "width":80,
  "height":15,
  "rotation":20
},
{
  "type":"box",
  "x":1100,
  "y":250,
  "width":100,
  "height":15,
  "rotation":0
},
{
  "type":"win",
  "x":1200,
  "y":215,
  "width":15,
  "height":25,
  "rotation":0
}];

carGame.levels[1] = [{
  "type":"car",
  "x":50,
  "y":310,
  "fuel":20
},
{
  "type":"box",
  "x":250,
  "y":370,
  "width":250,
  "height":25,
  "rotation":0
},
{
  "type":"box",
  "x":500,
  "y":350,
  "width":65,
  "height":15,
  "rotation":-10
},
{
  "type":"box",
  "x":600,
  "y":325,
  "width":80,
  "height":15,
  "rotation":-20
},
{
  "type":"box",
  "x":666,
  "y":285,
  "width":80,
  "height":15,
  "rotation":-32
},
{
  "type":"box",
  "x":950,
  "y":225,
  "width":80,
  "height":15,
  "rotation":15
},
{
  "type":"box",
  "x":1100,
  "y":250,
  "width":100,
  "height":15,
  "rotation":0
},
{
  "type":"win",
  "x":1200,
  "y":215,
  "width":15,
  "height":25,
  "rotation":0
}];

carGame.levels[2] = [{
  "type":"car",
  "x":50,
  "y":310,
  "fuel":50
},
{
  "type":"box",
  "x":150,
  "y":370,
  "width":150,
  "height":25,
  "rotation":0
},
{
  "type":"box",
  "x":300,
  "y":356,
  "width":25,
  "height":15,
  "rotation":-10
},
{
  "type":"box",
  "x":500,
  "y":350,
  "width":65,
  "height":15,
  "rotation":-10
},
{
  "type":"box",
  "x":600,
  "y":325,
  "width":80,
  "height":15,
  "rotation":-20
},
{
  "type":"box",
  "x":666,
  "y":285,
  "width":80,
  "height":15,
  "rotation":-32
},
{
  "type":"box",
  "x":950,
  "y":225,
  "width":80,
  "height":15,
  "rotation":10
},
{
  "type":"box",
  "x":1100,
  "y":250,
  "width":100,
  "height":15,
  "rotation":0
},
{
  "type":"win",
  "x":1200,
  "y":215,
  "width":15,
  "height":25,
  "rotation":0
}];

carGame.levels[3] = [{
  "type":"car",
  "x":50,
  "y":210,
  "fuel":20
},
{
  "type":"box",
  "x":100,
  "y":270,
  "width":190,
  "height":15,
  "rotation":20
},
{
  "type":"box",
  "x":380,
  "y":320,
  "width":100,
  "height":15,
  "rotation":-10
},
{
  "type":"box",
  "x":666,
  "y":285,
  "width":80,
  "height":15,
  "rotation":-32
},
{
  "type":"box",
  "x":950,
  "y":295,
  "width":80,
  "height":15,
  "rotation":20
},
{
  "type":"box",
  "x":1100,
  "y":310,
  "width":100,
  "height":15,
  "rotation":0
},
{
  "type":"win",
  "x":1200,
  "y":275,
  "width":15,
  "height":25,
  "rotation":0
}];

carGame.levels[4] = [{
  "type":"car",
  "x":50,
  "y":210,
  "fuel":20
},
{
  "type":"box",
  "x":100,
  "y":270,
  "width":190,
  "height":15,
  "rotation":20
},
{
  "type":"box",
  "x":380,
  "y":320,
  "width":100,
  "height":15,
  "rotation":-10
},
{
  "type":"box",
  "x":686,
  "y":285,
  "width":80,
  "height":15,
  "rotation":-32
},
{
  "type":"box",
  "x":250,
  "y":495,
  "width":80,
  "height":15,
  "rotation":40
},
{
  "type":"box",
  "x":500,
  "y":540,
  "width":200,
  "height":15,
  "rotation":0
},
{
  "type":"win",
  "x":220,
  "y":425,
  "width":15,
  "height":25,
  "rotation":23
}];

var car;                // машины обьект
var canvas;             // үндсэн канвас
var ctx;                // canvas ийн 2d хэлбэрийг хадгална
var canvasWidth;        // канвасын өргөн
var canvasHeight;       // канвасын өндөр
$(function() {
  carGame.state = carGame.STATE_STARTING_SCREEN;

  $('#game').click(function(){
    if (carGame.state == carGame.STATE_STARTING_SCREEN)
    {

      carGame.state = carGame.STATE_PLAYING;


      restartGame(carGame.currentLevel);

            step();
    }
  });

  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 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;
}

// Гадаргуу зурах функц.
function createGround(x, y, width, height, rotation, type) {
  // дүрсний тодорхойлолт
  var groundSd = new b2BoxDef();
  groundSd.extents.Set(width, height);
  groundSd.restitution = 0.4;
  if (type == "win") {
    groundSd.userData = document.getElementById('flag');
  }
  // Тодорхойлсон дүрсээ биетжүүлэх
  var groundBd = new b2BodyDef();
  groundBd.AddShape(groundSd);
  groundBd.position.Set(x, y);
  groundBd.rotation = rotation * Math.PI / 180;   // Энд өгөгдөх rotation ийг радиан аар өгдөгийг анхаараарай
  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);
  boxSd.userData = document.getElementById('bus');
  // Тодорхойлсон биетээ бодитжуулах
  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;       // үрэлт
  ballSd.userData = document.getElementById('wheel');
  // Дугуйг бодьтжуулах
  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()) {
      if (s.GetUserData() != undefined) {
        // UserData д зургийг хадгалсан
        var img = s.GetUserData();
        // зураг бүрийн өндөр өргөнийг тооцож обьектод наах
        var x = s.GetPosition().x;
        var y = s.GetPosition().y;
        var topleftX = - $(img).width()/2;
        var topleftY = - $(img).height()/2;
        context.save();
        context.translate(x,y);
        context.rotate(s.GetBody().GetRotation());
        context.drawImage(img, topleftX, topleftY);
        context.restore();
      } else {
        drawShape(s, context);
      }
    }
  }
}
function drawShape(shape, context) {
  context.strokeStyle = '#00aa00';
  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 миллсекунд

  // Ялах нөхцөлийг шалгах
  // box2d сан нь 2 биет обьектын огтлолцол буюу collide ийг автоматаар бүртгэж contact list рүү хийдэг
  // уг лист рүү хандахдаа GetContactList(), заагчыг шилжүүлэхдээ GetNext()
  for (var cn = carGame.world.GetContactList(); cn != null; cn = cn.GetNext()) {
    var body1 = cn.GetShape1().GetBody();
    var body2 = cn.GetShape2().GetBody();
    if ((body1 == carGame.car && body2 == carGame.gamewinWall) ||(body2 == carGame.car && body1 == carGame.gamewinWall)) {
      console.log("Баяр хүргэе!");
      if (carGame.currentLevel < 4) {
        restartGame(carGame.currentLevel+1);
      } else {
        // Дууссан дэлгэц үзүүлэх
        $('#game').removeClass().addClass('gamebg_won');

        // Физик ертөнцийг дуусгах
        carGame.world = createWorld();

      }
    }
  }
}

// Товч даралтыг "чагнах" listener тавьж байна.
$(document).keydown(function(e) {
  switch(e.keyCode) {
    case 88: // x товчны ASCII код
      if (carGame.fuel > 0){
        var force = new b2Vec2(10000000, 0);      // ApplyForce 2 параметр авдаг. Эхнийх нь хүч, 2 дахь нь чиглэл.
        carGame.car.ApplyForce(force, carGame.car.GetCenterPosition());           // Баруун
        carGame.fuel--;
        $(".fuel-value").width(carGame.fuel/carGame.fuelMax * 100 +'%');
      }
      break;
    case 90: // z товчны ASCII код
      if (carGame.fuel > 0) {
        var force = new b2Vec2(-10000000, 0);            // Зүүн
        carGame.car.ApplyForce(force, carGame.car.GetCenterPosition());
        carGame.fuel--;
        $(".fuel-value").width(carGame.fuel/carGame.fuelMax * 100 +'%');
      }
      break;
    case 82: // r товчны ASCII код
      restartGame(carGame.currentLevel);
      break;
  }
});

function restartGame(level) {
  // тухайн lvl ийн мэдээлэлийг хэвлэх
  $("#level").html("Level " + (level+1));
  carGame.currentLevel = level;
  $('#game').removeClass().addClass('gamebg_level'+level);
  // world обьектыг үүсгэж байна
  carGame.world = createWorld();
  // Үсэргэх тавцан зурах, Үүнийг шууд polygon зурж хийсэн бол хялбар байх байсан
  // Гэхдээ 1т би өмнө нь зурж үзээгүй, 2т бэлэн үүсгэсэн shape ээ ашиглахын тулд тус тусад нь дөрвөлжинүүдээр үүсгэлээ.
  for(var i=0;i<carGame.levels[level].length;i++) {
    var obj = carGame.levels[level][i];

    if (obj.type == "car") {
      carGame.car = createCarAt(obj.x,obj.y);
      carGame.fuel = obj.fuel;
      carGame.fuelMax = obj.fuel;
      $(".fuel-value").width('100%');
      continue;
    }

    var groundBody = createGround(obj.x, obj.y, obj.width, obj.height, obj.rotation, obj.type);

    if (obj.type == "win") {
      carGame.gamewinWall = groundBody;
    }
  }
}