गेम होड

बटन दबाने से लाल बॉक्स को चलाया जा सकता है:

अवरोधक जोड़ें

अब हम चाहते हैं कि खेल में कुछ अवरोधक जोड़ें。

नया कंपोनेंट जोड़ें। इसे हरी रंग में रखें, चौड़ाई 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();
}

स्वयं एक प्रयास करें

टकराने वाला = खेल समाप्त

उपरोक्त उदाहरण में, जब आप रोकड को टकराते हैं, कुछ भी नहीं होता। खेल में यह काफी संतोषदायक नहीं है。

हमें कैसे पता चलेगा कि हमारा लाल बाक्स रोकड को टकराया है?

कंपोनेंट के निर्माण फ़ंक्शन में एक नई मेथड बनाई जाती है जो इस कंपोनेंट को दूसरे कंपोनेंट से टकराने की जाँच करती है। प्रत्येक फ्रेम अपडेट के दौरान इस मेथड को बुला दिया जाना चाहिए, प्रति सेकंड 50 बार。

और myGameArea ऑब्जेक्ट जोड़े stop() यह मेथड द्वारा 20 मिलीसेकंड की अंतराल को हटा देता है。

उदाहरण

वार माईगेमएरिया = {
  कैनवास : डाक्यूमेंट.क्रिएटएलेमेंट("canvas"),
  स्टार्ट : function() {
    इस.कैनवास.विस्तृतता = 480;
    इस.कैनवास.ऊंचाई = 270;
    इस.कंटेक्स = इस.कैनवास.गेटकंटेक्स("2d");
    डाक्यूमेंट.बॉडी.इंसर्टबीफ़ोर(इस.कैनवास, डाक्यूमेंट.बॉडी.चाइल्डनों[0]);
    इस.इंटरवेल = सेटटाइमअॉफ़(अपडेटगेमएरिया, 20);
  },
  स्क्लियर : function() {
    इस.कंटेक्स.गार्डस्कीन(0, 0, इस.कैनवास.विस्तृतता, इस.कैनवास.ऊंचाई);
  },
  स्टॉप : function() {
    स्क्रीनअॉफ़(इस.इंटरवेल);
  }
}
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)) {
      क्रैश = फॉल्स;}
    }
    रिटर्न क्रैश;
  }
}
function updateGameArea() {
  यदि (माईगेमपीस.क्रैशविथ(माईओबस्टैक्स)) {
    myGameArea.stop();
  } अन्यथा {
    myGameArea.clear();
    माईओबस्टैक्स.अपडेट();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

स्वयं एक प्रयास करें

रोबस्टैक्स गतिशील करना

रोबस्टैक्स निर्जल में खतरनाक नहीं है, इसलिए हमें इसे गतिशील बनाना चाहते हैं。

प्रत्येक अपडेट में बदला जाता है माईओबस्टैक्स.एक्स के अट्रिब्यूट के मान:

उदाहरण

function updateGameArea() {
  यदि (माईगेमपीस.क्रैशविथ(माईओबस्टैक्स)) {
    myGameArea.stop();
  },
    myGameArea.clear();
    माईओबस्टैक्स.एक्स += -1;
    माईओबस्टैक्स.अपडेट();
    myGamePiece.newPos();
    myGamePiece.update();
  }
}

स्वयं एक प्रयास करें

बहुल रोबस्टैक्स

कई रोबस्टैक्स जोड़ें तो कैसा है?

इसके लिए, हमें फ्रेम नंबर की गणना करने के लिए एक अट्रिब्यूट और एक फ़ंक्शन की जरूरत है जो दिए गए फ्रेम रेट के साथ कुछ काम करे。

उदाहरण

वार माईगेमएरिया = {
  कैनवास : डाक्यूमेंट.क्रिएटएलेमेंट("canvas"),
  स्टार्ट : function() {
    इस.कैनवास.विस्तृतता = 480;
    इस.कैनवास.ऊंचाई = 270;
    इस.कंटेक्स = इस.कैनवास.गेटकंटेक्स("2d");
    डाक्यूमेंट.बॉडी.इंसर्टबीफ़ोर(इस.कैनवास, डाक्यूमेंट.बॉडी.चाइल्डनों[0]);
    इस.फ्रेमनंबर = 0;
    इस.इंटरवेल = सेटटाइमअॉफ़(अपडेटगेमएरिया, 20);
  },
  स्क्लियर : function() {
    इस.कंटेक्स.गार्डस्कीन(0, 0, इस.कैनवास.विस्तृतता, इस.कैनवास.ऊंचाई);
  },
  स्टॉप : function() {
    स्क्रीनअॉफ़(इस.इंटरवेल);
  }
}
फ़ंक्शन एवरीइंटरवेल(एन) {
  यदि ((माईगेमएरिया.फ्रेमनंबर / एन) % 1 == 0) {return true;}
  वापस false;
}

यदि मौजूदा फ्रेम नंबर दिए गए अंतर के साथ मेल खाता है, तो everyinterval फ़ंक्शन true वापस करता है。

पहले, अगर आप कई रोबस्टैक्स बनाना चाहते हैं, तो रोबस्टैक्स वेरियेबल को एक एक्सेस के रूप में घोषित करें。

इसके बाद, हमें updateGameArea फ़ंक्शन में कुछ बदलाव करने की जरूरत है。

उदाहरण

वार माईगेमपीस;
वार माईओबस्टैक्स = [];
function updateGameArea() {
  वार एक्स, य;
  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();
}

स्वयं एक प्रयास करें