لعبة التناوب
يمكن أن يدور المربع الأحمر:
المكونات الدوارة
في وقت سابق من هذا البرنامج التعليمي ، كان المربع الأحمر قادرًا على التحرك في منطقة اللعبة ، لكنه لم يتمكن من الدوران أو التدوير.
لتدوير المكونات ، علينا تغيير طريقة رسم المكونات.
ستؤدي طريقة التدوير الوحيدة المتاحة لعنصر اللوحة القماشية إلى تدوير اللوحة بأكملها:
سيتم أيضًا تدوير كل شيء آخر ترسمه على اللوحة ، وليس المكون المحدد فقط.
لهذا السبب يتعين علينا إجراء بعض التغييرات في update()الطريقة:
أولاً ، نحفظ كائن سياق اللوحة الحالي:
ctx.save();
ثم نقوم بنقل اللوحة القماشية بالكامل إلى مركز المكون المحدد باستخدام طريقة الترجمة:
ctx.translate(x, y);
ثم نقوم بالدوران المطلوب باستخدام طريقة rotate ():
ctx.rotate(angle);
نحن الآن جاهزون لرسم المكون على اللوحة القماشية ، لكننا الآن سنرسمه مع موضعه المركزي في الموضع 0،0 على اللوحة القماشية المترجمة (والمدارة):
ctx.fillRect(width / -2, height / -2, width, height);
عندما ننتهي ، يجب علينا إعادة كائن السياق إلى موضعه المحفوظ ، باستخدام طريقة الاستعادة:
ctx.restore();
المكون هو الشيء الوحيد الذي يتم تدويره:
منشئ المكون
للمنشئ componentخاصية جديدة تسمى angle، وهي رقم راديان يمثل زاوية المكون.
طريقة المُنشئ updateهي 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();
}