Il quadrato rosso può ruotare:
componenti rotanti
All'inizio di questo tutorial, il quadrato rosso era in grado di muoversi sul gamearea, ma non poteva girare o ruotare.
Per ruotare i componenti, dobbiamo cambiare il nostro modo di disegnare i componenti.
L'unico metodo di rotazione a disposizione per l'elemento canvas ruoterà l'intera tela:
Tutto il resto si disegna sulla tela sarà anche essere ruotato, non solo la componente specifico.
Questo è il motivo per cui dobbiamo fare alcuni cambiamenti nel update() metodo:
In primo luogo, salvare l'oggetto contesto tela corrente:
ctx.save();
Poi si passa l'intera area al centro del componente specifico, utilizzando il metodo translate:
ctx.translate(x, y);
Poi eseguiamo la rotazione desiderato utilizzando il rotate() metodo:
ctx.rotate( angle );
Ora siamo pronti per disegnare la componente sulla tela, ma ora ci disegnarlo con la sua posizione centrale nella posizione 0,0 sulla tradotto (and rotated) tela:
ctx.fillRect(width / -2, height / -2, width, height);
Quando abbiamo finito, dobbiamo ripristinare l'oggetto contesto torna alla sua posizione salvata, utilizzando il metodo di ripristino:
ctx.restore();
Il componente è l'unica cosa che è ruotato:
Il costruttore Component
Il component di costruzione presenta un nuovo propery chiamato angle , che è il numero radianti che rappresenta l'angolo del componente.
L' update metodo della component costruttore è dove abbiamo disegnare la componente, e qui si possono vedere i cambiamenti che permetteranno la componente di ruotare:
Esempio
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();
}
Prova tu stesso "