कैनवास और स्प्राइट का उपयोग करके एक गेम बनाएं

वेब अब हर जगह है और एप्लिकेशन बनाने और वितरित करने के लिए बहुत शक्तिशाली वातावरण प्रदान करता है। लूप के बजाय: कोड लिखना → संकलन → शुरू करना, बस एप्लिकेशन को अपडेट करें या ब्राउज़र में कोड "लाइव" भी लिखें। इसके अलावा, भारी संख्या में प्लेटफार्मों पर अपने आवेदन को वितरित करने के लिए यह अपेक्षाकृत दर्द रहित है। दिलचस्प बात यह है कि पिछले कुछ वर्षों में एचटीएमएल 5 का उपयोग कर खेल विकास एक वास्तविकता बन गया है।
कैनवास तत्व एचटीएमएल 5 के साथ पेश किया गया था और इसके साथ काम करने के लिए एक एपीआई प्रदान करता है। एपीआई सरल है, लेकिन अगर आपने कभी ग्राफिक्स के साथ काम नहीं किया है, तो आपको इसकी आदत डालने में समय लगेगा। कैनवस बड़ी संख्या में ब्राउज़रों द्वारा समर्थित है, जो वेब को गेम बनाने के लिए एक अच्छा मंच बनाता है।
कैनवास का उपयोग करना सरल है: एक टैग बनाएं, जावास्क्रिप्ट में एक प्रदर्शन संदर्भ बनाएं, और फ़ॉर्म और छवियों को प्रदर्शित करने के लिए इस संदर्भ पर fillRect और drawImage जैसी विधियों का उपयोग करें। एपीआई में कई तरह के रास्ते बनाने के लिए कई तरीके हैं, छवि रूपांतरण, और बहुत कुछ।
इस लेख में, हम कैनवास का उपयोग करके एक गेम बनाएंगे; स्प्राइट्स, ट्रैकिंग टकराव और निश्चित रूप से विस्फोट के साथ असली खेल। बिना विस्फोट के क्या खेल!
और यहां वह खेल है जिसे हम बनाने जा रहे हैं - खेलने के लिए ।

तैयार हो रही है

खेल जटिल लग सकता है, लेकिन वास्तव में यह सभी कई घटकों का उपयोग करने के लिए नीचे आता है। मैं हमेशा इस बात से अचंभित था कि आप कैनवस, मल्टीपल स्प्राइट्स, टकराव ट्रैकिंग और गेम लूप के साथ कितनी दूर जा सकते हैं।
खेल के घटकों पर पूरी तरह से ध्यान केंद्रित करने के लिए, मैं कोड और एपीआई की हर पंक्ति को नहीं चबाऊंगा। यह लेख एक उन्नत स्तर पर लिखा गया है, लेकिन मुझे आशा है कि यह सभी स्तरों के लोगों के लिए समझ में आएगा। यह आलेख मानता है कि आप पहले से ही जावास्क्रिप्ट और HTML की मूल बातों से परिचित हैं। हम कैनवास एपीआई और गेम लूप जैसे बुनियादी गेम सिद्धांतों को भी स्पर्श करेंगे।

कैनवस बनाएँ

आइए कोड सीखना शुरू करें। अधिकांश खेल app.js. में है
पहली चीज जो हम करते हैं वह एक टैग बना रहा है और इसकी चौड़ाई और ऊंचाई निर्धारित करता है। जेएस में सब कुछ रखने के लिए हम इसे गतिशील रूप से करते हैं, लेकिन आप HTML दस्तावेज़ में एक कैनवास बना सकते हैं और getElementById का उपयोग करके प्राप्त कर सकते हैं। दोनों में कोई अंतर नहीं है, यह सिर्फ वरीयता का मामला है।

// Create the canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 512; canvas.height = 480; document.body.appendChild(canvas); 

कैनवस में एक गेटकोटेक्स्ट विधि है, जिसका उपयोग प्रदर्शन संदर्भ प्राप्त करने के लिए किया जाता है। एक संदर्भ एक वस्तु है, जिसके तरीकों को कॉल करके आप कैनवास एपीआई के साथ बातचीत करते हैं। यदि आप 3D दृश्यों के लिए WebGL का उपयोग करना चाहते हैं, तो आप 'वेबलॉग' पैरामीटर भी पास कर सकते हैं।
आगे हम सभी तत्वों को प्रदर्शित करने के लिए ctx वैरिएबल का उपयोग करेंगे।

खेल चक्र

हमें एक गेम चक्र की आवश्यकता है जो लगातार गेम को अपडेट और प्रदर्शित करता है। यहाँ यह कैसा दिखता है :

 // The main game loop var lastTime; function main() { var now = Date.now(); var dt = (now - lastTime) / 1000.0; update(dt); render(); lastTime = now; requestAnimFrame(main); }; 

हम दृश्यों को अपडेट करते हैं और प्रदर्शित करते हैं, और फिर अगले लूप को कतार में रखने के लिए requestAnimationFrame का उपयोग करते हैं। 60 फ्रेम / सेकंड प्रदर्शित करने की कोशिश करते हुए, सेटटाइमआउट (मुख्य, 1000/60) का उपयोग करना वास्तव में आसान होगा। App.js के शीर्ष पर हमने requestAnimationFrame के लिए एक आवरण बनाया है, क्योंकि सभी ब्राउज़र इस पद्धति का समर्थन नहीं करते हैं।
सेटटाइमआउट (मुख्य, 1000/60) का उपयोग कभी नहीं किया जाता है, क्योंकि यह कम सटीक होता है और जब यह आवश्यक नहीं होता है, तो प्रदर्शन पर बहुत अधिक चक्र खर्च करता है।
अद्यतन फ़ंक्शन में dt का पैरामीटर वर्तमान समय और अंतिम अद्यतन के समय के बीच का अंतर है। फ़्रेम के लिए निरंतर मान का उपयोग करके दृश्य को कभी भी ताज़ा न करें (आत्मा में, x + = 5)। आपका गेम अलग-अलग कंप्यूटरों / प्लेटफार्मों पर अलग तरह से काम करेगा, इसलिए आपको फ्रेम दर की परवाह किए बिना दृश्य को अपडेट करना होगा।
यह अंतिम अद्यतन के बाद के समय की गणना करके और प्रति सेकंड पिक्सेल में सभी आंदोलनों को व्यक्त करने के द्वारा प्राप्त किया जाता है। और आंदोलन निम्नलिखित x + = 50 * dt, या प्रति सेकंड 50 पिक्सेल बन जाता है।

संसाधन लोडिंग और गेम लॉन्च

कोड का अगला भाग खेल को आरंभ करता है और सभी आवश्यक संसाधनों को लोड करता है। ऐसा करने के लिए, अलग-अलग लिखित सहायक वर्गों में से एक का उपयोग करें, resource.js । यह एक बहुत ही सरल पुस्तकालय है जो सभी छवियों को डाउनलोड करता है और एक घटना को उठाता है जब वे सभी लोड करते हैं।
खेल में चित्र, दृश्य डेटा और अधिक जैसे अधिक संसाधन शामिल हैं। 2 डी गेम के लिए, मुख्य संसाधन छवियां हैं। तुरंत उपयोग करने में सक्षम होने के लिए, आपको आवेदन शुरू करने से पहले सभी संसाधनों को डाउनलोड करना होगा।
जावास्क्रिप्ट आपको छवियों को लोड करने और जब आपको उनकी आवश्यकता होती है तो उनका उपयोग करना आसान बनाता है:

 var img = new Image(); img.onload = function() { startGame(); }; img.src = url; 

यह बहुत थकाऊ हो जाता है, जब तक कि आपके पास बहुत सारी छवियां न हों। आपको वैश्विक चर का एक गुच्छा बनाने की जरूरत है और प्रत्येक जांच के लिए कि क्या यह लोड किया गया है। मैंने यह सब अपने आप करने के लिए एक बुनियादी संसाधन लोडर लिखा:

 (function() { var resourceCache = {}; var loading = []; var readyCallbacks = []; // Load an image url or an array of image urls function load(urlOrArr) { if(urlOrArr instanceof Array) { urlOrArr.forEach(function(url) { _load(url); }); } else { _load(urlOrArr); } } function _load(url) { if(resourceCache[url]) { return resourceCache[url]; } else { var img = new Image(); img.onload = function() { resourceCache[url] = img; if(isReady()) { readyCallbacks.forEach(function(func) { func(); }); } }; resourceCache[url] = false; img.src = url; } } function get(url) { return resourceCache[url]; } function isReady() { var ready = true; for(var k in resourceCache) { if(resourceCache.hasOwnProperty(k) && !resourceCache[k]) { ready = false; } } return ready; } function onReady(func) { readyCallbacks.push(func); } window.resources = { load: load, get: get, onReady: onReady, isReady: isReady }; })(); 

यह कैसे काम करता है: आप सभी छवियों को लोड करने के लिए resource.load को कॉल करते हैं, और फिर सभी डेटा के लोड इवेंट पर कॉलबैक बनाने के लिए resource.onReady को कॉल करते हैं। resource.load का उपयोग खेल में बाद में नहीं किया जाता है, केवल लॉन्च के समय
अपलोड की गई छवियाँ संसाधनों में कैश की जाती हैं, और जब सभी चित्र अपलोड किए जाते हैं, तो सभी कॉलबैक कहलाएंगे। अब हम यह कर सकते हैं:

 resources.load([ 'img/sprites.png', 'img/terrain.png' ]); resources.onReady(init); 

संसाधन.गेट ('img / sprites.png) का उपयोग इमेज प्राप्त करने के लिए किया जाता है। आराम से!
आप मैन्युअल रूप से सभी छवियों को डाउनलोड कर सकते हैं और खेल को चला सकते हैं, या, प्रक्रिया को सरल बनाने के लिए, संसाधनों की भावना में कुछ का उपयोग करें। जेएस।
उपरोक्त कोड में, जब सभी चित्र लोड किए जाते हैं, तो init को कहा जाता है। Init एक बैकग्राउंड इमेज बनाएगा, "फिर से प्ले करें" बटन पर ईवेंट्स हैंग करें, गेम रीसेट करें और गेम शुरू करें।

 function init() { terrainPattern = ctx.createPattern(resources.get('img/terrain.png'), 'repeat'); document.getElementById('play-again').addEventListener('click', function() { reset(); }); reset(); lastTime = Date.now(); main(); } 

खेल राज्य

अब हम शुरू करते हैं! चलो कुछ गेम लॉजिक के साथ शुरुआत करते हैं। हर खेल के मूल में एक "खेल राज्य" है। ये डेटा हैं जो खेल की वर्तमान स्थिति का प्रतिनिधित्व करते हैं: नक्शे पर वस्तुओं की एक सूची, निर्देशांक और अन्य डेटा; वर्तमान अंक, और अधिक।
नीचे हमारे खेल की स्थिति है:

 // Game state var player = { pos: [0, 0], sprite: new Sprite('img/sprites.png', [0, 0], [39, 39], 16, [0, 1]) }; var bullets = []; var enemies = []; var explosions = []; var lastFire = Date.now(); var gameTime = 0; var isGameOver; var terrainPattern; // The score var score = 0; var scoreEl = document.getElementById('score'); 

यह बहुत सी चीजों की तरह लगता है, लेकिन वास्तव में, सब कुछ इतना जटिल नहीं है। अधिकांश चर ट्रैक किए गए मान हैं: जब खिलाड़ी ने आखिरी शॉट (अंतिम बार), कब तक खेल (गेमटाइम) चल रहा है, चाहे खेल समाप्त हो (isGameOver), इलाके की छवि (terrainPattern) और अंक। नक्शे पर वस्तुओं का भी वर्णन किया गया है: गोलियां, दुश्मन, विस्फोट।
खिलाड़ी का सार भी है, जिसमें खिलाड़ी की स्थिति और स्प्राइट की स्थिति को ट्रैक किया जाता है। इससे पहले कि हम कोड में आते हैं, आइए संस्थाओं और स्प्रिट के बारे में बात करते हैं।

संस्थाओं और स्प्राइट्स

तथ्य

एक इकाई एक नक्शे पर एक वस्तु है। इससे कोई फर्क नहीं पड़ता कि जहाज, बुलेट या विस्फोट सभी संस्थाएं हैं या नहीं।
सिस्टम में एंटिटीज एक जावास्क्रिप्ट ऑब्जेक्ट है जो ऑब्जेक्ट की स्थिति के बारे में जानकारी को स्टोर करता है और बहुत कुछ। यह एक काफी सरल प्रणाली है जिसमें हम प्रत्येक प्रकार की इकाई को मैन्युअल रूप से मॉनिटर करते हैं। हमारी प्रत्येक संस्था के पास पॉज़ और स्प्राइट, और संभवतः अन्य की संपत्ति है। उदाहरण के लिए, यदि हम किसी शत्रु को मानचित्र में जोड़ना चाहते हैं, तो हम करते हैं:

 enemies.push({ pos: [100, 50], sprite: new Sprite(/* sprite parameters */) }); 

यह कोड एक विशिष्ट स्प्राइट के साथ स्थिति x = 100, y = 50 पर दुश्मन को मानचित्र में जोड़ता है।

स्प्रिट और एनिमेशन

स्प्राइट एक छवि है जो एक इकाई का प्रतिनिधित्व प्रदर्शित करता है। एनीमेशन के बिना, स्प्राइट ctx.drawImage का उपयोग करके एक नियमित छवि का प्रतिनिधित्व करते हैं।
हम कई छवियों को लोड करके और उन्हें समय के साथ बदलकर एनीमेशन को लागू कर सकते हैं। इसे फ्रेम एनीमेशन कहा जाता है।

यदि हम इन छवियों को पहले से अंतिम तक बदलते हैं, तो यह इस तरह दिखेगा:

छवियों के संपादन और लोडिंग को सरल बनाने के लिए, आमतौर पर सब कुछ एक पर इकट्ठा किया जाता है, इसे स्प्राइट कार्ड कहा जाता है। आप पहले से ही इस सीएसएस तकनीक से परिचित हो सकते हैं।
यह हमारे खेल के लिए एक पारदर्शी नक्शा है (पारदर्शी पृष्ठभूमि के साथ):

हम हार्ड वैक्यूम इमेज सेट का उपयोग करते हैं। यह सेट bmp फ़ाइलों का एक सेट है, इसलिए मैंने अपनी ज़रूरत की छवियों की प्रतिलिपि बनाई और एक स्प्राइट शीट से चिपकाया। इसके लिए आपको एक साधारण ग्राफिक एडिटर की जरूरत है।
मैन्युअल रूप से सभी एनिमेशन का प्रबंधन करना मुश्किल होगा। ऐसा करने के लिए, दूसरे हेल्पर क्लास - स्प्राइट.जेएस का उपयोग करें। यह एक छोटी फाइल है जिसमें एनीमेशन लॉजिक है। आइए देखें:

 function Sprite(url, pos, size, speed, frames, dir, once) { this.pos = pos; this.size = size; this.speed = typeof speed === 'number' ? speed : 0; this.frames = frames; this._index = 0; this.url = url; this.dir = dir || 'horizontal'; this.once = once; }; 

यह स्प्राइट वर्ग का निर्माता है। यह बहुत सारे तर्क देता है, लेकिन उनमें से सभी अनिवार्य नहीं हैं। उनमें से प्रत्येक पर विचार करें:

• url : छवि पथ
• स्थिति : x और y स्प्राइट मानचित्र पर छवि का निर्देशांक
• आकार : आकार (केवल एक फ्रेम)
• गति : फ्रेम / एस में एनीमेशन गति
• फ़्रेम : एनीमेशन क्रम में फ़्रेम सूचक की एक सरणी
• dir : स्प्राइट मैप पर किस दिशा में बढ़ना है: 'क्षैतिज (डिफ़ॉल्ट रूप से) या' वर्टिकल '
• एक बार : सच, यदि आप केवल एक एनीमेशन लूप प्रदर्शित करना चाहते हैं, तो गलत - डिफ़ॉल्ट रूप से

फ़्रेम तर्क को शायद आगे स्पष्टीकरण की आवश्यकता है। यह समझा जाता है कि एनीमेशन के सभी फ्रेम एक ही आकार के हैं (यह ऊपर दिया गया आकार है)। एनीमेशन के दौरान, सिस्टम केवल स्प्राइट मैप के साथ क्षैतिज या लंबवत (dir मान के आधार पर) स्थिति के साथ x या y अक्ष के आकार के साथ वेतन वृद्धि के साथ शुरू होता है। आपको यह बताने के लिए फ़्रेम को परिभाषित करने की आवश्यकता है कि आपको एनीमेशन के फ़्रेम के माध्यम से कैसे जाने की आवश्यकता है। [0, 1, 2, 3, 2, 1] का मान प्रारंभ से अंत तक और पीछे से शुरू होगा।
केवल url, pos, size की आवश्यकता है, क्योंकि आपको एनीमेशन की आवश्यकता नहीं हो सकती है।
प्रत्येक स्प्राइट ऑब्जेक्ट में एनीमेशन को अपडेट करने के लिए एक अपडेट विधि है, और इसका तर्क एक डेल्टा समय है, साथ ही साथ हमारे वैश्विक अपडेट में भी है। प्रत्येक स्प्राइट को प्रत्येक फ्रेम के लिए अपडेट किया जाना चाहिए।

 Sprite.prototype.update = function(dt) { this._index += this.speed*dt; } 

प्रत्येक स्प्राइट ऑब्जेक्ट में खुद को प्रस्तुत करने के लिए एक रेंडर विधि भी है। इसमें एनीमेशन का मूल तर्क है। यह मॉनिटर करता है कि किस फ्रेम को खींचा जाना चाहिए, स्प्राइट मैप पर इसके निर्देशांक की गणना करता है, और फ्रेम को खींचने के लिए ctx.drawImage को कॉल करता है।

 Sprite.prototype.render = function(ctx) { var frame; if(this.speed > 0) { var max = this.frames.length; var idx = Math.floor(this._index); frame = this.frames[idx % max]; if(this.once && idx >= max) { this.done = true; return; } } else { frame = 0; } var x = this.pos[0]; var y = this.pos[1]; if(this.dir == 'vertical') { y += frame * this.size[1]; } else { x += frame * this.size[0]; } ctx.drawImage(resources.get(this.url), x, y, this.size[0], this.size[1], 0, 0, this.size[0], this.size[1]); } 

हम ड्राइमेज के 3 रूपों का उपयोग करते हैं, जो हमें स्प्राइट, ऑफसेट और दिशा के आकार को अलग से निर्दिष्ट करने की अनुमति देता है।

दृश्य अद्यतन

याद रखें कि कैसे हमारे गेम लूप में हमने हर फ्रेम को अपडेट (डीटी) कहा है? हमें अब इस फ़ंक्शन को परिभाषित करना चाहिए, जो सभी स्प्राइट्स को अपडेट करने, इकाई पदों और टकरावों को अपडेट करने का काम करना चाहिए।

 unction update(dt) { gameTime += dt; handleInput(dt); updateEntities(dt); // It gets harder over time by adding enemies using this // equation: 1-.993^gameTime if(Math.random() < 1 - Math.pow(.993, gameTime)) { enemies.push({ pos: [canvas.width, Math.random() * (canvas.height - 39)], sprite: new Sprite('img/sprites.png', [0, 78], [80, 39], 6, [0, 1, 2, 3, 2, 1]) }); } checkCollisions(); scoreEl.innerHTML = score; }; 

हम नक्शे में दुश्मनों को कैसे जोड़ते हैं, इस पर ध्यान दें। हम एक दुश्मन को जोड़ते हैं यदि यादृच्छिक मान सेट सीमा से कम है, और हम इसे दाईं ओर जोड़ते हैं, दृष्टि से बाहर। निर्देशांक मानचित्र की ऊंचाई और दुश्मन की ऊंचाई के अंतर से एक यादृच्छिक संख्या को गुणा करके स्थापित किया जाता है। दुश्मन की छवि की ऊंचाई "हार्डकोड" है, इसलिए हम इसकी ऊंचाई जानते हैं, और इस कोड का उपयोग एक उदाहरण के रूप में किया जाता है।
थ्रेसहोल्ड हर बार फ़ंक्शन 1 - Math.pow(.993, gameTime) द्वारा उठाया जाता है।

कीस्ट्रोक्स

कीस्ट्रोक को संभालने के लिए, मैंने एक और छोटा पुस्तकालय बनाया: input.js । यह एक बहुत छोटी लाइब्रेरी है जो बस कीप और कीडाउन ईवेंट हैंडलर को जोड़कर प्रेस की गई स्थिति को बचाता है।
यह लाइब्रेरी एक एकल फ़ंक्शन प्रदान करती है - input.isDown। जो एक तर्क के रूप में एक तर्क को लेता है, जैसे कि 'ए', और अगर वह कुंजी दबाया गया था, तो सच होता है। आप निम्न मान भी पास कर सकते हैं:

• अंतरिक्ष
• वाम
• सही
• उत्तर प्रदेश
• नीचे

अब हम कीस्ट्रोक्स को संभाल सकते हैं:

 function handleInput(dt) { if(input.isDown('DOWN') || input.isDown('s')) { player.pos[1] += playerSpeed * dt; } if(input.isDown('UP') || input.isDown('w')) { player.pos[1] -= playerSpeed * dt; } if(input.isDown('LEFT') || input.isDown('a')) { player.pos[0] -= playerSpeed * dt; } if(input.isDown('RIGHT') || input.isDown('d')) { player.pos[0] += playerSpeed * dt; } if(input.isDown('SPACE') && !isGameOver && Date.now() - lastFire > 100) { var x = player.pos[0] + player.sprite.size[0] / 2; var y = player.pos[1] + player.sprite.size[1] / 2; bullets.push({ pos: [x, y], dir: 'forward', sprite: new Sprite('img/sprites.png', [0, 39], [18, 8]) }); bullets.push({ pos: [x, y], dir: 'up', sprite: new Sprite('img/sprites.png', [0, 50], [9, 5]) }); bullets.push({ pos: [x, y], dir: 'down', sprite: new Sprite('img/sprites.png', [0, 60], [9, 5]) }); lastFire = Date.now(); } } 

यदि खिलाड़ी s या डाउन एरो दबाता है, तो हम खिलाड़ी को ऑर्डिनेट करते हैं। कैनवास समन्वय प्रणाली में ऊपरी बाएं कोने में निर्देशांक (0,0) है और इसलिए खिलाड़ी की स्थिति बढ़ने से स्क्रीन पर खिलाड़ी की स्थिति कम हो जाएगी। हमने बाकी सभी चाबियों के लिए भी यही किया।
ध्यान दें कि हमने app.js. की शुरुआत में खिलाड़ियों को परिभाषित किया। हमारे द्वारा निर्धारित गति इस प्रकार हैं:

 // Speed in pixels per second var playerSpeed = 200; var bulletSpeed = 500; var enemySpeed = 100; 

डीटीएच पैरामीटर के साथ प्लेयरस्पीड को गुणा करना, हम फ्रेम के चारों ओर घूमने के लिए पिक्सल के योग की गणना करते हैं। यदि अंतिम अपडेट के बाद एक सेकंड बीत चुका है, तो खिलाड़ी 200 पिक्सेल से आगे बढ़ेगा, अगर 0.5 से 100 तक। यह फ्रेम दर के आधार पर आंदोलन की निरंतर गति के रूप में दिखाया गया है।
आखिरी चीज जो हम करते हैं वह एक बुलेट शॉट है, शर्तों के तहत: एक स्थान दबाया गया था और यह आखिरी शॉट से 100 मिलीसेकंड से अधिक हुआ। lastFire एक वैश्विक चर है और खेल की स्थिति का हिस्सा है। यह हमें शॉट्स की आवृत्ति को नियंत्रित करने में मदद करता है, अन्यथा खिलाड़ी हर फ्रेम को शूट कर सकता था। और यह बहुत आसान है, है ना?!

 var x = player.pos[0] + player.sprite.size[0] / 2; var y = player.pos[1] + player.sprite.size[1] / 2; bullets.push({ pos: [x, y], dir: 'forward', sprite: new Sprite('img/sprites.png', [0, 39], [18, 8]) }); bullets.push({ pos: [x, y], dir: 'up', sprite: new Sprite('img/sprites.png', [0, 50], [9, 5]) }); bullets.push({ pos: [x, y], dir: 'down', sprite: new Sprite('img/sprites.png', [0, 60], [9, 5]) }); lastFire = Date.now(); 

हम x और y निर्देशांक में नई गोलियों की स्थिति की गणना करते हैं। हम उन्हें खिलाड़ी की स्थिति, उनकी ऊँचाई और चौड़ाई के आधे हिस्से से जोड़ देंगे, ताकि वह जहाज के केंद्र से गोली मार दे।

हम 3 गोलियां जोड़ते हैं क्योंकि वे अलग-अलग दिशाओं में शूट करते हैं। यह खेल को आसान बनाता है क्योंकि खिलाड़ी फंस नहीं सकता है। बुलेट संस्थाओं के बीच अंतर करने के लिए, हमने 'dir' संपत्ति को मूल्यों के साथ जोड़ा: 'फॉरवर्ड', 'अप', 'डाउन'।

तथ्य

सभी संस्थाओं को अद्यतन करने की आवश्यकता है। हमारे पास खिलाड़ी और 3 सरणियों का सार गोलियों, दुश्मनों और विस्फोटों का सार है।

 function updateEntities(dt) { // Update the player sprite animation player.sprite.update(dt); // Update all the bullets for(var i=0; i<bullets.length; i++) { var bullet = bullets[i]; switch(bullet.dir) { case 'up': bullet.pos[1] -= bulletSpeed * dt; break; case 'down': bullet.pos[1] += bulletSpeed * dt; break; default: bullet.pos[0] += bulletSpeed * dt; } // Remove the bullet if it goes offscreen if(bullet.pos[1] < 0 || bullet.pos[1] > canvas.height || bullet.pos[0] > canvas.width) { bullets.splice(i, 1); i--; } } // Update all the enemies for(var i=0; i<enemies.length; i++) { enemies[i].pos[0] -= enemySpeed * dt; enemies[i].sprite.update(dt); // Remove if offscreen if(enemies[i].pos[0] + enemies[i].sprite.size[0] < 0) { enemies.splice(i, 1); i--; } } // Update all the explosions for(var i=0; i<explosions.length; i++) { explosions[i].sprite.update(dt); // Remove if animation is done if(explosions[i].sprite.done) { explosions.splice(i, 1); i--; } } } 

चलो शुरू करते हैं: खिलाड़ी के स्प्राइट को केवल स्प्राइट अपडेट फ़ंक्शन को कॉल करके अपडेट किया जाता है। यह एनीमेशन को आगे बढ़ाता है।
गोलियों, दुश्मनों और विस्फोटों के लिए निम्नलिखित 3 चक्र। प्रक्रिया सभी के लिए समान है: स्प्राइट को अपडेट करें, आंदोलन को अपडेट करें, और हटाएं यदि इकाई दृश्य की सीमाओं से परे चली गई है। चूंकि सभी इकाइयां अपने आंदोलन की दिशा कभी नहीं बदल सकती हैं, हमें दृश्यता के क्षेत्र को छोड़ने के बाद अपनी संस्थाओं को बचाने की आवश्यकता नहीं है।
बुलेट आंदोलन सबसे कठिन है:

 switch(bullet.dir) { case 'up': bullet.pos[1] -= bulletSpeed * dt; break; case 'down': bullet.pos[1] += bulletSpeed * dt; break; default: bullet.pos[0] += bulletSpeed * dt; } 

यदि बुलेट .ir = 'ऊपर', हम बुलेट को y- अक्ष से नीचे ले जाते हैं। इसके विपरीत, यदि dir = 'down', डिफ़ॉल्ट मान के लिए, हम abscissa के साथ आगे बढ़ते हैं।

 // Remove the bullet if it goes offscreen if(bullet.pos[1] < 0 || bullet.pos[1] > canvas.height || bullet.pos[0] > canvas.width) { bullets.splice(i, 1); i--; } 

फिर हम जांचते हैं कि क्या हम बुलेट इकाई को हटा सकते हैं। पदों को शीर्ष, नीचे और दाएं किनारों के खिलाफ जांचा जाता है, क्योंकि गोलियां केवल इन दिशाओं में चलती हैं।
गोलियों को हटाने के लिए, हम इस ऑब्जेक्ट को सरणी से हटाते हैं और i को कम करते हैं, अन्यथा अगली बुलेट को छोड़ दिया जाएगा।

टकराव की ट्रैकिंग

अब क्या हर किसी के लिए डर है: टकराव ट्रैकिंग! वास्तव में, यह उतना मुश्किल नहीं है जितना लगता है, कम से कम हमारे खेल के लिए।
3 प्रकार के टकराव हैं जिन्हें हमें ट्रैक करने की आवश्यकता है:

1. दुश्मन और गोलियां
2. शत्रु और खिलाड़ी
3. प्लेयर और स्क्रीन एज

2D टकराव का पता लगाना सरल है:

 function collides(x, y, r, b, x2, y2, r2, b2) { return !(r <= x2 || x > r2 || b <= y2 || y > b2); } function boxCollides(pos, size, pos2, size2) { return collides(pos[0], pos[1], pos[0] + size[0], pos[1] + size[1], pos2[0], pos2[1], pos2[0] + size2[0], pos2[1] + size2[1]); } 

इन 2 कार्यों को एक में जोड़ा जा सकता है, लेकिन यह मुझे पढ़ने में इतना आसान लगता है। टकराव दोनों वस्तुओं के ऊपरी / बाएँ और निचले / दाएं कोनों के निर्देशांक लेता है और यदि कोई चौराहा है तो जाँच करता है।
बॉक्सकॉलिड्स फ़ंक्शन टकराव के लिए एक आवरण है जो प्रत्येक तत्व की स्थिति और आकार के साथ सरणियों को स्वीकार करता है। एक फ़ंक्शन में, आयाम का उपयोग करके पूर्ण स्थिति निर्देशांक की गणना करता है।
और यहाँ कोड है जो वास्तव में टकराव का पता लगाता है:

 function checkCollisions() { checkPlayerBounds(); // Run collision detection for all enemies and bullets for(var i=0; i<enemies.length; i++) { var pos = enemies[i].pos; var size = enemies[i].sprite.size; for(var j=0; j<bullets.length; j++) { var pos2 = bullets[j].pos; var size2 = bullets[j].sprite.size; if(boxCollides(pos, size, pos2, size2)) { // Remove the enemy enemies.splice(i, 1); i--; // Add score score += 100; // Add an explosion explosions.push({ pos: pos, sprite: new Sprite('img/sprites.png', [0, 117], [39, 39], 16, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], null, true) }); // Remove the bullet and stop this iteration bullets.splice(j, 1); break; } } if(boxCollides(pos, size, player.pos, player.sprite.size)) { gameOver(); } } } 

टकराव का पता लगाना घातीय है, क्योंकि हमें दृश्य पर प्रत्येक इकाई के बीच टकराव की जांच करने की आवश्यकता है। हमारे खेल के लिए, हमें हर दुश्मन का हर गोली के खिलाफ परीक्षण करना चाहिए। हम दुश्मनों की एक सरणी के माध्यम से चक्र करते हैं और प्रत्येक बुलेट के लिए चक्र में टकराव की जांच करते हैं।
BoxCollides को कहा जाता है, कार्य करने के लिए दुश्मन और बुलेट की स्थिति और आकार को पास करें, और यदि फ़ंक्शन सही है, तो निम्न क्रम हैं:

• शत्रु निष्कासन
• अंक जोड़ना
• धमाका सार जोड़ें
• गोली निकालना
• आंतरिक बुलेट चक्र को रोकना, क्योंकि दुश्मन अब मौजूद नहीं है

ध्यान दें कि हम एक विस्फोट कैसे बनाते हैं। हम गुण पॉस और स्प्राइट के साथ एक ऑब्जेक्ट बनाते हैं, और स्प्राइट मैप पर एनीमेशन के लिए 13 फ़्रेम निर्दिष्ट करते हैं। यह भी इंगित करता है कि एक बार पैरामीटर सही है ताकि एनीमेशन केवल एक बार ही चले।
इन 3 लाइनों को देखें:

 if(boxCollides(pos, size, player.pos, player.sprite.size)) { gameOver(); } 

यहां हम खिलाड़ी और दुश्मन की टक्करों की जांच करते हैं और अगर टक्कर होती है तो खेल खत्म हो जाता है।
अंत में, चलिए checkPlayerBounds के बारे में बात करते हैं:

 function checkPlayerBounds() { // Check bounds if(player.pos[0] < 0) { player.pos[0] = 0; } else if(player.pos[0] > canvas.width - player.sprite.size[0]) { player.pos[0] = canvas.width - player.sprite.size[0]; } if(player.pos[1] < 0) { player.pos[1] = 0; } else if(player.pos[1] > canvas.height - player.sprite.size[1]) { player.pos[1] = canvas.height - player.sprite.size[1]; } } 

यह केवल 0 से और कैनवास के साथ अपने निर्देशांक रखते हुए, खिलाड़ी को नक्शे से परे जाने से रोकता है।

प्रस्तुत करना

हम लगभग हो चुके हैं! अभी के लिए, हमें बस रेंडर फ़ंक्शन को परिभाषित करने की आवश्यकता है, जिसे प्रत्येक फ्रेम के दृश्य को प्रदर्शित करने के लिए हमारे गेम लूप द्वारा बुलाया जाएगा। यहाँ यह कैसा दिखता है:

 // Draw everything function render() { ctx.fillStyle = terrainPattern; ctx.fillRect(0, 0, canvas.width, canvas.height); // Render the player if the game isn't over if(!isGameOver) { renderEntity(player); } renderEntities(bullets); renderEntities(enemies); renderEntities(explosions); }; function renderEntities(list) { for(var i=0; i<list.length; i++) { renderEntity(list[i]); } } function renderEntity(entity) { ctx.save(); ctx.translate(entity.pos[0], entity.pos[1]); entity.sprite.render(ctx); ctx.restore(); } 

पहली चीज जो हम करते हैं वह है पृष्ठभूमि। हमने ctx.createPattern का उपयोग करके init फ़ंक्शन में एक भू-भाग पृष्ठभूमि बनाई है, और हम fillStyle को सेट करके और fillRect फ़ंक्शन को कॉल करके पृष्ठभूमि को रेंडर करते हैं।
फिर हम खिलाड़ी, सभी गोलियों, सभी दुश्मनों और विस्फोटों को आकर्षित करते हैं। संस्थाओं के सरणियों के माध्यम से लूप रेंडर करें और उन्हें ड्रा करें। रेंडरएन्टिटी स्क्रीन पर किसी ऑब्जेक्ट को रखने के लिए एक कैनवस ट्रांसफॉर्मेशन का उपयोग करती है। ctx.save वर्तमान परिवर्तन को सहेजता है, और ctx.restore इसे पुनर्स्थापित करता है।
यदि आप स्प्राइट रेंडर फ़ंक्शन को देखते हैं, तो आप देखेंगे कि स्प्राइट स्थिति (0,0) पर है, लेकिन ctx.translate पर कॉल ऑब्जेक्ट को सही जगह पर ले जाता है।

खेल खत्म

आखिरी चीज जो हमें करने की जरूरत है वह है खेल का अंत। हमें फ़ंक्शन गेमऑवर को परिभाषित करने की आवश्यकता है, जो गेम को समाप्त करने के लिए स्क्रीन दिखाएगा, और एक और रीसेट, जो फिर से गेम शुरू करेगा।

 // Game over function gameOver() { document.getElementById('game-over').style.display = 'block'; document.getElementById('game-over-overlay').style.display = 'block'; isGameOver = true; } // Reset game to original state function reset() { document.getElementById('game-over').style.display = 'none'; document.getElementById('game-over-overlay').style.display = 'none'; isGameOver = false; gameTime = 0; score = 0; enemies = []; bullets = []; player.pos = [50, canvas.height / 2]; }; 

gameOver इंडेक्स में परिभाषित एक स्क्रीन प्रदर्शित करता है, जिसमें कहा गया है कि "Gane Over" और "पुनरारंभ" बटन हो।
रीसेट प्रारंभिक के लिए सभी खेल राज्य मान सेट करता है, गेम एंड स्क्रीन को छुपाता है, और गेम को पुनरारंभ करता है।

अंतिम विचार

इस लेख में सीखने के लिए बहुत कुछ है, लेकिन मुझे उम्मीद है कि मैंने यह दिखाने के लिए इसे बहुत सरल टुकड़ों में तोड़ दिया है कि गेम बनाना इतना मुश्किल नहीं है।
मैंने इन दिनों 2 डी गेम बनाना कितना आसान है, इसके लिए निम्न स्तर के कैनवस एपीआई का उपयोग करने पर ध्यान केंद्रित किया। बेशक, कई गेम इंजन हैं जिनका उपयोग आप वास्तव में कुछ जटिल बनाने के लिए कर सकते हैं। कई गेम इंजन संस्थाओं के लिए इंटरफ़ेस को मानकीकृत करते हैं, और आपको बस प्रत्येक प्रकार के लिए रेंडर और अपडेट कार्यों को परिभाषित करना होगा और दृश्य प्रबंधक स्वचालित रूप से सभी फ़्रेमों की सभी संस्थाओं के लिए उन्हें कॉल करेगा।