Trọng lực game

Một số trò chơi có lực kéo các thành phần trò chơi về một hướng, ví dụ lực hấp dẫn kéo vật về mặt đất.

lực hấp dẫn

Nếu bạn muốn thêm tính năng này vào hàm xây dựng thành phần của chúng ta, hãy thêm một lực hấp dẫn Thuộc tính, thuộc tính này thiết lập lực hấp dẫn hiện tại. Sau đó thêm một gravitySpeed Các thuộc tính, mỗi khi chúng ta cập nhật khung hình, nó sẽ tăng lên:

Mô hình

function component(width, height, color, x, y, type) {
  this.type = type;
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.speedX = 0;
  this.speedY = 0;
  this.gravity = 0.05;
  this.gravitySpeed = 0;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
  }
}

Hãy thử trực tiếp

Chạm đất

Để ngăn chặn khối đỏ rơi mãi mãi, chúng ta cần dừng rơi khi nó đến đáy khu vực trò chơi:

Mô hình

  this.newPos = function() {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
  }
  this.hitBottom = function() {
    var rockbottom = myGameArea.canvas.height - this.height;
    if (this.y > rockbottom) {
      this.y = rockbottom;
    }
  }

Hãy thử trực tiếp

Tăng tốc

Trong trò chơi, khi có lực kéo khối xuống, bạn nên thiết kế một phương pháp để buộc thành phần tăng tốc.

Khi ai đó nhấp vào nút, sẽ kích hoạt một hàm để cho khối đỏ bay lên không gian:

Mô hình

<script>
function tăng_tốc(n) {
  myGamePiece.gravity = n;
}
</script>
<button onmousedown="tăng_tốc(-0.2)" onmouseup="tăng_tốc(0.1)">Tăng tốc</button>

Hãy thử trực tiếp

Một trò chơi

Tạo một trò chơi dựa trên kiến thức mà chúng ta đã học cho đến nay:

Mô hình

Hãy thử trực tiếp

Hãy nhấp vào nút tăng tốc để bắt đầu trò chơi.

Bạn có sống được bao lâu? Hãy sử dụng nút tăng tốc để保持在 không gian.