Game Rotation

De rode vierkant kan draaien:

Draai component

In een eerdere deel van deze handleiding kon de rode vierkant zich in het spelgebied verplaatsen, maar niet draaien of roteren.

Om de component te draaien, moeten we de manier waarop we de component tekenen veranderen.

Het enige beschikbare rotatiemethode voor het canvas element roteert het hele canvas:

Alle andere dingen die u op het canvas tekent, zullen ook worden gedraaid, niet alleen de specifieke component.

Dit is de reden waarom we moeten update() Maak enkele wijzigingen in de methode:

Eerst slaan we de huidige canvas context object op:

ctx.save();

Vervolgens verplaatsen we het hele canvas met de translate methode naar het centrum van de specifieke component:

ctx.translate(x, y);

Vervolgens voeren we de gewenste rotatie uit met de rotate() methode:

ctx.rotate(angle);

Nu bereiden we voor om de component te tekenen op het canvas, maar nu tekenen we de centrumpositie van de component op 0,0 op het nu getranslated (en gedraaide) canvas:

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

Na het voltooien moeten we de context object herstellen naar de opgeslagen positie met de restore methode:

ctx.restore();

Deze component is het enige dat kan draaien:

component constructor

component De constructor heeft een naam hoek en het is de hoek in radianen die de component vertegenwoordigt.

component De nieuwe eigenschap van de constructor is update De methode die we gebruiken om de component te tekenen, hier kunt u de mogelijkheid zien om de component te laten draaien:

voorbeeld

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

Try It Yourself