खेल छवियां
स्माइली को स्थानांतरित करने के लिए बटन दबाएं:
छवियों का उपयोग कैसे करें?
कैनवास पर चित्र जोड़ने के लिए, getContext("2d") ऑब्जेक्ट में अंतर्निहित छवि गुण और विधियाँ हैं।
हमारे गेम में, गेमपीस को एक इमेज के रूप में बनाने के लिए, कंपोनेंट कंस्ट्रक्टर का उपयोग करें, लेकिन किसी रंग को संदर्भित करने के बजाय, आपको इमेज के url का संदर्भ लेना चाहिए। और आपको कंस्ट्रक्टर को बताना होगा कि यह घटक "छवि" प्रकार का है:
उदाहरण
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
घटक निर्माता में हम परीक्षण करते हैं कि घटक "छवि" प्रकार का है, और अंतर्निहित "नई छवि ()" ऑब्जेक्ट कन्स्ट्रक्टर का उपयोग करके एक छवि ऑब्जेक्ट बनाएं। जब हम चित्र बनाने के लिए तैयार होते हैं, तो हम fillRect विधि के बजाय 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(this.x, this.y, this.width, this.height);
}
}
}
छवियाँ बदलें
आप जब चाहें अपने घटक की वस्तु की srcसंपत्ति को बदलकर छवि को बदल सकते हैं।image
यदि आप हर बार स्माइली के हिलने पर बदलना चाहते हैं, तो उपयोगकर्ता द्वारा बटन पर क्लिक करने पर छवि स्रोत बदलें, और बटन क्लिक न होने पर वापस सामान्य हो जाएं:
उदाहरण
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;
if (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;
if (type == "image" || type == "background") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
if (this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}