Rotazione del gioco
Il quadrato rosso può ruotare:
Componenti rotanti
In precedenza in questo tutorial, il quadrato rosso poteva muoversi nell'area di gioco, ma non poteva girare o ruotare.
Per ruotare i componenti, dobbiamo cambiare il modo in cui disegniamo i componenti.
L'unico metodo di rotazione disponibile per l'elemento canvas ruoterà l'intero canvas:
Anche tutto il resto che disegni sulla tela verrà ruotato, non solo il componente specifico.
Ecco perché dobbiamo apportare alcune modifiche al update()metodo:
Innanzitutto, salviamo l'oggetto contestuale canvas corrente:
ctx.save();
Quindi spostiamo l'intera tela al centro del componente specifico, usando il metodo translate:
ctx.translate(x, y);
Quindi eseguiamo la rotazione desiderata usando il metodo rotate():
ctx.rotate(angle);
Ora siamo pronti per disegnare il componente sulla tela, ma ora lo disegneremo con la sua posizione centrale in posizione 0,0 sulla tela traslata (e ruotata):
ctx.fillRect(width / -2, height / -2, width, height);
Al termine, dobbiamo ripristinare l'oggetto contesto nella sua posizione salvata, utilizzando il metodo di ripristino:
ctx.restore();
Il componente è l'unica cosa che viene ruotata:
Il costruttore di componenti
Il componentcostruttore ha una nuova proprietà chiamata angle, che è un numero in radianti che rappresenta l'angolo del componente.
Il updatemetodo del componentcostruttore è dove disegniamo il componente, e qui puoi vedere le modifiche che consentiranno al 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();
}