عائق اللعبة

按下按钮可移动红色方块：

添加一些障碍

现在我们想为游戏添加一些障碍。

将新组件添加到游戏区域。将其设为绿色，宽 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();
  تحديث العقبة الخاصة بي();
  myGamePiece.newPos();
  myGamePiece.update();
}

تجربة شخصية

الاصطدام بالعقبة = نهاية اللعبة

في المثال السابق، عند الاصطدام بالعقبة لا يحدث أي شيء. في اللعبة، هذا ليس مرضيًا.

كيف يمكننا معرفة إذا كان مربعنا الأحمر قد تصادم بالعقبة؟

في بناء المكون، يتم إنشاء طريقة جديدة لتحقق من whether المكون يتداخل مع مكون آخر. يجب استدعاء هذه الطريقة في كل إطارات التحديث، 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();
    تحديث العقبة الخاصة بي();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

تجربة شخصية

تحريك العقبة

العقبة في حالة الثبات ليست خطيرة، لذا نريد أن نحركها.

تغييرها في كل مرة يتم تحديثها myObstacle.x قيمة الخاصية:

النموذج

function updateGameArea() {
  إذا كان (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } آخره {
    myGameArea.clear();
    myObstacle.x += -1;
    تحديث العقبة الخاصة بي();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

تجربة شخصية

عقبات متعددة

كيف يكون إضافة عدة عقبات؟

لذلك، نحتاج إلى خاصية لحساب عدد الإطارات، بالإضافة إلى طريقة تنفيذ بعض العمليات عند إطار زمني معين.

النموذج

مجموعة اللعبة الخاصة بي = {
  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 تعود صحيحة.

أولاً، إذا كنت ترغب في تعريف عدة عقبات، قم بتحديد متغير العقبات كعدد.

ثم، يجب علينا إجراء بعض التغييرات في دالة updateGameArea.

النموذج

مفاهيم قطعة اللعبة الخاصة بي;
مجموعة العقبات الخاصة بي = [];
function updateGameArea() {
  مفاهيم x, y;
  for (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));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

تجربة شخصية

في تحديث منطقة اللعبة في الدالة، يجب علينا تمرير كل عائق لتحديد ما إذا كان هناك تصادم. إذا حدث تصادم، فإن دالة updateGameArea ستعطل ولن يتم رسم أي شيء بعد ذلك.

تحديث منطقة اللعبة يحسب الدالة عدد الإطارات، ويضيف عائقًا جديدًا كل 150 إطار.

عوائق حجم عشوائي

لإضافة صعوبة ومتعة إلى اللعبة، سنرسل عوائق حجم عشوائي، حتى لا يصطدم المكعب الأحمر بالأعلى والأسفل دون الحاجة إلى تحريكه.

النموذج

function updateGameArea() {
  var x, height, gap, minHeight, maxHeight, minGap, maxGap;
  for (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));
  }
  for (i = 0; i < myObstacles.length; i += 1) {
    myObstacles[i].x += -1;
    myObstacles[i].update();
  }
  myGamePiece.newPos();
  myGamePiece.update();
}

تجربة شخصية