Obroty gry
Czerwony kwadrat może się obracać:
Obracanie komponentów
W poprzedniej części tego tutoriala, czerwony kwadrat mógł się poruszać po obszarze gry, ale nie mógł obracać się lub rotować.
Aby obrócić komponent, musimy zmienić sposób jego rysowania.
Jedynym dostępnym do użycia sposobem obracania całego płótna jest metoda obracania:
wszystkie inne elementy rysowane na płótnie będą obracane, a nie tylko specyficzny komponent.
Dlatego musimy w update() w metodzie做一些更改:
Po pierwsze, zapisujemy bieżący obiekt kontekstu płótna:
ctx.save();
Następnie używamy metody translate, aby przesunąć całe płótno do środka specyficznego komponentu:
ctx.translate(x, y);
Następnie wykonujemy obrót, który chcemy za pomocą metody rotate():
ctx.rotate(angle);
Teraz przygotowujemy do rysowania komponentu na płótnie, ale teraz rysujemy jego środek w pozycji 0,0 na przesuniętym (i obróconym) płótnie:
ctx.fillRect(width / -2, height / -2, width, height);
Po zakończeniu, musimy użyć metody restore, aby przywrócić obiekt kontekstu do jego pierwotnej pozycji:
ctx.restore();
ten komponent jest jedynym obiektem, który obraca się:
konstruktor komponentu
komponent konstruktor ma nazwę kąt nowa właściwość, która reprezentuje kąt komponentu w radianach.
komponent konstruktor update metoda to lokalizacja naszego komponentu, tutaj możesz zobaczyć zmiany w pozwalającym na obrót komponentu:
instancja
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();
}
