Oyun Döndürme
Kırmızı kare dönebilir:
Dönen Bileşenler
Bu öğreticinin başlarında, kırmızı kare oyun alanında hareket edebildi, ancak dönemedi veya dönemedi.
Bileşenleri döndürmek için bileşenleri çizme şeklimizi değiştirmeliyiz.
Tuval öğesi için kullanılabilen tek döndürme yöntemi tüm tuvali döndürür:
Tuval üzerine çizdiğiniz diğer her şey, yalnızca belirli bileşen değil, aynı zamanda döndürülecektir.
update()Bu yüzden yöntemde bazı değişiklikler yapmalıyız :
İlk olarak, mevcut tuval bağlam nesnesini kaydederiz:
ctx.save();
Ardından, translate yöntemini kullanarak tüm tuvali belirli bileşenin merkezine taşırız:
ctx.translate(x, y);
Ardından, döndürme() yöntemini kullanarak istenen döndürme işlemini gerçekleştiririz:
ctx.rotate(angle);
Şimdi bileşeni tuval üzerine çizmeye hazırız, ancak şimdi orta konumu çevrilmiş (ve döndürülmüş) tuval üzerinde 0,0 konumunda olacak şekilde çizeceğiz:
ctx.fillRect(width / -2, height / -2, width, height);
Bitirdiğimizde, geri yükleme yöntemini kullanarak bağlam nesnesini kayıtlı konumuna geri yüklemeliyiz:
ctx.restore();
Bileşen döndürülen tek şeydir:
Bileşen Oluşturucu
Yapıcı , bileşenin açısını temsil eden radyan sayı componentadında yeni bir özelliğe sahiptir .angle
Yapıcının updateyöntemi component, bileşeni çizmemizdi ve burada bileşenin dönmesine izin verecek değişiklikleri görebilirsiniz:
Örnek
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();
}