إنشاء لعبة سباق ثلاثية الأبعاد

• إلعب لعبة
• عرض رمز المصدر

• في عرض الطريق المباشر
• في العرض التوضيحي مع المنحنيات
• في العرض التوضيحي مع التلال
• في النسخة النهائية

عن الأداء

حول بنية الكود

الجزء 1. الطرق المستقيمة.

• كرر علم المثلثات
• تذكر أساسيات الإسقاط ثلاثي الأبعاد
• إنشاء حلقة لعبة
• تنزيل صور العفريت
• بناء هندسة الطرق
• تجعل الخلفية
• اجعل الطريق
• تجعل السيارة
• تنفيذ دعم لوحة المفاتيح للتحكم في الماكينة

يمكن رؤية العرض هنا .

القليل من علم المثلثات

• ح = ارتفاع الكاميرا
• د = المسافة من الكاميرا إلى الشاشة
• z = المسافة من الكاميرا إلى السيارة
• y = إحداثيات الشاشة y

y = h * d / z

س = ث * د / ض

د / ض

نظم الإحداثيات

1. التحويل من إحداثيات العالم إلى إحداثيات الشاشة
2. تنسق كاميرا العرض على مستوى عرض عادي
3. تحجيم الإحداثيات المسقطة لإحداثيات الشاشة المادية (في حالتنا ، هذا قماش)

ملاحظة: في النظام ثلاثي الأبعاد الحالي ، يتم تنفيذ مرحلة الدوران بين المرحلتين 1 و 2 ، ولكن نظرًا لأننا سنقوم بمحاكاة المنحنيات ، فإننا لا نحتاج إلى دوران.

تنبؤ

• يتم احتساب نقطة معادلات التحويل ( ترجمة ) بالنسبة للغرفة
• معادلات الإسقاط ( المشروع ) هي اختلافات في "قانون المثلثات المتشابهة" الموضحة أعلاه.
• معادلات القياس ( المقياس ) تأخذ في الاعتبار الفرق بين:
  
  • الرياضيات ، حيث 0،0 في المركز والمحور ص لأعلى ، و
  • , 0,0 , y :

: 3d- Vector Matrix 3d-, , WebGL ( )… . Outrun.

د = 1 / تان (فوف / 2)

هيكل كود جافا سكريبت

• Dom هو عدد قليل من وظائف مساعد DOM الثانوية.
• Util - المرافق العامة ، وخاصة الوظائف الرياضية المساعدة.
• اللعبة - وظائف دعم الألعاب العامة ، مثل تنزيل الصور وحلقة اللعبة.
• تقديم - وظائف تقديم المساعد على قماش.

كالعادة ، كود المصدر موجود في الوثائق النهائية.

حلقة لعبة بسيطة

• update - تحديث عالم اللعبة بخطوة زمنية محددة.
• render - تحديث عالم اللعبة عندما يسمح المتصفح.

run: function(options) {

  Game.loadImages(options.images, function(images) {

    var update = options.update,    // method to update game logic is provided by caller
        render = options.render,    // method to render the game is provided by caller
        step   = options.step,      // fixed frame step (1/fps) is specified by caller
        now    = null,
        last   = Util.timestamp(),
        dt     = 0,
        gdt    = 0;

    function frame() {
      now = Util.timestamp();
      dt  = Math.min(1, (now - last) / 1000); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
      gdt = gdt + dt;
      while (gdt > step) {
        gdt = gdt - step;
        update(step);
      }
      render();
      last = now;
      requestAnimationFrame(frame);
    }
    frame(); // lets get this party started
  });
}

الصور والعفاريت

• الخلفية - ثلاث طبقات المنظر للسماء والتلال والأشجار
• العفاريت - العفاريت الآلية (بالإضافة إلى الأشجار واللوحات الإعلانية التي ستتم إضافتها إلى الإصدار النهائي)

ملاحظة: لقد قمت بإنشاء الخلفيات باستخدام Inkscape ، ومعظم الرموز المتحركة هي رسومات مأخوذة من إصدار Outrun القديم لـ Genesis وتستخدم كأمثلة تدريبية.

متغيرات اللعبة

var fps           = 60;                      // how many 'update' frames per second
var step          = 1/fps;                   // how long is each frame (in seconds)
var width         = 1024;                    // logical canvas width
var height        = 768;                     // logical canvas height
var segments      = [];                      // array of road segments
var canvas        = Dom.get('canvas');       // our canvas...
var ctx           = canvas.getContext('2d'); // ...and its drawing context
var background    = null;                    // our background image (loaded below)
var sprites       = null;                    // our spritesheet (loaded below)
var resolution    = null;                    // scaling factor to provide resolution independence (computed)
var roadWidth     = 2000;                    // actually half the roads width, easier math if the road spans from -roadWidth to +roadWidth
var segmentLength = 200;                     // length of a single segment
var rumbleLength  = 3;                       // number of segments per red/white rumble strip
var trackLength   = null;                    // z length of entire track (computed)
var lanes         = 3;                       // number of lanes
var fieldOfView   = 100;                     // angle (degrees) for field of view
var cameraHeight  = 1000;                    // z height of camera
var cameraDepth   = null;                    // z distance camera is from screen (computed)
var drawDistance  = 300;                     // number of segments to draw
var playerX       = 0;                       // player x offset from center of road (-1 to 1 to stay independent of roadWidth)
var playerZ       = null;                    // player relative z distance from camera (computed)
var fogDensity    = 5;                       // exponential fog density
var position      = 0;                       // current camera Z position (add playerZ to get player's absolute Z position)
var speed         = 0;                       // current speed
var maxSpeed      = segmentLength/step;      // top speed (ensure we can't move more than 1 segment in a single frame to make collision detection easier)
var accel         =  maxSpeed/5;             // acceleration rate - tuned until it 'felt' right
var breaking      = -maxSpeed;               // deceleration rate when braking
var decel         = -maxSpeed/5;             // 'natural' deceleration rate when neither accelerating, nor braking
var offRoadDecel  = -maxSpeed/2;             // off road deceleration is somewhere in between
var offRoadLimit  =  maxSpeed/4;             // limit when off road deceleration no longer applies (e.g. you can always go at least this speed even when off road)

ندير فيراري

Game.run({
  ...
  keys: [
    { keys: [KEY.LEFT,  KEY.A], mode: 'down', action: function() { keyLeft   = true;  } },
    { keys: [KEY.RIGHT, KEY.D], mode: 'down', action: function() { keyRight  = true;  } },
    { keys: [KEY.UP,    KEY.W], mode: 'down', action: function() { keyFaster = true;  } },
    { keys: [KEY.DOWN,  KEY.S], mode: 'down', action: function() { keySlower = true;  } },
    { keys: [KEY.LEFT,  KEY.A], mode: 'up',   action: function() { keyLeft   = false; } },
    { keys: [KEY.RIGHT, KEY.D], mode: 'up',   action: function() { keyRight  = false; } },
    { keys: [KEY.UP,    KEY.W], mode: 'up',   action: function() { keyFaster = false; } },
    { keys: [KEY.DOWN,  KEY.S], mode: 'up',   action: function() { keySlower = false; } }
  ],
  ...
}

• السرعة - السرعة الحالية.
• الموضع - الموضع Z الحالي على المسار. لاحظ أن هذا هو وضع الكاميرا ، وليس فيراري.
• playerX - وضع اللاعب الحالي على X على الطريق. تطبيع في النطاق من -1 إلى +1 ، حتى لا تعتمد على القيمة الفعلية roadWidth.

• التحديثات positionبناء على التيار speed.
• التحديثات playerXعند الضغط على المفتاح الأيسر أو الأيمن.
• يزيد speedإذا تم الضغط على المفتاح لأعلى.
• ينخفض speedإذا تم الضغط على مفتاح لأسفل.
• يقلل speedإذا لم يتم الضغط على المفتاحين لأعلى ولأسفل.
• يقلل speedإذا كان playerXيقع على حافة الطريق وعلى العشب.

function update(dt) {

  position = Util.increase(position, dt * speed, trackLength);

  var dx = dt * 2 * (speed/maxSpeed); // at top speed, should be able to cross from left to right (-1 to 1) in 1 second

  if (keyLeft)
    playerX = playerX - dx;
  else if (keyRight)
    playerX = playerX + dx;

  if (keyFaster)
    speed = Util.accelerate(speed, accel, dt);
  else if (keySlower)
    speed = Util.accelerate(speed, breaking, dt);
  else
    speed = Util.accelerate(speed, decel, dt);

  if (((playerX < -1) || (playerX > 1)) && (speed > offRoadLimit))
    speed = Util.accelerate(speed, offRoadDecel, dt);

  playerX = Util.limit(playerX, -2, 2);     // dont ever let player go too far out of bounds
  speed   = Util.limit(speed, 0, maxSpeed); // or exceed maxSpeed

}

هندسة الطرق

function resetRoad() {
  segments = [];
  for(var n = 0 ; n < 500 ; n++) { // arbitrary road length
    segments.push({
       index: n,
       p1: { world: { z:  n   *segmentLength }, camera: {}, screen: {} },
       p2: { world: { z: (n+1)*segmentLength }, camera: {}, screen: {} },
       color: Math.floor(n/rumbleLength)%2 ? COLORS.DARK : COLORS.LIGHT
    });
  }

  trackLength = segments.length * segmentLength;
}

function findSegment(z) {
  return segments[Math.floor(z/segmentLength) % segments.length];
}

تقديم الخلفية

function render() {

  ctx.clearRect(0, 0, width, height);

  Render.background(ctx, background, width, height, BACKGROUND.SKY);
  Render.background(ctx, background, width, height, BACKGROUND.HILLS);
  Render.background(ctx, background, width, height, BACKGROUND.TREES);

  ...

تقديم الطريق

  var baseSegment = findSegment(position);
  var maxy        = height;
  var n, segment;
  for(n = 0 ; n < drawDistance ; n++) {

    segment = segments[(baseSegment.index + n) % segments.length];

    Util.project(segment.p1, (playerX * roadWidth), cameraHeight, position, cameraDepth, width, height, roadWidth);
    Util.project(segment.p2, (playerX * roadWidth), cameraHeight, position, cameraDepth, width, height, roadWidth);

    if ((segment.p1.camera.z <= cameraDepth) || // behind us
        (segment.p2.screen.y >= maxy))          // clip by (already rendered) segment
      continue;

    Render.segment(ctx, width, lanes,
                   segment.p1.screen.x,
                   segment.p1.screen.y,
                   segment.p1.screen.w,
                   segment.p2.screen.x,
                   segment.p2.screen.y,
                   segment.p2.screen.w,
                   segment.color);

    maxy = segment.p2.screen.y;
  }

project: function(p, cameraX, cameraY, cameraZ, cameraDepth, width, height, roadWidth) {
  p.camera.x     = (p.world.x || 0) - cameraX;
  p.camera.y     = (p.world.y || 0) - cameraY;
  p.camera.z     = (p.world.z || 0) - cameraZ;
  p.screen.scale = cameraDepth/p.camera.z;
  p.screen.x     = Math.round((width/2)  + (p.screen.scale * p.camera.x  * width/2));
  p.screen.y     = Math.round((height/2) - (p.screen.scale * p.camera.y  * height/2));
  p.screen.w     = Math.round(             (p.screen.scale * roadWidth   * width/2));
}

تقديم سيارة

  Render.player(ctx, width, height, resolution, roadWidth, sprites, speed/maxSpeed,
                cameraDepth/playerZ,
                width/2,
                height);

د / ض

استنتاج

• دوم وحدة مساعد عام دوم
• استخدام وحدة الرياضيات العامة
• تقديم وحدة مساعد قماش عامة ...
• ... بما في ذلك Render.segment، Render.polygonوRender.sprite
• دورة لعبة ثابتة الملعب
• تنزيل الصورة
• معالج لوحة المفاتيح
• المنظر الخلفية
• ورقة العفريت مع السيارات والأشجار واللوحات الإعلانية
• الهندسة البدائية للطريق
• طريقة update()التحكم في الجهاز
• طريقة render()لتقديم الخلفية والطريق وسيارة اللاعب
• علامة HTML5 <audio>مع موسيقى السباق (مكافأة مخفية!)

الجزء 2. المنحنيات.

"لمنح الطريق ، ما عليك سوى تغيير موضع خط المنتصف لشكل المنحنى ... بدءًا من الجزء السفلي من الشاشة ، يزداد مقدار تغير مركز الطريق إلى اليسار أو اليمين تدريجيًا . "

• سلبي لمنحنيات الاستدارة لليسار
• إيجابي للمنحنيات التي تتحول إلى اليمين
• أقل لمنحنيات ناعمة
• المزيد للمنحنيات الحادة

var ROAD = {
  LENGTH: { NONE: 0, SHORT:  25, MEDIUM:  50, LONG:  100 }, // num segments
  CURVE:  { NONE: 0, EASY:    2, MEDIUM:   4, HARD:    6 }
};

easeIn:    function(a,b,percent) { return a + (b-a)*Math.pow(percent,2);                           },
easeOut:   function(a,b,percent) { return a + (b-a)*(1-Math.pow(1-percent,2));                     },
easeInOut: function(a,b,percent) { return a + (b-a)*((-Math.cos(percent*Math.PI)/2) + 0.5);        },

function addSegment(curve) {
  var n = segments.length;
  segments.push({
     index: n,
        p1: { world: { z:  n   *segmentLength }, camera: {}, screen: {} },
        p2: { world: { z: (n+1)*segmentLength }, camera: {}, screen: {} },
     curve: curve,
     color: Math.floor(n/rumbleLength)%2 ? COLORS.DARK : COLORS.LIGHT
  });
}

function addRoad(enter, hold, leave, curve) {
  var n;
  for(n = 0 ; n < enter ; n++)
    addSegment(Util.easeIn(0, curve, n/enter));
  for(n = 0 ; n < hold  ; n++)
    addSegment(curve);
  for(n = 0 ; n < leave ; n++)
    addSegment(Util.easeInOut(curve, 0, n/leave));
}

function addSCurves() {
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,  -ROAD.CURVE.EASY);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,   ROAD.CURVE.MEDIUM);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,   ROAD.CURVE.EASY);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,  -ROAD.CURVE.EASY);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,  -ROAD.CURVE.MEDIUM);
}

التغييرات على طريقة التحديث ()

var centrifugal = 0.3;   // centrifugal force multiplier when going around curves

playerX = playerX - (dx * speedPercent * playerSegment.curve * centrifugal);

تقديم المنحنى

• انقل الإسقاط p1 لكل قطعة بمقدار x
• انقل الإسقاط p2 لكل قطعة بمقدار x + dx
• زيادة x للمقطع التالي بمقدار dx

var baseSegment = findSegment(position);
var basePercent = Util.percentRemaining(position, segmentLength);
var dx = - (baseSegment.curve * basePercent);
var x  = 0;
for(n = 0 ; n < drawDistance ; n++) {

  ...

  Util.project(segment.p1, (playerX * roadWidth) - x,      cameraHeight, position - (segment.looped ? trackLength : 0), cameraDepth, width, height, roadWidth);
  Util.project(segment.p2, (playerX * roadWidth) - x - dx, cameraHeight, position - (segment.looped ? trackLength : 0), cameraDepth, width, height, roadWidth);

  x  = x + dx;
  dx = dx + segment.curve;

  ...
}

المنظر الخلفية التمرير

var skySpeed    = 0.001; // background sky layer scroll speed when going around curve (or up hill)
var hillSpeed   = 0.002; // background hill layer scroll speed when going around curve (or up hill)
var treeSpeed   = 0.003; // background tree layer scroll speed when going around curve (or up hill)
var skyOffset   = 0;     // current sky scroll offset
var hillOffset  = 0;     // current hill scroll offset
var treeOffset  = 0;     // current tree scroll offset

skyOffset  = Util.increase(skyOffset,  skySpeed  * playerSegment.curve * speedPercent, 1);
hillOffset = Util.increase(hillOffset, hillSpeed * playerSegment.curve * speedPercent, 1);
treeOffset = Util.increase(treeOffset, treeSpeed * playerSegment.curve * speedPercent, 1);

Render.background(ctx, background, width, height, BACKGROUND.SKY,   skyOffset);
Render.background(ctx, background, width, height, BACKGROUND.HILLS, hillOffset);
Render.background(ctx, background, width, height, BACKGROUND.TREES, treeOffset);

استنتاج