Chuyển động game

红色方块能旋转：

Khối đỏ có thể quay:

Quay

Xoay phần

Trong phần trước của hướng dẫn này, khối đỏ có thể di chuyển trên khu vực trò chơi nhưng không thể quay hoặc xoay.

Để quay thành phần, chúng ta phải thay đổi cách vẽ thành phần.

phương pháp duy nhất có thể quay toàn bộ canvas của canvas là: tất cả nội dung khác mà bạn vẽ trên canvas cũng sẽ được quay, không chỉ thành phần cụ thể. Đó là lý do tại sao chúng ta phải trong

update()

ctx.save();

thực hiện một số thay đổi trong phương pháp:

Trước tiên, chúng ta lưu đối tượng ngữ cảnh canvas hiện tại:

Sau đó chúng ta sử dụng phương pháp translate để dịch chuyển toàn bộ canvas đến tâm của thành phần cụ thể:

ctx.translate(x, y);

Sau đó chúng ta sử dụng phương pháp rotate() để thực hiện quay mà mình muốn:

ctx.rotate(angle);

Hiện tại chúng ta đang chuẩn bị vẽ thành phần lên canvas, nhưng bây giờ chúng ta sẽ vẽ vị trí tâm của thành phần trên vị trí 0,0 trên canvas đã dịch chuyển (và quay):

ctx.restore();

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

Sau khi hoàn thành, chúng ta phải sử dụng phương pháp restore để khôi phục đối tượng ngữ cảnh này về vị trí đã lưu:

angle thành phần là thứ duy nhất có thể quay: khởi tạo thành phần hàm xây dựng có một tên là

angle thuộc tính mới của hàm xây dựng, nó là số vĩ độ biểu diễn góc của thành phần. update phương pháp là vị trí vẽ của thành phần, ở đây bạn có thể thấy sự thay đổi cho phép thành phần quay:

thực thể

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

Thử ngay