O‘yin aylantirish

Qizil kvadrat aylana oladi:

Komponentlarni aylantirish

Ushbu darslikning oldingi qismlarida qizil kvadrat o‘yin maydonida harakatlana olardi, lekin burila yoki aylana olmas edi.

Komponentlarni aylantirish uchun ularni chizish usulimizni o‘zgartirishimiz kerak.

canvas elementi uchun mavjud yagona aylantirish metodi butun canvas’ni aylantiradi:

Canvas’ga chizgan boshqa hamma narsangiz ham aylanadi, faqat muayyan komponentgina emas.

Shuning uchun update() metodiga ba’zi o‘zgartirishlar kiritishimiz kerak:

Avval joriy canvas kontekst obyektini saqlaymiz:

ctx.save();

So‘ngra translate metodi yordamida butun canvas’ni muayyan komponent markaziga siljitamiz:

ctx.translate(x, y);

Keyin rotate() metodi yordamida kerakli aylantirishni bajaramiz:

ctx.rotate(angle);

Endi komponentni canvas’ga chizishga tayyormiz, lekin endi uni siljitilgan (va aylantirilgan) canvas’da markazi 0,0 pozitsiyada bo‘ladigan qilib chizamiz:

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

Tugatgach, restore metodi yordamida kontekst obyektini saqlangan holatiga qaytarishimiz kerak:

ctx.restore();

Faqat komponentning o‘zi aylanadi:

Komponent konstruktori

component konstruktorida angle deb nomlangan yangi xususiyat bor — bu komponent burchagini ifodalovchi radiandagi son.

component konstruktorining update metodi komponentni chizadigan joyimiz bo‘lib, bu yerda komponentning aylanishiga imkon beradigan o‘zgarishlarni ko‘rishingiz mumkin: