Rotación de juegos
El cuadrado rojo puede rotar:
Componentes giratorios
Anteriormente en este tutorial, el cuadrado rojo podía moverse en el área de juego, pero no podía girar ni rotar.
Para rotar componentes, tenemos que cambiar la forma en que dibujamos los componentes.
El único método de rotación disponible para el elemento del lienzo rotará todo el lienzo:
Todo lo demás que dibuje en el lienzo también se rotará, no solo el componente específico.
Es por eso que tenemos que hacer algunos cambios en el update()método:
Primero, guardamos el objeto de contexto de lienzo actual:
ctx.save();
Luego movemos todo el lienzo al centro del componente específico, usando el método de traducción:
ctx.translate(x, y);
Luego realizamos la rotación deseada usando el método de rotación():
ctx.rotate(angle);
Ahora estamos listos para dibujar el componente en el lienzo, pero ahora lo dibujaremos con su posición central en la posición 0,0 en el lienzo trasladado (y girado):
ctx.fillRect(width / -2, height / -2, width, height);
Cuando hayamos terminado, debemos restaurar el objeto de contexto a su posición guardada, usando el método de restauración:
ctx.restore();
El componente es lo único que se gira:
El constructor de componentes
El componentconstructor tiene una nueva propiedad llamada angle, que es un número en radianes que representa el ángulo de la componente.
El updatemétodo del componentconstructor es donde dibujamos el componente, y aquí puede ver los cambios que permitirán que el componente gire:
Ejemplo
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();
}