الدوران في اللعبة

يمكن للحصان الأحمر الدوران:

دوران المكون

في جزء سابق من هذا الدرس، كان يمكن للحصان الأحمر التحرك على منطقة اللعبة، ولكن لا يمكنه الدوران أو التدوير.

للدوران المكون، يجب علينا تغيير طريقة رسم المكون.

طريقة تدوير الكائن الوحيد المتاحة في عنصر 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();

المكون هو الشيء الوحيد الذي يدور:

مؤسس المكون

المكون المعرفات لديها اسم زاوية هي عدد الزوايا الراديانية الذي يمثل زاوية المكون.

المكون المعرفات الجديدة في 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();
}

تجربة بنفسك