Rotacja gry
Czerwony kwadrat może się obracać:
Elementy obrotowe
We wcześniejszej części tego samouczka czerwony kwadrat mógł poruszać się po obszarze gry, ale nie mógł się obracać ani obracać.
Aby obracać komponenty, musimy zmienić sposób ich rysowania.
Jedyna metoda obrotu dostępna dla elementu canvas obróci całe płótno:
Wszystko inne, co narysujesz na płótnie, również zostanie obrócone, nie tylko konkretny element.
Dlatego musimy dokonać pewnych zmian w update()metodzie:
Najpierw zapisujemy bieżący obiekt kontekstowy canvas:
ctx.save();
Następnie przenosimy całe płótno na środek konkretnego komponentu, korzystając z metody translate:
ctx.translate(x, y);
Następnie wykonujemy żądany obrót za pomocą metody rotate():
ctx.rotate(angle);
Teraz jesteśmy gotowi do narysowania komponentu na płótnie, ale teraz narysujemy go z jego środkową pozycją w pozycji 0,0 na przesuniętym (i obróconym) płótnie:
ctx.fillRect(width / -2, height / -2, width, height);
Kiedy skończymy, musimy przywrócić obiekt kontekstu z powrotem do jego zapisanej pozycji, korzystając z metody restore:
ctx.restore();
Element to jedyna rzecz, która jest obracana:
Konstruktor komponentów
Konstruktor componentma nową właściwość o nazwie angle, która jest liczbą w radianach, która reprezentuje kąt komponentu.
Metoda updatekonstruktora componentpolega na narysowaniu komponentu, a tutaj możesz zobaczyć zmiany, które pozwolą komponentowi się obracać:
Przykład
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();
}