Ротация игры

Красный квадрат может вращаться:

Вращающиеся компоненты

Ранее в этом уроке красный квадрат мог перемещаться по игровому полю, но не мог поворачиваться или вращаться.

Чтобы вращать компоненты, мы должны изменить способ их рисования.

Единственный метод вращения, доступный для элемента холста, будет вращать весь холст:

Все остальное, что вы рисуете на холсте, также будет повернуто, а не только конкретный компонент.

Вот почему мы должны внести некоторые изменения в 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том, что мы рисуем компонент, и здесь вы можете увидеть изменения, которые позволят компоненту вращаться: