Вращение в играх

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

Вращение компонентов

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

Чтобы повернуть компонент, нам нужно изменить способ его рисования.

Единственный доступный метод вращения для элемента 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();

Этот компонент является единственным вращающимся объектом:

конструктор компонента

component Конструктор имеет метод angle новый атрибут, это значение угла компонента в градусах.

component конструктора update Метод是我们绘制组件的位置，在这里您可以看到允许组件旋转的变化：

instance

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();
}

Попробуйте сами