Di chuyển game

bằng cách sử dụng cách vẽ thành phần mới được giải thích trong phần chuyển động của trò chơi, hành động bây giờ linh hoạt hơn.

cách di chuyển vật thể?

trong component thêm một tốc độ thuộc tính, thuộc tính này đại diện cho tốc độ hiện tại của thành phần.

còn đối với newPos() thực hiện một số thay đổi trong phương thức tốc độ và góc tính toán vị trí của thành phần.

Mặc định, thành phần quay lên trên, bằng cách tốc độ đặt thuộc tính = 1, thành phần sẽ bắt đầu di chuyển về phía trước.

Mẫu

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  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();
  {}
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  {}
{}

Thử ngay

góc

chúng ta cũng mong muốn có thể quay trái và phải. Tạo một tên moveAngle mới của thuộc tính, nó chỉ ra giá trị di chuyển hiện tại hoặc góc quay. Trong newPos() trong phương thức moveAngle tính toán góc:

Mẫu

Hãy đặt thuộc tính moveangle = 1 và xem điều gì sẽ xảy ra:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  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();
  {}
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  {}
{}

Thử ngay

Sử dụng bàn phím

Làm thế nào để di chuyển khối đỏ bằng bàn phím? Khi bạn sử dụng phím mũi tên lên, khối đỏ không di chuyển lên và xuống mà từ một bên di chuyển sang bên khác và di chuyển về phía trước, đồng thời quay trái và phải khi bạn nhấn phím mũi tên trái và phải.

Mẫu

Thử ngay

Đảm bảo rằng khu vực trò chơi nhận được sự tập trung, sau đó sử dụng phím mũi tên để di chuyển khối đỏ.