Xoay vòng trò chơi
Hình vuông màu đỏ có thể xoay:
Xoay các thành phần
Trước đó trong hướng dẫn này, hình vuông màu đỏ có thể di chuyển xung quanh trên gamearea, nhưng nó không thể quay hoặc xoay.
Để xoay các thành phần, chúng ta phải thay đổi cách chúng ta vẽ các thành phần.
Phương pháp xoay duy nhất có sẵn cho phần tử canvas sẽ xoay toàn bộ canvas:
Mọi thứ khác bạn vẽ trên canvas cũng sẽ được xoay, không chỉ thành phần cụ thể.
Đó là lý do tại sao chúng tôi phải thực hiện một số thay đổi trong update()phương pháp:
Đầu tiên, chúng tôi lưu đối tượng ngữ cảnh canvas hiện tại:
ctx.save();
Sau đó, chúng tôi di chuyển toàn bộ canvas đến trung tâm của thành phần cụ thể, sử dụng phương pháp dịch:
ctx.translate(x, y);
Sau đó, chúng tôi thực hiện xoay mong muốn bằng cách sử dụng phương thức xoay ():
ctx.rotate(angle);
Bây giờ chúng ta đã sẵn sàng để vẽ thành phần lên canvas, nhưng bây giờ chúng ta sẽ vẽ nó với vị trí trung tâm của nó ở vị trí 0,0 trên canvas đã dịch (và xoay):
ctx.fillRect(width / -2, height / -2, width, height);
Khi hoàn tất, chúng ta phải khôi phục đối tượng ngữ cảnh trở lại vị trí đã lưu của nó, sử dụng phương thức khôi phục:
ctx.restore();
Thành phần là thứ duy nhất được xoay:
Cấu tạo thành phần
Hàm componenttạo có một thuộc tính mới được gọi anglelà số radian đại diện cho góc của thành phần.
Phương updatethức của hàm componenttạo là chúng ta vẽ thành phần và ở đây bạn có thể thấy những thay đổi sẽ cho phép thành phần xoay:
Thí dụ
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();
}