चेकर्स ऑनलाइन - कैसे एक जावास्क्रिप्ट एप्लिकेशन बनाने और तैनात करने के लिए

खेल का इंटरफ़ेस

और मेरे शानदार विचारों का एक और हिस्सा है: एक मल्टीप्लेयर ऑनलाइन चेकर्स करना ताकि मैं इसके बारे में लिख सकूं। क्या गलत हो सकता था?

ठीक है, यह इस लेख का उद्देश्य नहीं है, लेकिन यह बताने के लिए कि क्या अच्छा हुआ, इसलिए मैं इसके बारे में बात करूंगा:

  • मैंने यह खेल कैसे किया है
  • Heroku के लिए एक जावास्क्रिप्ट परियोजना कैसे तैनात करें
  • मैंने दो खिलाड़ियों के खेल के बीच संवाद करने के लिए सर्वर का उपयोग कैसे किया
  • द वॉकिंग डेड का आखिरी एपिसोड
  • भविष्य इस परियोजना में काम करता है।

खेल के बारे में

इस लेख में एक clickbait है

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

इस गेम को बनाने के लिए मैंने फेजर 3 का उपयोग किया। फेजर एक जावास्क्रिप्ट है "कैनवस और वेबगेल संचालित ब्राउज़र गेम्स के लिए तेज, मुफ्त और मजेदार ओपन-सोर्स फ्रेमवर्क।" इसके साथ, आप आसानी से विभिन्न दृश्यों, गेम ऑब्जेक्ट्स और अपने गेम के लिए सरल प्रभाव बना सकते हैं। तुम भी ढांचे पर भरोसा कर सकते हैं - और उसके समुदाय - अधिक जटिल एनिमेशन और खेल यांत्रिकी को लागू करने में मदद करते हैं। आपको वास्तव में इसे आज़माना चाहिए।

खेल कर रहे हैं

मैंने खुद को इस खेल के बारे में दो नियम दिए: 1) यह सरल होगा; 2) यह ऑनलाइन खेलने के लिए 2 लोगों के लिए कार्यात्मक होगा। मैंने फेज़र के विस्तार के रूप में दृश्य वर्ग बनाया। लाल और काले टुकड़ों की कक्षाओं को फ़ेज़र के एक्सटेंशन के रूप में श्रेणीबद्ध करें। GameObjects.Sprite।

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

इसे सरल बनाने के मेरे नियम के बावजूद, खेल का तर्क इस लेख के लिए बहुत जटिल है - आखिरकार मैं इसके बारे में बात करना चाहता हूं कि यह मल्टीप्लेयर और तैनाती है - इसलिए आप इसे इसके भंडार में देख सकते हैं।

हरोकू को नियुक्त करना

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

  • एक सर्वर फ़ाइल
  • एक घोषणा
  • एक्सप्रेस का विस्तार
  • एक हरोकू खाता
  • कैंडी से भरा बैग

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

अगला कदम एक सर्वर फ़ाइल बनाना है। बहुत रचनात्मक होने की जरूरत नहीं है, बस एक server.jswill काम करते हैं। यह फ़ाइल आपके प्रोजेक्ट के रूट पर होगी और इसके लिए कुछ लाइनें होनी चाहिए:

क्या…

आइए समझने की कोशिश करें कि वहां क्या हो रहा है:

  • एक्सप्रेस नोड के लिए एक वेब एप्लीकेशन फ्रेमवर्क है। आपको वेब एप्लिकेशन और API बनाने की आवश्यकता है। यह सुनिश्चित करें कि यह आपकी निर्भरता inpackage.jasonfile पर है।
  • लाइन 4 पर सर्वर को हरोकू के दिए गए पोर्ट और आपके द्वारा दिए गए के बीच चयन करें। इस मामले में, मैंने सबसे आम बंदरगाह दिया: 8080।
  • आप एक स्थिर का उपयोग करने के लिए एक्सप्रेस कहते हैं। यह हमें अपने रूट फ़ोल्डर को संदर्भित करने के लिए वैश्विक चर '__dirname' का उपयोग करने की अनुमति देता है।
  • लाइन 9 पर आपको वेब से कुछ मिल रहा है और जवाब के रूप में index.html भेज रहा है।

अंतिम लेकिन कम से कम, आपको Procfile नामक एक फ़ाइल की आवश्यकता है। यह फ़ाइल Heroku को बताएगी कि वह आपके आवेदन के साथ क्या करेगी, इस मामले में, नोड server.js को चलाने के लिए। तो, इस एकल पंक्ति को अपने Procfile में डालें और जश्न मनाएं:

वेब: नोड server.js

चेकर्स गेम में सर्वर - सॉकेट Io

मेरे द्वारा बताई गई विधि ठीक काम करती है ... यदि आप उपयोगकर्ताओं के बीच सूचनाओं का आदान-प्रदान नहीं करना चाहते हैं - तो मैंने क्या तरीका खोजा। मुझे ऐसा करने का सबसे आसान तरीका लाइब्रेरी सॉकेट का उपयोग करना था। यह एक पुस्तकालय है जो ग्राहकों के बीच द्विदिश संचार की अनुमति देता है - बहुवचन और सर्वर पर ध्यान दें। इसका उपयोग करके आप कई सॉकेट्स के बीच जानकारी प्रसारित कर सकते हैं, प्रत्येक क्लाइंट के साथ जुड़े डेटा को स्टोर कर सकते हैं और अतुल्यकालिक I / O अनुरोध कर सकते हैं।

पहले की तरह, मैंने एक्सप्रेस का उपयोग करके एक ऐप बनाया और index.html भेजा, लेकिन अब हमें हमारे ऐप के सर्वर वर्ग के 'http' तत्व की आवश्यकता वाले सर्वर बनाने की आवश्यकता थी:

const server = आवश्यकता ('http')। server (ऐप);

उसके बाद, हम एक ऐसा वेरिएबल बना सकते हैं जो सर्वर को सॉकेट फेंकने के लिए सुनेगा। पुस्तकालय:

const io = आवश्यकता ('सॉकेट.io')। सुनो (सर्वर);

अंत में, हम एक चर पास करने के लिए एक कॉलबैक फ़ंक्शन बनाते हैं, चलो सर्वर में 'कनेक्शन' कॉलिंग के लिए 'सॉकेट' कहते हैं।

ऊपर दिए गए प्रिंट के बारे में: 'डिस्कनेक्ट' कॉल, जाहिर है, केवल एक कनेक्शन के बाद हो सकता है, इसलिए यह कॉलबैक फ़ंक्शन के अंदर होने के लिए समझ में आता है। 'हैलो वर्ल्ड' की तरह लाइंसर.लिस्टेनिस। मुझे यह सुनिश्चित करना पसंद था कि सर्वर कनेक्ट हो

"कनेक्शन कॉलबैक" के अंदर मैंने कोड के कॉल की प्रतीक्षा करने और फिर जवाब देने के लिए अन्य फ़ंक्शन जोड़े।

'startGame', 'startGame', 'joinGame' और 'gameBegin' - मेरी कोई रचनात्मकता नहीं है !!!

'मेन मेन्यू सीन' में, पहला खिलाड़ी एक गेम बनाता है। एक यादृच्छिक चार-अंकीय संख्या दी जाएगी और सर्वर को एक कॉल किया जाएगा, जो StartGamecall, आईडी को एक पैरामीटर (बीआईडी) के रूप में पारित करेगा। एक नई कुंजी 'गेम' ऑब्जेक्ट में उत्पन्न होगी - सर्वर की शुरुआत में बनाई गई ऑब्जेक्ट जो कि वर्तमान में हो रहे सभी गेम को स्टोर करने के लिए है। कॉलबैक के अंत में, एक 'एमिट किया जाएगा: सर्वर' 'ठीक है' कहने के लिए कोड का जवाब देगा, जब दूसरा खिलाड़ी आपको बताता है तो मुझे आपका संदेश मिला। ''

दूसरा खिलाड़ी, 'मेन मेन्यू सीन' में, गेम की आईडी डालेगा। यह joinGame कॉल को भेज देगा जो कि सत्यापित करेगा कि ऑब्जेक्ट में दूसरा खिलाड़ी पहले से उपलब्ध है या नहीं, प्लेयर को ऑब्जेक्ट में जोड़ें और फिर दोनों खिलाड़ियों को एक और दो का उत्तर दें कि गेम शुरू हो सकता है।

मैंने सिर्फ इसलिए 2 सेकंड की देरी जोड़ी है।

अन्य कॉल और उत्तरों के बारे में, जो आप एक बार और कर सकते हैं, जांचने के लिए खेल के भंडार पर जाएँ।

निष्कर्ष और भविष्य के काम

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

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

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

पढ़ने के लिए धन्यवाद।