موانع بازی

با فشار دادن دکمه می‌توانید مکعب قرمز را حرکت دهید:

موانع اضافه کنید

ما می‌خواهیم به بازی چند موانع اضافه کنیم.

یک قطعه جدید به منطقه بازی اضافه کنید. آن را به رنگ سبز، پهنای 10 پیکسل و ارتفاع 200 پیکسل تنظیم کنید و سپس آن را در موقعیت 300 پیکسل به سمت راست و 120 پیکسل به سمت پایین قرار دهید.

باید هر فریم از قطعات موانع را به‌روزرسانی کرد:

مثال

ذوبن من = ;
var myObstacle;
function startGame() {
  myGamePiece = new component(30, 30, "red", 10, 120);
  myObstacle = new component(10, 200, "green", 300, 120);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  myObstacle.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

امتحان کنید

برخورد با موانع = پایان بازی

در مثال بالا، وقتی به موانع برخورد می‌کنید، هیچ اتفاقی نمی‌افتد. در بازی، این غیرقابل قبول است.

چگونه می‌توانیم بفهمیم که مربع قرمز ما به موانع برخورد کرده است؟

در داخل فریم‌ورک سازنده‌ی این کامپوننت، یک روش جدید برای بررسی برخورد این کامپوننت با یک کامپوننت دیگر ایجاد کنید. این روش باید در هر بار به‌روزرسانی فریم، یعنی هر 50 بار در ثانیه، فراخوانی شود.

و باید به myGameArea افزودن اشیاء stop() مетодی که این روش را برای 20 میلی ثانیه خالی می‌کند.

مثال

ذوبن من = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop : function() {
    clearInterval(this.interval);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
  this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
  this.crashWith = function(otherobj) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherobj.x;
    var otherright = otherobj.x + (otherobj.width);
    var othertop = otherobj.y;
    var otherbottom = otherobj.y + (otherobj.height);
    var crash = true;
    if ((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright)) {
      crash = false;
    }
    crash برمی‌گرداند;
  }
}
function updateGameArea() {
  اگر (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

امتحان کنید

حرکت موانع

موانع در حالت ساکن خطرناک نیستند، بنابراین می‌خواهیم آن‌ها حرکت کنند.

در هر بار به‌روزرسانی تغییر می‌کند myObstacle.x مقدار ویژگی:

مثال

function updateGameArea() {
  اگر (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.x += -1;
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

امتحان کنید

موانع چندگانه

چطور چندین موانع اضافه می‌کنیم؟

برای این منظور، نیاز به یک ویژگی برای محاسبه تعداد فریم‌ها داریم و یک روش برای اجرای برخی عملیات با فرamerate داده شده.

مثال

ذوبن من = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop : function() {
    clearInterval(this.interval);
  }
}
توابع everyinterval(n) {
  اگر (myGameArea.frameNo / n) % 1 == 0) {return true;}
  false برمی‌گرداند;
}

اگر شماره فریم فعلی با فاصله داده شده مطابقت دارد، تابع everyinterval به true برمی‌گردد.

ابتدا، برای تعریف چندین موانع، متغیر موانع را به عنوان یک آرایه اعلام کنید.

در ابتدا، نیاز داریم تا تغییراتی در تابع updateGameArea ایجاد کنیم.

مثال

ذوبن من = ;
موانع من = [];
function updateGameArea() {
  متغیر x، y;
  برای (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    y = myGameArea.canvas.height - 200
    myObstacles.push(new component(10, 200, "green", x, y));
  }
  برای (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

امتحان کنید

در updateGameArea در این تابع، باید هر موانع را در یک چرخه‌بندی بگردیم تا ببینیم آیا برخوردی رخ داده است. اگر برخوردی رخ داد، تابع updateGameArea متوقف شده و دیگر برای رندر کردن استفاده نمی‌شود.

updateGameArea این تابع فریم‌ها را شمارش کرده و هر 150 فریم یک موانع اضافه می‌کند.

موانع اندازه‌های تصادفی

برای افزایش دشواری و سرگرمی بازی، ما از اشیای موانع اندازه‌های تصادفی ارسال می‌کنیم تا چهارچوب قرمز باید به بالا و پایین حرکت کند تا از برخورد جلوگیری کند.

مثال

function updateGameArea() {
  var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  برای (i = 0; i < myObstacles.length; i += 1) {
    if (myGamePiece.crashWith(myObstacles[i])) {
      myGameArea.stop();
      return;
    }
  }
  myGameArea.clear();
  myGameArea.frameNo += 1;
  if (myGameArea.frameNo == 1 || everyinterval(150)) {
    x = myGameArea.canvas.width;
    minHeight = 20;
    maxHeight = 200;
    height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
    minGap = 50;
    maxGap = 200;
    gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
    myObstacles.push(new component(10, height, "green", x, 0));
    myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
  }
  برای (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

امتحان کنید