Rotação do Jogo

O quadrado vermelho pode girar:

Girar componente

Na parte anterior deste tutorial, o quadrado vermelho podia se mover na área do jogo, mas não podia girar ou rolar.

Para girar o componente, devemos alterar a maneira de desenhar o componente.

O único método de rotação disponível para o elemento canvas girará toda a tela:

qualquer conteúdo que você desenhar na tela também será girado, não apenas o componente específico.

É por isso que devemos usar update() faz algumas alterações no método:

Primeiro, salvamos o objeto de contexto atual da tela:

ctx.save();

Em seguida, usamos o método translate para mover toda a tela para o centro do componente específico:

ctx.translate(x, y);

Em seguida, usamos o método rotate() para executar a rotação desejada:

ctx.rotate(angle);

Agora estamos prontos para desenhar o componente na tela, mas agora vamos desenhar o centro do componente na posição 0,0 na tela deslocada (e girada):

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

Após a conclusão, devemos usar o método restore para restaurar o objeto de contexto para sua posição salva:

ctx.restore();

Este componente é o único que roda:

construtor do componente

component O construtor tem um nome ângulo nova propriedade, que representa o ângulo do componente em radianos.

component O construtor update O método que nos permite desenhar o componente na posição, aqui você pode ver a variação permitida na rotação do componente:

instância

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

Experimente Sozinho