چرخش بازی

مربع قرمز می‌تواند بچرخد:

چرخش اجزا

در بخش‌های قبلی این آموزش، مربع قرمز می‌توانست در منطقه بازی حرکت کند، اما نمی‌توانست بچرخد یا بگردش کند.

برای چرخش اجزا، باید روش نقاشی اجزا را تغییر دهیم.

تنها روش چرخش قابل استفاده برای عنصر canvas، چرخش کامل کانواس است:

تمام محتوایی که روی کانواس می‌کشید، چرخش خواهد کرد، نه تنها اجزا خاص.

این است دلیل اینکه باید در update() در این روش تغییراتی انجام می‌دهیم:

ابتدا، محیط فعلی کانواس را ذخیره می‌کنیم:

ctx.save();

سپس از روش translate برای جابجایی کامل کانواس به مرکز یک اجزا خاص استفاده می‌کنیم:

ctx.translate(x, y);

سپس از روش rotate() برای انجام چرخش مورد نظر استفاده می‌کنیم:

ctx.rotate(angle);

حالا ما آماده هستیم که اجزا را روی کانواس بکشیم، اما اکنون ما در کانواس جابجا شده (و چرخیده) قرار می‌دهیم که مرکز آن در موقعیت 0,0 باشد:

ctx.fillRect(width / -2, height / -2, width, height);

پس از اتمام، باید از روش restore استفاده کنیم تا این شیء محیط را به موقعیت ذخیره شده‌اش برگردانیم:

ctx.restore();

این اجزا تنها چیزی است که می‌تواند چرخش کند:

سازنده اجزا

component واردکننده angle به عنوان عدد محدب از زاویه اجزا، وجود دارد.

component ویژگی‌های جدیدی که در update طریق کاری ما برای نقاشی اجزا است، در اینجا می‌توانید تغییرات مجاز برای چرخش اجزا را ببینید:

مثال

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

آزمایش کنید