Rotasi permainan
Kotak merah dapat berputar:
Memutar Komponen
Sebelumnya di tutorial ini, kotak merah bisa bergerak di area game, tapi tidak bisa berputar atau berputar.
Untuk memutar komponen, kita harus mengubah cara kita menggambar komponen.
Satu-satunya metode rotasi yang tersedia untuk elemen kanvas akan memutar seluruh kanvas:
Semua hal lain yang Anda gambar di kanvas juga akan diputar, tidak hanya komponen tertentu.
Itu sebabnya kita harus membuat beberapa perubahan dalam update()metode:
Pertama, kami menyimpan objek konteks kanvas saat ini:
ctx.save();
Kemudian kita pindahkan seluruh kanvas ke tengah komponen tertentu, menggunakan metode translate:
ctx.translate(x, y);
Kemudian kami melakukan rotasi yang diinginkan menggunakan metode rotate() :
ctx.rotate(angle);
Sekarang kita siap untuk menggambar komponen ke kanvas, tapi sekarang kita akan menggambarnya dengan posisi tengahnya di posisi 0,0 pada kanvas yang diterjemahkan (dan diputar):
ctx.fillRect(width / -2, height / -2, width, height);
Setelah selesai, kita harus mengembalikan objek konteks kembali ke posisi tersimpannya, menggunakan metode pemulihan:
ctx.restore();
Komponen adalah satu-satunya hal yang diputar:
Konstruktor Komponen
Konstruktor componentmemiliki properti baru yang disebut angle, yang merupakan bilangan radian yang mewakili sudut komponen.
Metode updatekonstruktornya componentadalah kita menggambar komponen, dan di sini Anda dapat melihat perubahan yang memungkinkan komponen berputar:
Contoh
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();
}