खेल के घटक
खेल क्षेत्र में एक लाल वर्ग जोड़ें:
एक घटक जोड़ें
एक कंपोनेंट कंस्ट्रक्टर बनाएं, जो आपको गेम एरिया में कंपोनेंट्स जोड़ने की सुविधा देता है।
ऑब्जेक्ट कंस्ट्रक्टर को कहा जाता है
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()फ़ंक्शन को हर 20वें मिलीसेकंड (प्रति सेकंड 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);
}
आप हेक्स, आरजीबी, या आरजीबीए जैसे अन्य रंगीन मूल्यों का भी उपयोग कर सकते हैं:
उदाहरण
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();
}