कुछ पुरानी यादों को पुनर्जीवित करें: HTML5 के कैनवस एपीआई और जावास्क्रिप्ट का उपयोग करके स्नेक गेम को फिर से बनाना

यदि आपने कभी प्रसिद्ध साँप का खेल नहीं खेला है, तो अपना हाथ उठाएँ!

मैं ऐसा कहता हूं, लेकिन मुझे लगता है कि आजकल, नई पीढ़ी ने इस गेम के बारे में कभी नहीं सुना होगा, जो आज के कंप्यूटर और वेब द्वारा प्रदान की जाने वाली संभावनाओं को देखते हुए थोड़ा पुराने जमाने का लग सकता है।

और फिर भी, एक समय था जब स्नेक गेम एक ऐसा गेम था जिसे खेलने में सभी सेल फोन मालिक अत्यधिक समय बिताते थे। हाँ, उस समय, हम स्मार्टफ़ोन के बारे में बात नहीं कर रहे थे, केवल टेलीफ़ोन के बारे में।

यह एक अच्छा समय था, जैसा कि कहा जाता है, और नोकिया ने अपने मोबाइल उपकरणों के माध्यम से गेम को लोकप्रिय बनाया, जो एक बेंचमार्क भी था। आज, मोबाइल की दुनिया और स्नेक गेम पर नोकिया का दबदबा ज्यादा नहीं बचा है।

उन लोगों के लिए जो इस गेम के प्रति उदासीन हैं - और मैं उनमें से एक हूं, मुझे स्वीकार करना होगा - यह ट्यूटोरियल आपको सिखाएगा कि इसे वेब के लिए फिर से कैसे बनाया जाए। ऐसा करने के लिए, मैं HTML5 के कैनवास एपीआई और जावास्क्रिप्ट का उपयोग करूंगा।

यह जावास्क्रिप्ट में कक्षाओं का उपयोग करना सीखने और वेब गेम के लिए एक प्रभावी गेम लूप बनाने का भी एक अवसर है।

हमारे स्नेक गेम के लिए वेब पेज बनाना

आरंभ करने के लिए, हम एक वेब पेज बनाने जा रहे हैं जो हमें स्नेक गेम खेलने में सक्षम करेगा जिसे हम इस ट्यूटोरियल में विकसित करेंगे। आप जल्द ही देखेंगे कि इस वेब पेज पर किसी भी तरह की कोई कठिनाई नहीं है। दो प्रभाग, एक पृष्ठ शीर्षक के लिए और दूसरा उस क्षेत्र को प्रदर्शित करने के लिए जहां सांप घूमेगा।

इसमें, मैं इन divs पर एक निश्चित चौड़ाई लागू करके उन्हें केंद्र में रखने के लिए थोड़ा सीएसएस जोड़ूंगा:

साँप वर्ग का डिज़ाइन

जैसा कि मैंने इस ट्यूटोरियल के परिचय में बताया है, मैं गेम को मॉडल करने के लिए एक समर्पित स्नेक क्लास का उपयोग करने जा रहा हूं। इससे आपको यह भी पता चलेगा कि जावास्क्रिप्ट में कक्षाओं में हेरफेर कैसे किया जाए।

हमारे साँप में निम्नलिखित गुण होंगे:

• बीडब्ल्यू और बीएच क्रमशः चौड़ाई और ऊंचाई में बोर्ड के आकार को दर्शाते हैं।
• nbx और nby बोर्ड के लिए उपलब्ध कोशिकाओं की संख्या का प्रतिनिधित्व करते हैं।
• चौड़ाई और ऊंचाई में साँप तत्व के आकार का प्रतिनिधित्व करने के लिए eltw और elth ।
• dirx और diry जो साँप के विस्थापन वेक्टर का प्रतिनिधित्व करते हैं।
• मार्जिनएक्स और मार्जिनी साँप तत्वों की चौड़ाई और ऊंचाई में एक छोटा मार्जिन जोड़ते हैं ताकि खिलाड़ी प्रत्येक साँप तत्व के बीच सीमांकन देख सके।
• keyup , keydown , keyleft , keyright जो एक निश्चित क्षण में गतिशील तीरों की स्थिति को संग्रहीत करता है।
• स्टार्टएफटीपीएस गेम की शुरुआत में सांप को स्थानांतरित करने के लिए आवश्यक फ्रेम प्रति सेकंड की संख्या संग्रहीत करता है।

कंस्ट्रक्टर के अंत में, गेम की शुरुआत में स्नेक को इनिशियलाइज़ करने के लिए एक इनिट विधि को बुलाया जाता है। जब कोई नया गेम शुरू करना हो, तो बस इस init विधि को फिर से कॉल करें।

यह हमें हमारे स्नेक वर्ग के लिए निम्नलिखित कोड देता है:

इनिट विधि में, आप साँप के अन्य गुणों को परिभाषित कर सकते हैं, जैसे उसके सिर पर एक सूचक और उसकी पूँछ पर एक सूचक। तत्व सरणी एक निश्चित समय पर साँप के सभी तत्वों को संग्रहीत करेगी। पॉइंट प्रॉपर्टी का उपयोग वर्तमान गेम के लिए पॉइंट संग्रहीत करने के लिए किया जाता है, जबकि लेवल प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि गेम के एफपीएस को बढ़ाने के लिए कितने पॉइंट जमा हुए हैं। एफपीएस की संख्या जितनी अधिक होगी, सांप उतनी ही तेजी से आगे बढ़ेगा।

चूंकि एफपीएस संपत्ति प्रति सेकंड फ्रेम की संख्या का प्रतिनिधित्व करती है, इसलिए हमें एफपीएस की वांछित संख्या से 1 सेकंड (या 1,000 मिलीसेकंड) को विभाजित करने के परिणाम के आधार पर एफपीएसइंटरवल संपत्ति की आवश्यकता होती है।

साँप खेल का सिद्धांत

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

यह इंगित करने योग्य है कि स्नेक का वह संस्करण जिसे हम लागू करने जा रहे हैं वह वह है जहां बोर्ड के किनारों को छूने से आपको नुकसान नहीं होता है। यह बस आपको विपरीत दिशा की ओर झुका देता है। स्नेक गेम के दूसरे संस्करण को नोकिया द्वारा इस तरह लागू किया गया था।

चूँकि साँप को एक सेब खाना है, इसलिए हमें इस सेब को बेतरतीब ढंग से बोर्ड पर प्रदर्शित करना होगा, इस बात का ध्यान रखना होगा कि साँप के किसी तत्व पर सीधे सेब उत्पन्न न हो।

यह हमें हमारे स्नेक वर्ग के लिए निम्नलिखित जेनरेटफूड विधि प्रदान करता है:

साँप का ऑन-स्क्रीन प्रस्तुतिकरण

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

स्क्रीन पर स्नेक को प्रस्तुत करने के लिए, मैं HTML5 के कैनवास एपीआई का उपयोग कर रहा हूं।

मैं सांप के साथ-साथ खाए जाने वाले सेब के विभिन्न तत्वों का प्रतिनिधित्व करने वाले आयत बनाने के लिए इस एपीआई के ड्राइंग प्रिमिटिव का उपयोग करूंगा। मैं सेब और साँप पर एक अलग रंग लगाऊंगा ताकि खिलाड़ी उनके बीच अंतर कर सके।

यह हमारे स्नेक वर्ग की ड्रा विधि के लिए निम्नलिखित कोड देता है:

साँप को हिलाना

अब हमारे पास एक साँप है जिसे हम स्क्रीन पर प्रदर्शित कर सकते हैं। यह सब बहुत अच्छा है, लेकिन हमें साँप की गति के लिए समर्थन जोड़ने की आवश्यकता है। जैसा कि ऊपर बताया गया है, साँप समन्वय वेक्टर (dirx, diry) के साथ चलता है। इसलिए, हर बार जब हम चाल विधि को कॉल करते हैं जिसे मैं यहां परिभाषित करने जा रहा हूं, तो सांप उसी मात्रा में आगे बढ़ेगा।

इस चाल विधि में, हम जाँचते हैं कि साँप के सिर के निर्देशांक खाए जाने वाले सेब के निर्देशांक से मेल खाते हैं। यदि हाँ, तो साँप ने अभी-अभी सेब खाया है। खिलाड़ी एक अंक अर्जित करता है, लेकिन इससे भी महत्वपूर्ण बात यह है कि हमें चार कार्रवाई करने की आवश्यकता है:

1. साँप के तत्वों में एक तत्व जोड़ें। यह तत्व नई पूँछ बन जाता है।
2. जेनरेटफूड को कॉल करके एक नया सेब उत्पन्न करें।
3. खिलाड़ी को एक अंक जोड़ें.
4. यदि खिलाड़ी एक स्तर पार कर लेता है, तो हम सांप की गति को तेज करने के लिए प्रदर्शित होने वाले फ्रेम प्रति सेकंड की संख्या को अपडेट करते हैं।

फिर भी, चाल विधि में, हमें यह जांचना होगा कि खिलाड़ी ने सांप के किसी तत्व को सिर से छूने की गलती तो नहीं की है। यदि यह मामला है, तो खेल हार गया है, और हम नए सिरे से शुरू करते हैं! ऐसा करने के लिए, हम ऊपर प्रस्तुत स्नेक वर्ग की init विधि को कॉल करते हैं।

अब, हमें वास्तव में साँप को हिलाकर चाल विधि को पूरा करने की आवश्यकता है। ऐसा करने के लिए, हम साँप के सिर के निर्देशांक में dirx और diry जोड़ते हैं। यह हमें जोड़ने के लिए एक नया सिर देता है। आप यह भी देखेंगे कि हर बार पूंछ हटाकर और नया सिर जोड़कर सांप को हिलाना बुद्धिमानी से किया जाता है। इससे साँप के सभी तत्वों की स्थिति को अद्यतन करने से बचा जा सकता है।

नए हेड को अपडेट करना याद रखकर समाप्त करें। संयोग से, आपने यह भी देखा होगा कि जब साँप का सिर बोर्ड की सीमा को पार करता है, तो हम उसे बोर्ड के विपरीत दिशा में ले जाते हैं। यह चौड़ाई और लंबाई दोनों पर लागू होता है।

यह हमें चाल विधि के लिए निम्नलिखित कोड देता है:

हमारे स्नेक गेम का गेमलूप

हमारे साँप को स्क्रीन पर प्रदर्शित किया जा सकता है। हमारे साँप को उसकी चाल विधि को कॉल करके स्थानांतरित किया जा सकता है। हम क्या खो रहे हैं?

हम अपने गेम के गेमलूप के कार्यान्वयन को मिस कर रहे हैं!

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

ऐसा करने के लिए, हम मानक जावास्क्रिप्ट ऑब्जेक्ट विंडो की requestAnimationFrame विधि का उपयोग करेंगे। फिर ब्राउज़र उस अधिकतम एफपीएस को अनुकूलित करेगा जिसका वह उस कंप्यूटर या स्मार्टफोन पर समर्थन कर सकता है जिस पर वेब पेज का उपयोग किया जाएगा।

हमारी गेमलूप विधि के भीतर, हम ब्राउज़र द्वारा समर्थित एफपीएस की संख्या को उन एफपीएस की संख्या से सजाएंगे जिन्हें हम अपने साँप को स्थानांतरित करना चाहते हैं। हम मूव और ड्रॉ विधियों को केवल तभी कॉल करेंगे जब हम पहले से परिभाषित एफपीएस रेंज के भीतर होंगे।

चार दिशात्मक कुंजियों की स्थिति के अनुसार साँप की गति वेक्टर के निर्देशांक को अद्यतन करना महत्वपूर्ण है: ऊपर, नीचे, बाएँ और दाएँ।

अंत में, हम गेमलूप को कॉल करते हैं और ब्राउज़र को ऐसा करने के लिए सर्वोत्तम क्षण चुनने का कार्य सौंपते हैं। यह हमें GameLoop के लिए निम्नलिखित कोड देता है:

साँप के साथ उपयोगकर्ता की बातचीत को संभालना

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

खिलाड़ी इन कुंजियों के साथ जो करता है उसके अनुसार हम लिंक किए गए स्नेक क्लास गुणों के मूल्य को अपडेट करते हैं। जैसा कि आप देख सकते हैं, हम सीधे सांप की स्थिति को अपडेट करके गेम को ब्लॉक नहीं करते हैं। इसके बजाय, हम गेमलूप विधि में स्थिति को अपडेट करते हैं, जिसे नियमित अंतराल पर कहा जाता है।

विभिन्न साँप घटकों को असेंबल करना

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

कीडाउन और कीअप इवेंट के लिए इवेंट श्रोताओं को जोड़ें।

अंत में, गेम शुरू करने के लिए हमारे स्नेक गेमलूप को एक बार कॉल करना बाकी है। यह हमें कैनवस एपीआई और राक्षसी HTML5/जावास्क्रिप्ट वेब जोड़ी के साथ बनाए गए प्रसिद्ध स्नेक गेम के लिए निम्नलिखित पूर्ण कोड देता है:

एक्शन में हमारा स्नेक गेम

हमारा स्नेक पूरा हो गया है, अब वेब ब्राउज़र में इसका परीक्षण करने का समय आ गया है कि क्या स्नेक जादू फिर से काम करता है, जैसा कि तब हुआ था जब नोकिया ने मोबाइल की दुनिया पर जबरदस्त प्रभुत्व जमाया था:

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

YouTube पर यह ट्यूटोरियल देखें

इस ट्यूटोरियल को YouTube पर SSaurel चैनल पर भी देखा जा सकता है:

यहाँ भी प्रकाशित किया गया है.