Putar Permainan

Blok merah dapat berputar:

Putar komponen

Pada bagian awal tutorial ini, blok merah dapat bergerak di area permainan, tetapi tidak dapat berputar atau berputar.

Untuk memutar komponen, kita harus mengubah cara penarikan komponen.

Metode putar yang tersedia hanya untuk mengputar seluruh kanvas:

semua konten lain yang Anda lukis di atas kanvas juga akan berputar, bukan hanya komponen tertentu.

Ini adalah alasan kita harus di update() di dalam metode untuk melakukan beberapa perubahan:

Pertama, kita simpan konteks kanvas saat ini:

ctx.save();

Lalu kita menggunakan metode translate untuk memindahkan seluruh kanvas ke pusat komponen tertentu:

ctx.translate(x, y);

Lalu kita menggunakan metode rotate() untuk melakukan putar yang diinginkan:

ctx.rotate(angle);

Sekarang kita siap untuk menarik komponen ke atas kanvas, tetapi sekarang kita akan menarik posisi pusatnya ke 0,0 di atas kanvas yang digeser (dan berputar):

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

Setelah selesai, kita harus menggunakan metode restore untuk memulihkan objek konteks ini ke posisi yang disimpan:

ctx.restore();

komponen ini adalah hal yang satu-satunya yang berputar:

konstruktor komponen

component Konstruktor memiliki nama angle adalah bilangan radian yang mewakili sudut komponen.

component properti baru konstruktur update metoden adalah tempat penarikan komponen, di sini Anda dapat melihat perubahan yang diizinkan untuk komponen berputar:

实例

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();
}

Coba Sendiri