Rotace hry
Červený čtverec se může otáčet:
Rotující komponenty
Dříve v tomto tutoriálu se červený čtverec mohl pohybovat po herní ploše, ale nemohl se otáčet ani otáčet.
Chcete-li komponenty otáčet, musíme změnit způsob kreslení komponent.
Jediná metoda rotace dostupná pro prvek canvas otočí celé plátno:
Vše ostatní, co na plátno nakreslíte, bude také otočeno, nejen konkrétní součást.
Proto musíme provést několik změn v update()metodě:
Nejprve uložíme aktuální kontextový objekt plátna:
ctx.save();
Poté přesuneme celé plátno do středu konkrétní komponenty pomocí metody překladu:
ctx.translate(x, y);
Poté provedeme požadovanou rotaci pomocí metody rotation():
ctx.rotate(angle);
Nyní jsme připraveni nakreslit komponentu na plátno, ale nyní ji nakreslíme se středovou polohou na pozici 0,0 na přeložené (a otočené) plátno:
ctx.fillRect(width / -2, height / -2, width, height);
Když skončíme, musíme objekt kontextu obnovit zpět do jeho uložené pozice pomocí metody obnovení:
ctx.restore();
Komponenta je jediná věc, která se otáčí:
Konstruktor komponent
Konstruktor componentmá novou vlastnost nazvanou angle, což je radiánové číslo, které představuje úhel komponenty.
Metodou updatekonstruktoru componentje, že komponentu nakreslíme, a zde můžete vidět změny, které umožní komponentě rotovat:
Příklad
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();
}