Rotação do jogo
O quadrado vermelho pode girar:
Componentes rotativos
Anteriormente neste tutorial, o quadrado vermelho era capaz de se mover na área de jogo, mas não podia girar ou girar.
Para girar componentes, temos que mudar a maneira como desenhamos os componentes.
O único método de rotação disponível para o elemento canvas irá girar a tela inteira:
Todo o resto que você desenhar na tela também será girado, não apenas o componente específico.
É por isso que temos que fazer algumas mudanças no update()método:
Primeiro, salvamos o objeto de contexto da tela atual:
ctx.save();
Em seguida, movemos a tela inteira para o centro do componente específico, usando o método translate:
ctx.translate(x, y);
Em seguida, realizamos a rotação desejada usando o método activate():
ctx.rotate(angle);
Agora estamos prontos para desenhar o componente na tela, mas agora vamos desenhá-lo com sua posição central na posição 0,0 na tela traduzida (e girada):
ctx.fillRect(width / -2, height / -2, width, height);
Quando terminarmos, devemos restaurar o objeto de contexto de volta à sua posição salva, usando o método de restauração:
ctx.restore();
O componente é a única coisa que é girada:
O Construtor de Componentes
O componentconstrutor tem uma nova propriedade chamada angle, que é o número radiano que representa o ângulo do componente.
O updatemétodo do componentconstrutor é onde desenhamos o componente, e aqui você pode ver as alterações que permitirão que o componente gire:
Exemplo
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();
}