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