موانع بازی

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

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

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

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

بایستی هر فریم از کامپوننت اشیاء را به‌روزرسانی کرد:

مثال

var myGamePiece;
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 ميلى ثانيه جريانى را خالص مى كند.

مثال

var myGameArea = {
  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();
  }
}

آزمایش کنید

مانع چندگانه

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

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

مثال

var myGameArea = {
  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);
  }
}
function everyinterval(n) {
  اگر (myGameArea.frameNo / n) % 1 == 0) {return true;}
  false را برگردان;
}

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

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

آخر، ما باید چندین تغییر در تابع updateGameArea انجام دهیم.

مثال

var myGamePiece;
var myObstacles = [];
function updateGameArea() {
  var 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();
}

آزمایش کنید