Game Rotasie
Die rooi vierkant kan draai:
Roterende komponente
Vroeër in hierdie tutoriaal kon die rooi vierkant op die spelarea rondbeweeg, maar dit kon nie draai of draai nie.
Om komponente te roteer, moet ons die manier waarop ons komponente teken, verander.
Die enigste rotasiemetode wat vir die doekelement beskikbaar is, sal die hele doek roteer:
Alles anders wat jy op die doek teken, sal ook geroteer word, nie net die spesifieke komponent nie.
Daarom moet ons 'n paar veranderinge in die update()metode maak:
Eerstens stoor ons die huidige doekkonteksvoorwerp:
ctx.save();
Dan skuif ons die hele doek na die middel van die spesifieke komponent, deur die vertaalmetode te gebruik:
ctx.translate(x, y);
Dan voer ons die gewenste rotasie uit met die rotate() metode:
ctx.rotate(angle);
Nou is ons gereed om die komponent op die doek te teken, maar nou sal ons dit teken met sy middelposisie op posisie 0,0 op die vertaalde (en geroteerde) doek:
ctx.fillRect(width / -2, height / -2, width, height);
Wanneer ons klaar is, moet ons die konteksvoorwerp terugstel na sy gestoorde posisie, deur die herstelmetode te gebruik:
ctx.restore();
Die komponent is die enigste ding wat geroteer word:
Die komponentkonstruktor
Die componentkonstruktor het 'n nuwe eienskap genaamd angle, wat radiaalgetal is wat die hoek van die komponent verteenwoordig.
Die updatemetode van die componentkonstruktor is waar ons die komponent teken, en hier kan jy die veranderinge sien wat die komponent sal toelaat om te draai:
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();
}