چرخش بازی

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

چرخش قطعه

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

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

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

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

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

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

ctx.save();

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

ctx.translate(x, y);

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

ctx.rotate(angle);

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

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

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

ctx.restore();

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

ساختاردهنده component

component واردکننده زاویه این یک عدد محدوده است که زاویه component را نشان می‌دهد.

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

مثال

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

آزمایش کنید