ਗੇਮ ਖ਼ਤਰਾ

بٹن پر دباؤ دینے سے رد کمر کا ريد کریئم:

مانعوں کو شامل كریں

اب ہم چاہتے ہیں کہ گیم میں کچھ مانعوں کو شامل كريئم.

نئي كامپوننٹ کو گیم آرئے میں شامل كريں. اس کو سبز رنگ، چوڑائی 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;
    }
    return crash;
  }
}
function updateGameArea() {
  if (myGamePiece.crashWith(myObstacle)) {
    myGameArea.stop();
  } else {
    myGameArea.clear();
    myObstacle.update();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਰੁਕਾਵਟ ਹਿਲਾਉਣਾ

ਰੁਕਾਵਟ ਸਥਿਰ ਹੋਣ ਤੇ ਖਤਰਨਾਕ ਨਹੀਂ ਹੁੰਦੀ, ਇਸ ਲਈ ਅਸੀਂ ਇਸ ਨੂੰ ਹਿਲਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ。

ਹਰ ਨਵੇਂ ਅੱਪਡੇਟ ਵਿੱਚ ਬਦਲਣਾ myObstacle.x ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ:

ਪ੍ਰਕਾਸ਼

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

ਜੇਕਰ ਮੌਜੂਦਾ ਫਰੇਮ ਨੰਬਰ ਦਿੱਤੇ ਅੰਤਰ ਨਾਲ ਤਾਲਮੇਲ ਕਰਦਾ ਹੈ, ਤਾਂ everyinterval ਫੰਕਸ਼ਨ true ਵਾਲੀ ਮੁੱਲ ਵਾਲੀ ਰਹਿੰਦੀ ਹੈ。

ਪਹਿਲਾਂ, ਜੇਕਰ ਤੁਸੀਂ ਕਈ ਰੁਕਾਵਟਾਂ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਰੁਕਾਵਟ ਵਾਲੀ ਵੈਰੀਅੱਬਲ ਨੂੰ ਇੱਕ ਤਾਰੀਕ ਵਜੋਂ ਘੋਸ਼ਿਤ ਕਰੋ。

ਇਸ ਤੋਂ ਬਾਅਦ, ਅਸੀਂ updateGameArea ਫੰਕਸ਼ਨ ਨੂੰ ਕੁਝ ਬਦਲਣਾ ਹੋਵੇਗਾ。

ਪ੍ਰਕਾਸ਼

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

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਵਿੱਚ updateGameArea ਫੰਕਸ਼ਨ ਵਿੱਚ, ਅਸੀਂ ਹਰੇਕ ਅਵਰੋਧਕ ਦੇ ਨਾਲ ਚੱਕਰ ਲਗਾਉਣਾ ਹੈ ਤਾਕਿ ਹੋਣ ਵਾਲਾ ਹੋਰ ਹੈਨਸਾ ਨਾ ਹੋਵੇ। ਜੇਕਰ ਹੋਰ ਹੈਨਸਾ ਹੁੰਦੀ ਹੈ, updateGameArea ਫੰਕਸ਼ਨ ਰੁਕੇਗਾ ਅਤੇ ਹੋਰ ਚਿੱਤਰਨ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ。

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

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ