Spiel-Bewegung

Der rote Quad kann gedreht werden:

Drehen Sie die Komponente

In einem früheren Teil dieses Tutorials konnte der rote Quadrat im Spielbereich bewegt, aber nicht gedreht oder rotiert werden.

Um die Komponente zu drehen, müssen wir die Art und Weise ändern, wie wir die Komponente zeichnen.

Der einzige verfügbare Rotationsschritt für das canvas-Element dreht die gesamte Leinwand:

Alle anderen Inhalte, die Sie auf der Leinwand zeichnen, auch gedreht werden, und nicht nur die spezifische Komponente.

Das ist der Grund, warum wir in update() Methode einige Änderungen vornehmen:

Zunächst speichern wir den aktuellen Kontext der Leinwand:

ctx.save();

Dann bewegen wir die gesamte Leinwand mit der Methode translate an den Mittelpunkt der spezifischen Komponente:

ctx.translate(x, y);

Dann führen wir die gewünschte Rotation mit der Methode rotate() durch:

ctx.rotate(angle);

Jetzt bereiten wir uns vor, die Komponente auf die Leinwand zu zeichnen, aber jetzt zeichnen wir den Mittelpunkt der Komponente auf die Position 0,0 auf der verschobenen (und gedrehten) Leinwand:

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

Nachdem der Vorgang abgeschlossen ist, müssen wir den Kontextobjekt mit der Methode restore auf seinen gesicherten Ort zurücksetzen:

ctx.restore();

Diese Komponente ist das einzige Drehbare Ding:

Komponentenkonstruktor

component Der Konstruktor hat einen Namen Winkel hat eine neue Eigenschaft, die die Winkelzahl der Komponente darstellt.

component Der Konstruktor update Die Methode ist der Ort, an dem wir die Komponente zeichnen, hier können Sie die Änderungen sehen, die durch die Rotation der Komponente erlaubt werden:

Beispiel

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();
}

Selbst ausprobieren