HTML, CSS और JavaScript का उपयोग करके स्नेक गेम कैसे बनाएं

स्नेक गेम एक क्लासिक प्रोग्रामिंग अभ्यास है जिसका उपयोग आप अपने प्रोग्रामिंग और समस्या को सुलझाने के कौशल को बेहतर बनाने के लिए कर सकते हैं। आप HTML, CSS और JavaScript का उपयोग करके वेब ब्राउज़र में गेम बना सकते हैं।

खेल में, आप एक सांप को नियंत्रित करते हैं जो एक बोर्ड के चारों ओर घूमता है। जैसे ही आप भोजन इकट्ठा करते हैं सांप का आकार बढ़ जाता है। यदि आप अपनी पूंछ या किसी दीवार से टकराते हैं तो खेल खत्म हो जाएगा।

कैनवस के लिए UI कैसे बनाएं

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

आप इस परियोजना का उल्लेख कर सकते हैं गिटहब रिपॉजिटरी पूर्ण स्रोत कोड के लिए।

1. "index.html" नामक एक नई फ़ाइल बनाएँ।
2. फ़ाइल को किसी टेक्स्ट एडिटर जैसे विजुअल कोड या एटम. मूल HTML कोड संरचना जोड़ें:

   एचटीएमएल>
   <एचटीएमएललैंग="एन-यूएस">
   <सिर>
   <शीर्षक>साँप का खेलशीर्षक>
   सिर>
   <शरीर>
   शरीर>
   एचटीएमएल>

3. बॉडी टैग के अंदर, सांप के लिए गेम बोर्ड का प्रतिनिधित्व करने के लिए एक कैनवास जोड़ें।

   <एच 2>साँप का खेलएच 2>
   <डिवपहचान="खेल">
   <कैनवासपहचान="साँप">कैनवास>
   डिव>

4. आपकी HTML फ़ाइल के समान फ़ोल्डर में, "styles.css" नामक एक नई फ़ाइल बनाएँ।
5. अंदर, संपूर्ण वेब पेज के लिए कुछ CSS जोड़ें। आप अन्य का उपयोग करके अपनी वेबसाइट को स्टाइल भी कर सकते हैं आवश्यक सीएसएस टिप्स और ट्रिक्स.

   #खेल {
   चौड़ाई:400 पीएक्स;
   ऊंचाई:400 पीएक्स;
   अंतर:0ऑटो;
   पृष्ठभूमि का रंग:#eee;
   }
   एच 2 {
   पाठ संरेखित:केंद्र;
   फुहारा परिवार: एरियल;
   फ़ॉन्ट आकार:36 पीएक्स;
   } 
   

6. अपनी HTML फ़ाइल के अंदर, CSS के लिए हेड टैग में एक लिंक जोड़ें:

   <जोड़नासंबंधित="शैली पत्रक"प्रकार="पाठ/सीएसएस"href="शैलियाँ.सीएसएस">

7. कैनवास देखने के लिए, वेब ब्राउज़र में अपनी "index.html" फ़ाइल खोलें।

सांप को कैसे ड्रा करें

नीचे दिए गए उदाहरण में, काली रेखा साँप का प्रतिनिधित्व करती है:

एकाधिक वर्ग या "खंड" सांप बनाते हैं। जैसे-जैसे सांप बढ़ता है, चौकों की संख्या भी बढ़ती जाती है। खेल की शुरुआत में, सांप की लंबाई एक टुकड़ा होती है।

1. अपनी HTML फ़ाइल के अंदर, बॉडी टैग के नीचे एक नई JavaScript फ़ाइल से लिंक करें:

   <शरीर>
    आपका कोड यहाँ 
   <लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस">लिखी हुई कहानी>
   शरीर>

2. script.js बनाएँ और कैनवास का DOM तत्व प्राप्त करके प्रारंभ करें:

   वर कैनवास = दस्तावेज़.getElementById("साँप");

3. कैनवास HTML तत्व के लिए संदर्भ सेट करें। इस स्थिति में, आप चाहते हैं कि गेम 2d कैनवास प्रस्तुत करे। यह आपको HTML तत्व पर कई आकृतियाँ या चित्र बनाने की अनुमति देगा।

   वर कैनवास2डी = कैनवास.गेट कॉन्टेक्स्ट ("2d");

4. अन्य इन-गेम चर सेट करें जैसे कि क्या खेल समाप्त हो गया है, और कैनवास की ऊंचाई और चौड़ाई:

   वर गेमएंडेड = असत्य;
   कैनवास.चौड़ाई = 400;
   कैनवास.ऊँचाई = 400;

5. "स्नेक सेगमेंट" नामक एक चर घोषित करें। यह "स्क्वायर" की संख्या को होल्ड करेगा जो सांप उठाएगा। आप सांप की लंबाई पर नज़र रखने के लिए एक वेरिएबल भी बना सकते हैं:

   वर स्नेक सेगमेंट = [];
   वर साँप की लंबाई = 1;
   

6. साँप की प्रारंभिक X और Y स्थिति घोषित करें:

   वर स्नेकएक्स = 0;
   वर साँप वाई = 0;

7. एक नया कार्य बनाएँ। अंदर, आरंभिक स्नेक पीस को स्नेकसेगमेंट एरे में जोड़ें, इसके शुरुआती X और Y निर्देशांक के साथ:

   समारोहचालसाँप() {
    स्नेकसेगमेंट्स.अनशिफ्ट({ एक्स: स्नेकएक्स, वाई: स्नेक वाई});
   }

8. एक नया कार्य बनाएँ। अंदर, भरण शैली को काले रंग में सेट करें। यह वह रंग है जिसका उपयोग यह सांप को खींचने के लिए करेगा:

   समारोहdrawSnake() {
    कैनवास2डी.फिल स्टाइल = "काला"; 
   }

9. साँप के आकार को बनाने वाले प्रत्येक खंड के लिए, 10 पिक्सेल की चौड़ाई और ऊँचाई वाला एक वर्ग बनाएँ:

   के लिए (वर मैं = 0; मैं  कैनवास2d.fillRect (स्नेक सेगमेंट [i] .x, स्नेक सेगमेंट [i] .y, 10, 10);
    }

10. एक गेम लूप बनाएं जो हर 100 मिलीसेकंड पर चलेगा। यह खेल को साँप को उसकी नई स्थिति में लगातार खींचने का कारण बनेगा, जो साँप के हिलने पर बहुत महत्वपूर्ण होगा:

    समारोहgameLoop() {
     मूवस्नेक ();
     ड्रास्नेक ();

11. सांप को उसके सबसे छोटे आकार में उसकी प्रारंभिक स्थिति में देखने के लिए वेब ब्राउज़र में "index.html" फ़ाइल खोलें।

सांप को कैसे मूव करें

सांप को अलग-अलग दिशाओं में ले जाने के लिए कुछ तर्क जोड़ें, यह इस बात पर निर्भर करता है कि खिलाड़ी कीबोर्ड पर कौन सा बटन दबाता है।

1. फ़ाइल के शीर्ष पर, साँप की प्रारंभिक दिशा घोषित करें:

   वर दिशा एक्स = 10;
   वर दिशा वाई = 0;
   

2. एक ईवेंट हैंडलर जोड़ें जो खिलाड़ी द्वारा कुंजी दबाए जाने पर सक्रिय हो जाता है:

   दस्तावेज़.onkeydown = समारोह(आयोजन) {
   };

3. ईवेंट हैंडलर के अंदर, दबाई गई कुंजी के आधार पर सांप की गति की दिशा बदलें:

   बदलना (इवेंट.कीकोड) {
   मामला37: // बायीं तरफ
    दिशा एक्स = -10;
    दिशा वाई = 0;
   तोड़ना;
   मामला38: // ऊपर की ओर तीर
    दिशा एक्स = 0;
    दिशा वाई = -10;
   तोड़ना;
   मामला39: // दाहिना तीर
    दिशा एक्स = 10;
    दिशा वाई = 0;
   तोड़ना;
   मामला40: // नीचे वाला तीर
    दिशा एक्स = 0;
    दिशा वाई = 10;
   तोड़ना;
   }

4. MoveSnake () फ़ंक्शन में, साँप के X और Y निर्देशांक को अपडेट करने के लिए दिशा का उपयोग करें। उदाहरण के लिए, यदि सांप को बाईं ओर जाने की आवश्यकता है, तो X दिशा "-10" होगी। यह गेम के प्रत्येक फ्रेम के लिए 10 पिक्सेल निकालने के लिए X निर्देशांक को अपडेट करेगा:

   समारोहचालसाँप() {
    स्नेकसेगमेंट्स.अनशिफ्ट({ एक्स: स्नेकएक्स, वाई: स्नेक वाई});
    स्नेकएक्स + = दिशाएक्स;
    स्नेकवाई + = दिशा वाई;
   }

5. सांप के चलने के दौरान खेल वर्तमान में पिछले खंडों को नहीं हटाता है। इससे सांप ऐसा दिखेगा:
6. इसे ठीक करने के लिए, drawSnake() फ़ंक्शन की शुरुआत में, प्रत्येक फ्रेम में नया सांप बनाने से पहले कैनवास को साफ़ करें:

   कैनवास2d.clearRect (0, 0, कैनवास.चौड़ाई, कैनवास.ऊंचाई);

7. आपको मूवस्नेक () फ़ंक्शन के अंदर स्नेकसेगमेंट एरे के अंतिम तत्व को भी निकालना होगा:

   जबकि (snakeSegments.length > साँप की लंबाई) {
    स्नेकसेगमेंट्स.पॉप ();
   }

8. सांप को स्थानांतरित करने के लिए "index.html" फ़ाइल खोलें और बाएँ, दाएँ, ऊपर या नीचे कुंजियाँ दबाएँ।

कैनवस पर खाना कैसे जोड़ें

सांप के भोजन के टुकड़ों का प्रतिनिधित्व करने के लिए बोर्ड गेम में डॉट्स जोड़ें।

1. भोजन के टुकड़ों की एक सरणी को संग्रहीत करने के लिए फ़ाइल के शीर्ष पर एक नया चर घोषित करें:

   वर डॉट्स = [];

2. एक नया कार्य बनाएँ। अंदर, डॉट्स के लिए यादृच्छिक एक्स और वाई निर्देशांक उत्पन्न करें। आप यह भी सुनिश्चित कर सकते हैं कि बोर्ड पर किसी भी समय केवल 10 बिंदु हों:

   समारोहsponDots() {
   अगर(अंक.लंबाई < 10) {
   वर डॉटएक्स = गणित।ज़मीन(गणित.random() * कैनवास.चौड़ाई);
   वर डॉट वाई = गणित।ज़मीन(गणित.random() * कैनवास.ऊंचाई);
    डॉट्स.पुश ({ एक्स: डीओटीएक्स, वाई: डॉट वाई});
    }
   }

3. भोजन के लिए X और Y निर्देशांक उत्पन्न करने के बाद, उन्हें लाल रंग का उपयोग करके कैनवास पर बनाएं:

   के लिए (वर मैं = 0; मैं  कैनवास2डी.फिल स्टाइल = "लाल";
    कैनवास2d.fillRect (बिंदु [i] .x, बिंदु [i] .y, 10, 10);
   }

4. गेम लूप के अंदर नए स्पॉनडॉट्स () फ़ंक्शन को कॉल करें:

   समारोहgameLoop() {
    मूवस्नेक ();
    ड्रास्नेक ();
    स्पॉनडॉट्स ();
   अगर(!गेमएंडेड) {
    सेटटाइमआउट (गेमलूप, 100);
    }
   }

5. गेम बोर्ड पर भोजन देखने के लिए "index.html" फ़ाइल खोलें।

सांप को कैसे बड़ा करें

जब सांप फूड डॉट से टकराता है तो आप उसकी लंबाई बढ़ाकर उसे बड़ा कर सकते हैं।

1. एक नया कार्य बनाएँ। इसके अंदर, डॉट्स सरणी में प्रत्येक तत्व के माध्यम से लूप करें:

   समारोहcheckCollision() {
   के लिए (वर मैं = 0; मैं 
    }
   }

2. यदि सांप की स्थिति किसी बिंदु के निर्देशांक से मेल खाती है, तो सांप की लंबाई बढ़ाएं और बिंदु को हटा दें:

   अगर (स्नेकएक्स 10 && 
    स्नेकएक्स + 10 > डॉट्स [i] .x && 
    स्नेकवाई 10 && 
    साँप वाई + 10 > डॉट्स [i] .y) {
    सांप की लंबाई++;
    डॉट्स. ब्याह (मैं, 1);
   }

3. गेम लूप में नए checkCollision() फ़ंक्शन को कॉल करें:

   समारोहgameLoop() {
    मूवस्नेक ();
    ड्रास्नेक ();
    स्पॉनडॉट्स ();
    चेक कोलिशन ();
   अगर(!गेमएंडेड) {
    सेटटाइमआउट (गेमलूप, 100);
    }
   }

4. किसी वेब ब्राउज़र में "index.html" फ़ाइल खोलें। भोजन के टुकड़ों को इकट्ठा करने और सांप को विकसित करने के लिए कीबोर्ड का उपयोग करके सांप को ले जाएं।

खेल को कैसे समाप्त करें

खेल को समाप्त करने के लिए, जांचें कि क्या सांप अपनी ही पूंछ या किसी दीवार से टकराया है।

1. "गेम ओवर" अलर्ट प्रिंट करने के लिए एक नया फंक्शन बनाएं।

   समारोहखेल खत्म() {
    सेटटाइमआउट(समारोह() {
    चेतावनी("खेल खत्म!");
    }, 500); 
    गेमएंडेड = सत्य
   }

2. checkCollision() फ़ंक्शन के अंदर, जांचें कि क्या सांप किसी कैनवास की दीवार से टकराया है। यदि ऐसा है, तो गेमओवर () फ़ंक्शन को कॉल करें:

   अगर (स्नेकएक्स < -10 || 
    सांप वाई < -10 || 
    स्नेकएक्स > कैनवास.चौड़ाई+10 ||
    स्नेकवाई > कैनवास.ऊंचाई+10) {
    खेल खत्म();
   }

3. यह जाँचने के लिए कि साँप का सिर किसी पूंछ के खंड से टकराया है या नहीं, साँप के प्रत्येक टुकड़े के माध्यम से लूप करें:

   के लिए (वर मैं = 1; मैं 
   }

4. फॉर-लूप के अंदर, जांचें कि सांप के सिर का स्थान पूंछ के किसी भी खंड से मेल खाता है या नहीं। यदि ऐसा है, तो इसका मतलब है कि सिर पूंछ से टकरा गया है, इसलिए खेल समाप्त करें:

   अगर (स्नेकएक्स स्नेक सेगमेंट [i] .x && स्नेक वाई स्नेक सेगमेंट [i] .y) {
    खेल खत्म();
   }

5. किसी वेब ब्राउज़र में "index.html" फ़ाइल खोलें। खेल को समाप्त करने के लिए दीवार या अपनी खुद की पूंछ को हिट करने का प्रयास करें।

खेलों के माध्यम से जावास्क्रिप्ट अवधारणाओं को सीखना

गेम बनाना आपके सीखने के अनुभव को अधिक सुखद बनाने का एक शानदार तरीका हो सकता है। अपने जावास्क्रिप्ट ज्ञान में सुधार जारी रखने के लिए और गेम बनाते रहें।