गेम कंपोनेंट

गेम क्षेत्र में एक लाल वर्ग जोड़ें:

घटक जोड़ें

एक घटक कन्स्ट्रक्टर बनाएं, जो आपको घटक को गेम क्षेत्र में जोड़ने की अनुमति देता है।

इस ऑब्जेक्ट कन्स्ट्रक्टर कोघटक (component)हमने पहला घटक बनाया है, जिसे myGamePiece:

उदाहरण

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

अपने आप से प्रयास करें

ये घटक उनके आकार और गति को नियंत्रित करने वाली गुण और तरीके हैं।

फ्रेम

गेम को अभिनय के लिए तैयार करने के लिए, हम हर सेकंड में 50 बार दिखाएंगे, जो फिल्म के फ्रेम की तरह है।

पहले, एक नाम updateGameArea() का नया फ़ंक्शन।

की फ़ंक्शन को जोड़ा गया है myGameArea ऑब्जेक्ट में, एक अंतराल जोड़ा गया है updateGameArea() फ़ंक्शन (प्रति सेकंड 50 बार) को जोड़ा गया है। फिर, एक नाम clear() के लिए चुना गया है, जो पूरे कैनवस को साफ करने के लिए इस्तेमाल की जाती है。

की फ़ंक्शन को जोड़ा गया है component कन्स्ट्रक्टर में, एक नाम update() की फ़ंक्शन के लिए इस्तेमाल किया जाता है, जो कंपोनेंट के ड्राइंग को संभालता है。

updateGameArea() कार्यक्रम फ़ंक्शन clear() और update() विधि。

परिणाम के अनुसार, कंपोनेंट प्रति सेकंड 50 बार दूसरी बार ड्रा किया जाता है और साफ किया जाता है:

उदाहरण

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);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  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);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

अपने आप से प्रयास करें

इसे गति दें

लाल वर्ग प्रति सेकंड 50 बार दूसरी बार ड्रा किया जाता है, हर बार गेम क्षेत्र को अद्यतन करने के दौरान हम x स्थान (स्तरीय) एक पिक्सल के लिए बदल देते हैं:

उदाहरण

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

अपने आप से प्रयास करें

गेम क्षेत्र को साफ करने के लिए क्यों नहीं?

इसके लिए ज़रूरत नहीं है कि हर अद्यतन में गेम क्षेत्र को साफ किया जाए। हालांकि, अगर हम इसे छोड़ दें clear() विधि, कंपोनेंट की सभी गतिविधियाँ उसके अंतिम फ्रेम में की गई स्थिति का ट्रैक छोड़ देती हैं:

उदाहरण

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

अपने आप से प्रयास करें

आकार बदलें

आप कंपोनेंट की चौड़ाई और ऊंचाई को नियंत्रित कर सकते हैं:

उदाहरण

10x140 पिक्सल के वर्गाकार बनाएं:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

अपने आप से प्रयास करें

रंग बदलें

आप कंपोनेंट के रंग को नियंत्रित कर सकते हैं:

उदाहरण

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

अपने आप से प्रयास करें

आप अन्य रंग मानों का उपयोग कर सकते हैं, जैसे हेक्साडेसिमल, rgb या rgba:

उदाहरण

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

अपने आप से प्रयास करें

स्थान बदलें

हम घटक को खेल क्षेत्र पर स्थापित करने के लिए x और y स्थान का उपयोग करते हैं।

कैनवस के बाएँ ऊपरी कोण के स्थान (0,0) हैं।

नीचे दिए खेल क्षेत्र पर माउस को ले जाकर उसके x और y स्थान देखें:

आप घटक को खेल क्षेत्र के किसी भी स्थान पर रख सकते हैं:

उदाहरण

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

अपने आप से प्रयास करें

अनेक घटक

आप खेल क्षेत्र में किसी भी संख्या के घटक रख सकते हैं:

उदाहरण

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

अपने आप से प्रयास करें

चलने वाले घटक

तीन घटकों को अलग-अलग दिशाओं में एक साथ चलाएं:

उदाहरण

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

अपने आप से प्रयास करें