重力 بازی

در برخی بازی‌ها، نیرویی وجود دارد که اجزا بازی را به یک جهت می‌کشد، به عنوان مثال،重力 اجسام را به سمت زمین می‌کشد.

重力

برای اضافه کردن این ویژگی به تابع ساختاری سازنده ما، ابتدا یک 重力 خصوصیت، این خصوصیت تنظیم وزن مخصوص را تنظیم می‌کند. سپس یک gravitySpeed ویژگی‌ها، هر بار که ما فریم را به‌روزرسانی می‌کنیم، افزایش می‌یابند:

مثال

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

آزمایش کنید

به پایین رسیدن

برای جلوگیری از اینکه مربع قرمز همیشه به پایین بیفتد، باید وقتی به پایین‌ترین نقطه بازی می‌رسد، حرکت آن را متوقف کنیم:

مثال

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

آزمایش کنید

تسریع

در بازی، وقتی یک نیرویی مربع را به پایین می‌کشد، باید یک روش طراحی کنید که باعث شود اجزا سرعت بیشتری بگیرند.

وقتی کسی دکمه را کلیک می‌کند، یک تابع فعال می‌شود که باعث می‌شود مربع قرمز به هوا برود:

مثال

<script>
function accelerate(n) {
  myGamePiece.gravity = n;
}
</script>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.1)">تسریع</button>

آزمایش کنید

یک بازی

با توجه به دانشی که تا به حال آموخته‌ایم، یک بازی بسازیم:

مثال

آزمایش کنید

برای شروع بازی، دکمه‌ی سرعت را کلیک کنید.

چند سال زنده می‌مانی؟ از دکمه‌ی سرعت برای ماندن در هوا استفاده کن.