مكونات بازی

درس پیش کریں:

کھیل علاقے میں ایک لال مربع شامل کریں:

اجزا شامل کریں

یہ آئیٹم تعمیر کنٹرکٹر کہا جاتا ہے، جو آپ کو اجزا کو کھیل علاقے میں شامل کرنے کی اجازت دیتا ہے。اجزا (component)، ہم نے پہلا اجزا بنایا، جس کا نام myGamePiece:

مثال

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

آزمایش کنید

یہ اجزا اپنی نمائش اور تحرک کی خصوصیات اور طریقوں کا حامل ہیں。

فریم

لئے کھیل کی حکمت عملی کی تیاری کی وجہ سے، ہم ہر ثانیہ 50 بار نمائش اپدیت کرتے ہیں، جو فلموں میں فریم سے مماثل ہوتا ہے。

ایجاد کنید وظیفه updateGameArea() که برای ترسیم اجزا استفاده می‌شود. وظیفه جدیدی اضافه کنید. ابتدا، یک کanvas به نام

وظیفه، برای پاک کردن کل کanvas استفاده می‌شود. myGameArea مجموعه‌ای به نام وظیفه updateGameArea() که برای ترسیم اجزا استفاده می‌شود. در clear() وظیفه (هر ثانیه 50 بار). سپس یک وظیفه به نام

وظیفه، برای پاک کردن کل کanvas استفاده می‌شود. در component update() در ساختار، یک وظیفه به نام

وظیفه updateGameArea() که برای ترسیم اجزا استفاده می‌شود. دعوت از clear() و update() مетод.

نتیجه این است که هر ثانیه اجزا 50 بار ترسیم و پاک می‌شوند:

مثال

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

آزمایش کنید

اجازه دهید آن را به حرکت درآوریم

برای اثبات اینکه هر ثانیه مکعب قرمز 50 بار ترسیم می‌شود، در هر به‌روزرسانی منطقه بازی، ما موقعیت x (افقی) را یک پیکسل تغییر می‌دهیم:

مثال

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

آزمایش کنید

چرا باید منطقه بازی را پاک کنیم؟

به نظر نمی‌رسد که لازم باشد در هر به‌روزرسانی منطقه بازی را پاک کنیم. اما اگر ما آن را حذف کنیم، clear() مетод، تمامی حرکات اجزا با نشانی که در آخرین فریم داشته است، ردپا می‌گذارند:

مثال

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

آزمایش کنید

اندازه تغییر دهید

شما می‌توانید عرض و ارتفاع اجزا را کنترل کنید:

مثال

یک مستطیل 10x140 پیکسلی ایجاد کنید:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

آزمایش کنید

رنگ تغییر دهید

شما می‌توانید رنگ اجزا را کنترل کنید:

مثال

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

آزمایش کنید

شما همچنین می‌توانید از مقادیر رنگ دیگر استفاده کنید، مانند هشتمی، rgb یا rgba:

مثال

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

آزمایش کنید

محل تغییر دهید

ما از مختصات x و y برای قرار دادن اجزا در منطقه بازی استفاده می‌کنیم.

مختصات گوشه بالا چپ کanvas (0,0) است.

برای مشاهده مختصات x و y روی منطقه بازی زیر ماوس قرار دهید:

شما می‌توانید اجزا را در هر موقعیتی از منطقه بازی قرار دهید:

مثال

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

آزمایش کنید

اجزا چندگانه

شما می‌توانید تعداد هرچه بیشتر اجزا را در منطقه بازی قرار دهید:

مثال

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

آزمایش کنید

اجزا را حرکت دهید

سه اجزا را به سمت جهات مختلفی حرکت دهید:

مثال

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

آزمایش کنید