इन मजेदार गेम प्रोजेक्ट्स को बनाकर, आप प्रोग्रामिंग को कम थकाऊ बना सकते हैं और साथ ही साथ अपने कौशल को भी सुधार सकते हैं।
तथ्य यह है कि सभी वेबसाइटों में से 98.4% जावास्क्रिप्ट का उपयोग करते हैं, इसलिए आपको इसे एक डेवलपर के रूप में जानना चाहिए। रेट्रोस्पेक्ट में, जावास्क्रिप्ट के साथ गेम बनाने से न केवल आपको तेजी से सीखने में मदद मिलती है। यह आपको अलग-अलग ऑन-द-जॉब परिस्थितियों में इसकी सरल से जटिल अवधारणाओं को लागू करने में महारत हासिल करने देता है - चाहे आप शुरुआती हों या पुनश्चर्या।
यदि आप दृश्य प्रदर्शनों के साथ बेहतर सीखते हैं, तो YouTube पर ये जावास्क्रिप्ट-आधारित गेम ट्यूटोरियल आपके समय के लायक हैं।
1. जावास्क्रिप्ट के साथ ताश का खेल
गेविन लोन के साथ यह जावास्क्रिप्ट कार्ड गेम आपको जावास्क्रिप्ट कोड की 600 से अधिक पंक्तियों के साथ कार्ड फ़्लिप करने का तरीका दिखाता है। जबकि मुख्य ध्यान जावास्क्रिप्ट सिखाने पर है, आप जावास्क्रिप्ट के साथ जवाबदेही हासिल करने के लिए HTML की DOM संरचना के साथ CSS की डिजाइनिंग शक्ति को जोड़ना भी सीखेंगे।
प्रोजेक्ट का अंतिम लक्ष्य कुछ कार्डों को फ़्लिप करना है, और खिलाड़ी ऐस का अनुमान लगाता है जब कार्ड अंत में स्पॉट स्विच करते हैं। प्रत्येक कार्ड चार अलग-अलग कार्ड भूमिकाओं की एक छवि है। इसलिए जब आप स्वयं कार्ड डिज़ाइन नहीं करेंगे, तो आप उनकी स्थिति में जवाबदेही से हेरफेर करना सीखेंगे, गेम राउंड बढ़ाएंगे, स्तरों में बदलाव के रूप में स्कोर जोड़ेंगे या हटाएंगे, और गेम स्कोर को स्टोर में स्टोर करेंगे।
ब्राउज़र का स्थानीय भंडारण—सभी जावास्क्रिप्ट का उपयोग कर रहे हैं।दृश्य के पीछे आप भारी उठाने के बावजूद ट्यूटोरियल चरणबद्ध और आसान है। यह शुरुआती और रिफ्रेशर के लिए एकदम सही है। हालांकि यह एक कार्ड गेम बनाने के बारे में है, यह आपको वास्तविक जीवन की स्थितियों में जावास्क्रिप्ट की अधिकांश वायरिंग तकनीकों के बारे में बताता है। साथ ही, यह आपकी सोचने-समझने की क्षमता को उजागर करता है।
2. जावास्क्रिप्ट के साथ 2डी ब्रेकआउट गेम
यदि आप एक्शन अंतराल को नियंत्रित करना सीखना चाहते हैं और DOM तत्वों को जावास्क्रिप्ट का उपयोग करके गतिशील रूप से स्थानांतरित करना चाहते हैं, तो Ania Kubów दिखाता है कि जावास्क्रिप्ट का उपयोग करके इस ब्रेकआउट गेम ट्यूटोरियल के साथ कितना मज़ा आता है। प्लस के रूप में, वीडियो यह भी दर्शाता है कि संभावित नियोक्ताओं के लिए अपनी परियोजना को कैसे होस्ट और प्रदर्शित किया जाए।
ब्रेकआउट गेम में हर संभावना के बारे में सोचें; एक गेंद के साथ एक चलता-फिरता मंच, जिसके ऊपर की ईंटें तोड़ने के लिए दीवारों पर स्पर्शरेखा से टकराता है। और आप इसमें इनाम प्रणाली को भी कोडित करेंगे। कुल मिलाकर, यह ब्रेकआउट गेम ट्यूटोरियल इस बात पर विचार करने योग्य है कि क्या आप तीसरे पक्ष के एजेंटों या सोर्स की गई छवियों का उपयोग किए बिना जमीन से कुछ बनाना चाहते हैं।
फ़ंक्शंस के भीतर अपने तर्क को तार-तार करते हुए, वीडियो आसान चरणों में जावास्क्रिप्ट क्लास और ऑब्जेक्ट कॉन्सेप्ट के बारे में अधिक सिखाता है, जिसमें शामिल हैं सशर्त बयान सर्वोत्तम प्रथाओं स्विच-केस की तरह।
3. जावास्क्रिप्ट साँप खेल
काइल के साथ यह जावास्क्रिप्ट स्नेक गेम बनाकर अपने Nokia 3310 के स्नेक II गेम की पुरानी यादों को उजागर करें। आपने शायद इसे पहले खेला है और संभावना है कि आप इसे जीवन भर में कई बार खेलेंगे क्योंकि आप वनीला जावास्क्रिप्ट का उपयोग करके एक को कोड करेंगे।
आपको DOM को गतिशील रूप से एक साथ जोड़ना सिखाते हुए, यह वीडियो दर्शाता है कि आप JavaScript में कस्टम मॉड्यूल कैसे बना सकते हैं और उनका उपयोग कैसे कर सकते हैं। तो यह आपके लिए अपने आप को न दोहराएं (DRY) सिद्धांत का उपयोग करके चिंताओं को अलग करने के बारे में जानने का अवसर खोलता है।
परदे के पीछे, आप अधिक उन्नत JavaScript अवधारणाओं में महारत हासिल करेंगे। खिलाड़ी ग्रिड बनाने, भोजन लगाने, साँप के शरीर का निर्माण करने, साँप को लंबा करने, कोडिंग करने सहित कार्य नेविगेशन लॉजिक, इनाम और पेनल्टी स्कीम बनाना, और सांप की गति को नियंत्रित करना, आपको कोर में उजागर करेगा जावास्क्रिप्ट।
4. जावास्क्रिप्ट के साथ टिक टीएसी को पैर की अंगुली खेल
जैसे ही आप काइल के साथ एक अन्य वीडियो में जावास्क्रिप्ट के साथ एक का निर्माण करते हैं, शायद आपका टिक टैक टो गेमप्ले तेज हो जाता है। यह एक साधारण लेकिन मूल्यवान है जावास्क्रिप्ट शुरुआती के लिए परियोजना चबाना के रूप में आप जटिल समस्याओं का समाधान करेंगे।
वीडियो केवल जावास्क्रिप्ट के साथ समाप्त नहीं होता है। यह यह भी दर्शाता है कि सीएसएस का उपयोग करके अपने यूजर इंटरफेस डिजाइन को कैसे पकड़ें। निरंतरता और प्रतिबद्धता के साथ, आप इस वीडियो में अपनी वेब विकास यात्रा शुरू करने के लिए आवश्यक लगभग हर तकनीक सीख सकते हैं।
जावास्क्रिप्ट के साथ डोम में हेरफेर करते समय, वीडियो कोडिंग जीत के आसपास भारी भार को लपेटता है और निर्णय लेता है, खिलाड़ियों के मोड़ और ऑब्जेक्ट संरेखण का निर्णय लेता है। जावास्क्रिप्ट फ़ंक्शंस, लूप्स और शर्तें कुछ उन्नत अवधारणाएँ हैं जिन्हें आप इस जावास्क्रिप्ट टिक टैक टो ट्यूटोरियल वीडियो में सीखेंगे।
5. जावास्क्रिप्ट के साथ स्लाइड पहेली खेल
पहेलियाँ सोच-विचार कर सकती हैं। लेकिन वेनिला जावास्क्रिप्ट के साथ एक बनाना आपकी रचनात्मकता का पता लगाने और जटिल जावास्क्रिप्ट अवधारणाओं को बुनियादी सीखने का एक मजेदार तरीका लगता है।
आप इस ट्यूटोरियल में कोड करना चाहते हैं—यदि आप यह देखना चाहते हैं कि कस्टम और बिल्ट-इन फ़ंक्शंस का उपयोग करके सशर्त स्विच और डायनेमिक DOM पोजिशन मैनिपुलेशन सहित जावास्क्रिप्ट अवधारणाओं का उपयोग कैसे करें।
यद्यपि ट्यूटर जावास्क्रिप्ट को HTML फ़ाइल में एक स्क्रिप्ट टैग के अंदर रखता है, आप अपनी स्क्रिप्ट को एक समर्पित जावास्क्रिप्ट फ़ाइल में स्पिन कर सकते हैं और इसे स्पष्टता के लिए अपने मामले में DOM से लिंक कर सकते हैं। भले ही, अपने लक्ष्य को प्राप्त करने के लिए मुख्य तर्क और विचार प्रक्रिया पर ध्यान केंद्रित करना सबसे अच्छा है, जिसमें यह भी शामिल है कि आप यहां जो सीखते हैं उसे वास्तविक जीवन के परिदृश्यों में कैसे लागू करें।
6. जावास्क्रिप्ट के साथ कार रेसिंग गेम
वेनिला जावास्क्रिप्ट का उपयोग करके एक कार रेसिंग गेम बनाना शायद सबसे अच्छा ग्राफिकल आउटपुट न दे। लेकिन इस ट्यूटोरियल का अनुसरण करते हुए एक कार्यशील कार रेसिंग गेम की वायरिंग करना आपको किसी भी एप्लिकेशन में जावास्क्रिप्ट की कार्यक्षमता-इम्बुइंग शक्ति का लाभ उठाना सिखाएगा।
इस ट्यूटोरियल में एक रेसट्रैक पर दो कारों (एक लाल और एक नीली) को रखना शामिल है। नीली कार किसी भी दिशा से बेतरतीब ढंग से प्रकट होती है, और खिलाड़ी का प्रतिनिधित्व करने वाला लाल वाहन टकराव से बचने की कोशिश करता है। दोनों कारों के बीच संपर्क होते ही खेल समाप्त हो जाता है।
यद्यपि यह एक सरल वर्णन है कि आप इसमें क्या बनाएंगे, आप DOM हेरफेर और स्टाइलिंग के लिए कुछ JavaScript उन्नत तर्क सीखेंगे। प्लेयर रिवार्ड्स और पेनाल्टी बनाते समय आप जावास्क्रिप्ट ऑपरेटरों में भी अंतर्दृष्टि प्राप्त करेंगे।
ट्रैक में कार्यात्मकताओं को जोड़ते समय, कुछ अवधारणाएँ जो आप सीखेंगे उनमें जावास्क्रिप्ट घटनाएँ, शर्तें, अनाम कार्य, जावास्क्रिप्ट एनीमेशन, अंतराल नियंत्रण, और बहुत कुछ शामिल हैं।
7. जावास्क्रिप्ट के साथ मारियो गेम
यह जावास्क्रिप्ट मारियो गेम ट्यूटोरियल आपको अपने सिर को जावास्क्रिप्ट की नॉटी-ग्रिट्टी में डुबाने की आवश्यकता है। जावास्क्रिप्ट के साथ एक मारियो गेम बनाना जटिल लगता है, क्रिस, आपका ट्यूटर, इस YouTube वीडियो में यह संभव से अधिक दिखाता है। तो हो सकता है कि आप मज़ा पकड़ना चाहें और साथ में निर्माण करके अपनी महत्वपूर्ण सोच क्षमता का पता लगाएं।
हालांकि शुरुआती लोगों को ट्यूटोरियल थोड़ा उन्नत लग सकता है, यह रिफ्रेशर्स के लिए अपने जावास्क्रिप्ट कौशल को अगले स्तर तक ले जाने के लिए एक शानदार खोज है।
तत्वों में हेरफेर के बारे में सीखने के अलावा, आप गेम इंटरफ़ेस के लिए एक उत्तरदायी कैनवास बॉयलरप्लेट बनाने में शुद्ध जावास्क्रिप्ट की शक्ति का उपयोग करेंगे ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (ओओपी)। चूंकि खिलाड़ी सक्रिय रूप से गतिशील है, जावास्क्रिप्ट कीबोर्ड नियंत्रण, इवेंट हैंडलिंग, लूप्स का अनुप्रयोग, ऑपरेटर्स, शर्तें, और बिल्ट-इन और कस्टम फ़ंक्शंस, आपके द्वारा किए जाने वाले क्रॉस-प्रोजेक्ट अनुभवों में से हैं पाना।
8. जावास्क्रिप्ट के साथ माइनस्वीपर बनाएँ
पुनरावर्ती कार्यों की शक्ति का पता लगाना चाहते हैं और सरणी के तरीके जावास्क्रिप्ट के साथ डीओएम तत्वों को गुणा करने में? आप ट्रैवर्सी मीडिया पर अनिया कुबो द्वारा इस जावास्क्रिप्ट माइनस्वीपर ट्यूटोरियल के साथ शुरुआत करना चाह सकते हैं।
इसमें विस्तार पर बहुत ध्यान देना शामिल है। लेकिन यह शुरुआती-अनुकूल ट्यूटोरियल है और जावास्क्रिप्ट का उपयोग करके ग्रिड लेआउट सिस्टम के चारों ओर अपने हाथों को लपेटने के लिए सबसे अच्छा है। अंतिम उद्देश्य एक ग्रिड टेम्प्लेट बनाना है जहां खिलाड़ी खदान पर कदम रखने से बचते हैं।
यह जितना सरल लगता है, आप दृश्य के पीछे खेल की कार्यक्षमता को तार करने के लिए अधिकांश जावास्क्रिप्ट कोर तकनीकों को शामिल करते हुए बहुत सारे प्रोग्रामिंग तर्क लिखेंगे।
9. HTML कैनवास के साथ पोकेमॉन जावास्क्रिप्ट गेम ट्यूटोरियल
पोकेमॉन सबसे जटिल गेम प्रोजेक्ट्स में से एक है जिसे आप जावास्क्रिप्ट का उपयोग करके बना सकते हैं। हालाँकि, यदि आप जावास्क्रिप्ट के साथ लंबे कठोर कोडिंग घंटों में हैं और अधिक आत्मविश्वास के साथ नए सिरे से बाहर आने के लिए तैयार हैं, तो आप इस ट्यूटोरियल में बेहतर हैं।
जावास्क्रिप्ट के साथ DOM स्क्रिप्टिंग और एनीमेशन के अलावा, वीडियो आपको सिखाता है कि कैसे जावास्क्रिप्ट का उपयोग करके ऑडियो और छवियों सहित संपत्तियों को स्थानांतरित और प्रस्तुत करना है। ट्यूटोरियल जावास्क्रिप्ट के बारे में बहुत कुछ बताता है जो आपको वास्तविक जीवन की किसी भी कोडिंग समस्या में मूल्यवान लगेगा।
अन्य कोर जावास्क्रिप्ट जोड़तोड़ तकनीकों के अलावा, ट्यूटोरियल OOPs अवधारणाओं का भी भारी उपयोग करता है; यदि आप बाद में टाइपस्क्रिप्ट में तल्लीन करने की योजना बनाते हैं तो यह मूल्यवान है। इस ट्यूटोरियल के सरलीकृत कारकों में से एक यह है कि ट्यूटर कैसे कार्यों की रूपरेखा तैयार करता है।
जब आप इस काम को करने के लिए आपके द्वारा बनाई गई जटिल प्रणाली की कल्पना करते हैं तो पीछे हटना आसान होता है। लेकिन इस बारे में सोचें कि अंत में आप क्या हासिल करने के लिए खड़े हैं।
जावास्क्रिप्ट के समस्या-समाधान अनुप्रयोगों को जानें
गेम्स प्रोग्रामिंग में कुछ सबसे प्रतिक्रियाशील और सहज तर्क का उपयोग करते हैं। इसलिए एक बनाने से जावास्क्रिप्ट सीखना सार्थक है। जबकि ये ट्यूटोरियल गेम-आधारित हैं, वे आपको वेब विकास और मोबाइल ऐप निर्माण सहित कई अन्य कोडिंग समस्याओं पर लागू जावास्क्रिप्ट कोर अवधारणाओं से अवगत कराते हैं। यहां तक कि अगर आप बाद में फ्रेमवर्क की ओर मुड़ने की योजना बनाते हैं, तो भी आप इन अवधारणाओं को बिना परवाह किए लागू करेंगे।
