Game Obstacles

Duba batai domin koyi a hanyar tsa:

koyi akwaiya a hanyar tsa:

a hanyar tsa a hanyar tsa:

Rannar koyi akwaiya a hanyar tsa a hanyar tsa. A koyiya zuwa gaskiya, kaiwa 10 bintu, kaiwa 200 bintu, kuma a koyi a hanyar tsa dama 300 bintu, kuma a hanyar tsa dama 120 bintu.

koyi akwaiya a hanyar tsa a hanyar tsa:

مثال

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

Try It Yourself

撞到障碍 = 游戏结束

在上面的例子中，当您碰到障碍物时什么也不会发生。在游戏中，这并不令人满意。

我们如何知道我们的红色方块是否撞到了障碍物？

在组件构造函数中创建一个新方法，用于检查该组件是否与另一个组件相撞。每次帧更新时都应调用此方法，每秒 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;
    }
    return crash;
  }
}
function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

Try It Yourself

移动障碍物

障碍物在静止时没有危险，因此我们希望它动起来。

每次更新时更改 myObstacle.x 的属性值：

مثال

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

Try It Yourself

多重障碍

添加多个障碍怎么样？

为此，我们需要一个用于计算帧数的属性，以及一个以给定帧速率执行某些操作的方法。

مثال

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) {
  if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
  return false;
}

kada a hanyan ID a fashin a fashin yin 'everyinterval' a hanyan true.

koyar, baiyi kada a hanyan 'myObstacles' a hanyan gajere bayi.

koyar, a na yin yin 'updateGameArea' a hanyan gajere.

مثال

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

Try It Yourself

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

Try It Yourself