Spil rotation

den røde方块 kan rotere:

rotér komponent

I den tidligere del af denne tutorial kan den røde方块 bevege sig i spilområdet, men den kan ikke dreje eller rotere.

For at rotere en komponent, skal vi ændre måden, vi tegner komponenten på.

Det eneste tilgængelige rotationsmetode for canvas-elementet roterer hele canvas:

alle de andre ting, du tegner på canvas, vil også blive roteret, og ikke kun den specifikke komponent.

dette er grunden til, at vi skal gøre det i update() gør nogle ændringer i metoden:

Først gemmer vi den nuværende canvaskontekst:

ctx.save();

Dernæst flytter vi hele canvas til den specifikke komponentens center med translate-metoden:

ctx.translate(x, y);

Dernæst udfører vi den ønskede rotation med rotate() metoden:

ctx.rotate(angle);

Nu er vi klar til at tegne komponenten på canvas, men nu tegner vi centret af komponenten på position 0,0 på den flyttede (og roterede) canvas:

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

Når vi er færdige, skal vi bruge restore-metoden til at gendanne den gemte position af konteksten:

ctx.restore();

denne komponent er det eneste, der kan rotere:

komponentkonstruktøren

component konstruktøren har en metode kaldet vinkel ny egenskab, som repræsenterer komponentens vinkel i radianer.

component konstruktørens update metoden er, hvor vi tegner komponentens placering, her kan du se, hvordan komponentens rotation ændres:

instans

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

Prøv det selv