Game Gravitasi


Beberapa game memiliki gaya yang menarik komponen game ke satu arah, seperti gravitasi menarik benda ke tanah.




Gravitasi

Untuk menambahkan fungsionalitas ini ke konstruktor komponen kami, pertama-tama tambahkan gravityproperti, yang mengatur gravitasi saat ini. Kemudian tambahkan gravitySpeedproperti, yang meningkat setiap kali kami memperbarui bingkai:

Contoh

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


Pukul Bawah

Untuk mencegah kotak merah jatuh selamanya, hentikan jatuhnya saat menyentuh bagian bawah area permainan:

Contoh

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


Percepat

Dalam sebuah permainan, ketika Anda memiliki kekuatan yang menarik Anda ke bawah, Anda harus memiliki metode untuk memaksa komponen untuk berakselerasi ke atas.

Memicu fungsi ketika seseorang mengklik tombol, dan membuat kotak merah terbang di udara:

Contoh

<script>
function accelerate(n) {
  myGamePiece.gravity = n;
}
</script>

<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">ACCELERATE</button>

Permainan

Buat game berdasarkan apa yang telah kita pelajari sejauh ini:

Contoh