El cuadrado rojo puede girar:
Los componentes giratorios
Al principio de este tutorial, el cuadrado rojo era capaz de moverse en el gamearea, pero no podía girar o rotar.
Para girar componentes, tenemos que cambiar la manera de obtener los componentes.
El único método disponible para la rotación del elemento de tela girará todo el lienzo:
Todo lo demás se dibuja en el lienzo también será girado, no sólo el componente específico.
Es por eso que tenemos que hacer algunos cambios en la update() método:
En primer lugar, se guarda el objeto de contexto actual de la lona:
ctx.save();
Entonces nos movemos todo el lienzo al centro del componente específico, utilizando el método de traducir:
ctx.translate(x, y);
A continuación, llevamos a cabo la rotación deseada utilizando la rotate() método:
ctx.rotate( angle );
Ahora estamos listos para dibujar el componente en el lienzo, pero ahora vamos a sacar, con su posición central en la posición 0,0 en el traducida (and rotated) de la lona:
ctx.fillRect(width / -2, height / -2, width, height);
Cuando hayamos terminado, debemos restaurar el objeto de contexto de nuevo a su posición guardada, utilizando el método de restauración:
ctx.restore();
El componente es la única cosa que se hace girar:
El Constructor de componentes
El component constructor tiene un nuevo propery llamado angle , que es el número radián que representa el ángulo de la componente.
La update método de la component constructor es eran dibujamos el componente, y aquí se pueden ver los cambios que permitirán que el componente para rotar:
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();
}
Inténtalo tú mismo "