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