م�件‌های بازی

یک مکعب قرمز به منطقه بازی اضافه کنید:

افزودن اجزاء

یک توابع ساختاری برای ایجاد اجزاء ایجاد کنید که به شما اجازه می‌دهد اجزاء را به منطقه بازی اضافه کنید.

این توابع ساختاری به ناماجزاء (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() اضافه کنید.

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

در 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 برای قرار دادن عناصر در منطقه بازی استفاده می‌کنیم.

مختصات بالای چپ کانواس (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();
}

آزمایش کنید