गेम इमेज

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

कैसे छवि का उपयोग करें?

यदि आपको कैनवस पर छवि जोड़ना हो, "2d" ऑब्जेक्ट के आंतरिक छवि गुण और विधियों का उपयोग करें।

हमारे खेल में, यदि आप खेल के अवयव को छवि के रूप में बनाना चाहते हैं, तो कंपोनेंट कार्यक्रम का उपयोग करें, लेकिन आपको रंग के बजाय छवि के URL को रिफ़रेंस करना होगा। और आपको कार्यक्रम को बताना होगा कि इस कंपोनेंट का क़िस्म "image" है:

इस्तेमाल

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

कंपोनेंट के निर्माण कार्यक्रम में, हम कंपोनेंट को "image" क़िस्म का होने का परीक्षण करते हैं और आंतरिक "new Image()" ऑब्जेक्ट कार्यक्रम कारक्ष के द्वारा एक छवि ऑब्जेक्ट का निर्माण करते हैं। हम छवि को चित्रित करने के लिए तैयार होते हैं तो, हम drawImage मथड़े का उपयोग करते हैं नहीं, बजाय फ़िल्ल रेक्टेंज मथड़े:

इस्तेमाल

function component(width, height, color, x, y, type) {
  this.type = type;
  if (type == "image") {}}
    this.image = new Image();
    this.image.src = color;
  }
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    if (type == "image") {}}
      ctx.drawImage(this.image,
        this.x,
        this.y,
        this.width, this.height);
    } else {
      ctx.fillStyle = color;
      ctx.fillRect(इसका_x, इसकी_y, इसकी_width, इ�की_height);
    }
  }
}

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

इमेज को बदल सकते हैं

आप किसी समय भी कंपोनेंट के image के src गुण को बदलकर इमेज को बदलें।

यदि आप प्रत्येक चलने के दौरान चेहरे को बदलना चाहते हैं, तो बटन पर क्लिक करने पर इमेज स्रोत को बदलें और बटन नहीं होने पर फिर से ठीक करें:

इस्तेमाल

function move(dir) {
  myGamePiece.image.src = "angry.gif";
  if (dir == "up") {myGamePiece.speedY = -1; }
  if (dir == "down") {myGamePiece.speedY = 1; }
  if (dir == "left") {myGamePiece.speedX = -1; }
  if (dir == "right") {myGamePiece.speedX = 1; }
}
function clearmove() {
  myGamePiece.image.src = "smiley.gif";
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;
}

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

पृष्ठभूमि इमेज

पृष्ठभूमि इमेज को कंपोनेंट के रूप में जोड़कर इसे गेम एरिया में जोड़ा जा सकता है और प्रत्येक फ्रेम में पृष्ठभूमि को अद्यतन किया जा सकता है:

इस्तेमाल

var myGamePiece;
var myBackground;
function startGame() {
  myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
  myBackground = new component(656, 270, "citymarket.jpg", 0, 0, "image");
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

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

पृष्ठभूमि को चलाएं

पृष्ठभूमि घटक को speedX पृष्ठभूमि को चलाने वाला गुण है:

इस्तेमाल

function updateGameArea() {
  myGameArea.clear();
  myBackground.speedX = -1;
  myBackground.newPos();
  myBackground.update();
  myGamePiece.newPos();
  myGamePiece.update();
}

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

पृष्ठभूमि चक्रवात

यहाँ तक कि इसी पृष्ठभूमि को हमेशा चक्रवात करना है, हमें विशेष तकनीक का उपयोग करना होगा。

पहले, कंपोनेंट के निर्माण फ़ंक्शन को यह बताएं कि यह पृष्ठभूमि है। फिर, कंपोनेंट के निर्माण फ़ंक्शन इमेज को दो बार जोड़ देगा, दूसरी इमेज को तुरंत पहली इमेज के बाद रख देगा。

में newPos() तरीके में, कंपोनेंट का x स्थान इमेज के अंत तक पहुंचा है की जाँच करें, यदि हो तो कंपोनेंट का x स्थान विन्यास किया गया है 0:

इस्तेमाल

function component(width, height, color, x, y, type) {
  this.type = type;
  यदि (type == "image" || type == "background") {
    this.image = new Image();
    this.image.src = color;
  }
  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.drawImage(this.image, this.x, this.y, this.width, this.height);
      यदि (type == "image" || type == "background") {
      ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
        यदि (type == "background") {
      }
    }
      ctx.fillStyle = color;
      ctx.fillRect(इसका_x, इसकी_y, इसकी_width, इ�की_height);
    }
  }
  इसकी_newPos = function() {
    इसका_x += इसकी_speedX;
    इसकी_y += इसकी_speedY;
    यदि (इसका_प्रकार == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    }
  }
}

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