Oyun Dönme

Kırmızı kutu döndürülebilir:

Döndürülebilir bileşen

Bu rehberin önceki bölümlerinde, kırmızı kutu oyun alanında hareket edebiliyordu, ancak döndürülebilir veya döndürülemezdi.

Bileşeni döndürmek için, bileşeni çizme yöntemini değiştirmemiz gereklidir.

canvas elementinde tek kullanılabilir döndürme yöntemi, tüm canva'yı döndürür:

sizin canva üzerinde çizdiğiniz diğer tüm içerikler de yalnızca belirli bileşen değil, aynı zamanda döndürülür.

Bu yüzden, update() yönteminde bazı değişiklikler yapılıyor:

Öncelikle, mevcut canva上下文 nesnesini kaydediyoruz:

ctx.save();

Sonra tüm canva'yı belirli bileşen merkeziye taşımak için translate yöntemini kullanıyoruz:

ctx.translate(x, y);

Sonra istenen döndürmeyi yapmak için rotate() yöntemini kullanıyoruz:

ctx.rotate(angle);

Şimdi bileşeni çizmek için hazırlanıyoruz, ancak şimdi bileşenin merkezi, 0,0 konumuna taşınmış, döndürülmüş (ve kaydırılmış) bir canva üzerinde çizilecek:

ctx.fillRect(width / -2, height / -2, width, height);

İşlem tamamlandıktan sonra, bu上下文对象必须使用 restore yöntemi, özgün konumuna geri getirilmelidir:

ctx.restore();

bu bileşen, tek döndürülen şeydir:

bileşen oluşturucu

bileşen oluşturucunun adı angle yeni özelliği, bileşen açısını temsil eden açısal değerdir.

bileşen oluşturucunun update metot, burada bileşenin konumunu çizdiğimiz yere, burada bileşenin döndürülebilirliğini 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();
}

Kişisel olarak deneyin