Rotazione di gioco

Il quadrato rosso può ruotare:

Ruotare il componente

Nella parte precedente di questa guida, il quadrato rosso poteva muoversi nella regione di gioco, ma non poteva ruotare o girare.

Per ruotare il componente, dobbiamo cambiare il modo in cui disegniamo il componente.

Il metodo di rotazione disponibile unicamente per l'elemento canvas ruoterà l'intero pavimento di disegno:

Tutto il contenuto che disegni sulla lavagna anche ruoterà, non solo il componente specifico.

Ecco perché dobbiamo usare update() fare alcune modifiche nel metodo:

Prima di tutto, salviamo l'oggetto contesto attuale del pavimento di disegno:

ctx.save();

Poi utilizziamo il metodo translate per muovere l'intero pavimento di disegno al centro del componente specifico:

ctx.translate(x, y);

Poi eseguiamo la rotazione desiderata utilizzando il metodo rotate():

ctx.rotate(angle);

Ora siamo pronti a disegnare il componente sulla lavagna, ma ora lo faremo con il centro del componente disegnato sulla posizione 0,0 del pavimento di disegno:

ctx.fillRect(width / -2, height / -2, width, height);

Dopo aver completato, dobbiamo utilizzare il metodo restore per ripristinare l'oggetto contesto all'intero di cui è stato salvato:

ctx.restore();

Questo componente è l'unico oggetto che ruota:

costruttore del componente

component Il costruttore ha un nome angle nuova proprietà, è il numero di radianzi che rappresenta l'angolo del componente.

component Il costruttore update Il metodo che rappresenta la posizione di disegno del componente, qui puoi vedere le variazioni di rotazione permessa per il componente:

istanza

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 personalmente