खेल कैनवास
HTML <canvas>तत्व एक वेब पेज पर एक आयताकार वस्तु के रूप में प्रदर्शित होता है:
एचटीएमएल कैनवास
<canvas>तत्व HTML में गेम बनाने के लिए एकदम सही है ।
<canvas>तत्व आपको गेम बनाने के लिए आवश्यक सभी कार्यक्षमता प्रदान करता है ।
पर चित्र बनाने, लिखने, चित्र सम्मिलित करने आदि के लिए JavaScript का उपयोग करें
<canvas>।
.getContext("2d")
<canvas>तत्व में एक अंतर्निहित वस्तु होती है, जिसे ऑब्जेक्ट कहा जाता है getContext("2d"), जिसमें ड्राइंग के तरीके और गुण होते हैं।
आप हमारे कैनवास ट्यूटोरियल<canvas> में तत्व और
getContext("2d")वस्तु के बारे में अधिक जान सकते हैं ।
शुरू हो जाओ
एक गेम बनाने के लिए, एक गेमिंग क्षेत्र बनाकर शुरू करें, और इसे ड्राइंग के लिए तैयार करें:
उदाहरण
function startGame() {
myGameArea.start();
}
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]);
}
}
इस ट्यूटोरियल में बाद में ऑब्जेक्ट myGameAreaमें अधिक गुण और विधियाँ होंगी।
फ़ंक्शन ऑब्जेक्ट की विधि को startGame()आमंत्रित करता है ।
start()
myGameArea
start()विधि एक तत्व बनाती है और इसे तत्व के <canvas>पहले चाइल्डनोड के रूप में सम्मिलित करती <body>है।