Spel rotation

Den röda rutan kan roteras:

Roterar

Roteringskomponent

I den tidigare delen av denna tutorial kunde den röda rutan röra sig på spelområdet, men den kunde inte vrida eller rotera.

För att rotera en komponent måste vi ändra sättet vi ritar komponenten.

Det enda roteringsmetoden som är tillgänglig för canvas-elementet kommer att rotera hela canvas:

alla andra saker du ritar på canvas kommer också att roteras, inte bara den specifika komponenten. det är därför vi måste i uppdatera()

metoden gör några ändringar:

ctx.spara();

Först sparar vi den aktuella canvas-kontextobjektet:

Sedan använder vi translate-metoden för att flytta hela canvas till specifik komponentens centrum:

ctx.translatera(x, y);

Sedan använder vi rotera() metoden för att utföra den önskade rotationen:

ctx.rotera(vinkel);

Nu är vi redo att rita komponenten på canvas, men nu kommer vi att rita dess centrum på position 0,0 på den trasigerade (och roterade) canvas:

ctx.fyllRektangel(bredd / -2, höjd / -2, bredd, höjd);

ctx återställ();

När vi är klara, måste vi använda restore-metoden för att återställa denna kontextobjekt till dess sparade plats:

den här komponenten är det enda som roterar:

ny egenskap, som är radianerna som representerar komponentens vinkel. komponentkonstruktorn Konstruktorn har en namn vinkel

ny egenskap, som är radianerna som representerar komponentens vinkel. Konstruktorns uppdatera Metoden är där vi ritar komponentens plats, här kan du se tillåtelse för komponentens rotation:

exempel

function komponent(bredd, höjd, färg, x, y) {
  this.bredd = bredd;
  this.höjd = höjd;
  this.vinkel = 0;
  this.x = x;
  this.y = y;
  this.uppdatera = function() {
    ctx = minSpeletområde.context;
    ctx.spara();
    ctx.translatera(this.x, this.y);
    ctx.rotera(this.vinkel);
    ctx.fyllFärg = färg;
    ctx.fyllRektangel(this.bredd / -2, this.höjd / -2, this.bredd, this.höjd);
    ctx återställ();
  }
}
function uppdateraSpeletområde() {
  minSpeletområde.töm();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

Prova själv