चेकर्स ऑनलाईन - जावास्क्रिप्ट अनुप्रयोग तयार आणि उपयोजित कसे करावे

खेळाचा इंटरफेस

आणि माझ्या आणखी एक तेजस्वी कल्पना आहेत: एक मल्टीप्लेअर ऑनलाइन चेकर्स करत आहे जेणेकरून मी त्याबद्दल लिहू शकेन. काय चूक होऊ शकते?

असो, हे या लेखाचे उद्दीष्ट नाही, परंतु काय चांगले झाले हे सांगण्यासाठी, म्हणून मी याबद्दल बोलणार आहे:

  • मी हा खेळ कसा केला आहे
  • जावास्क्रिप्ट प्रोजेक्ट हिरोकूवर कसे तैनात करावे
  • दोन खेळाडूंच्या गेममध्ये संवाद साधण्यासाठी मी सर्व्हरचा कसा वापर केला
  • वॉकिंग डेडचा शेवटचा भाग
  • या प्रकल्पात भविष्यातील कामे

खेळाबद्दल

या लेखात क्लिकबाईट आहे

माझ्या जावास्क्रिप्टच्या कॅपस्टोन प्रोजेक्टनंतर मला आणखी हवा आहे, मला आणखी एक खेळ तयार करण्याची आवश्यकता आहे. एक खेळ खेळणे छान आहे. कोडिंग छान आहे. गेम कोडिंग करणे त्यापलीकडे आहे. तर, चेकर्सची कल्पना आली, एक असा खेळ ज्यास बर्‍याच अ‍ॅनिमेशन किंवा डिझाइनची आवश्यकता नसते. हे सोपे होईल, माझा मेंदू म्हणाला… मी माझ्या मेंदूत सतत ऐकत का राहू?

हा गेम तयार करण्यासाठी मी फेसर used वापरला. फेसर हे जावास्क्रिप्टचे “कॅनव्हास व वेबजीएल समर्थित ब्राउझर गेम्ससाठी जलद, मुक्त आणि मजेदार मुक्त-स्त्रोत फ्रेमवर्क” आहे. त्यासह आपण आपल्या गेमसाठी भिन्न दृश्ये, गेम ऑब्जेक्ट्स आणि सोपी प्रभाव सहजपणे तयार करू शकता. आपण फ्रेमवर्क - आणि त्याच्या समुदायावर - अधिक जटिल अ‍ॅनिमेशन आणि गेम मेकॅनिकची अंमलबजावणी करण्यास मदत करू शकता. आपण खरोखर प्रयत्न करून पहावे.

खेळ करत आहे

या खेळाविषयी मी स्वत: ला दोन नियम दिले: 1) हे सोपे असेल; 2) हे ऑनलाइन लोक प्ले करण्यासाठी 2 लोकांसाठी कार्यशील असेल. मी फेसरच्या विस्ताराच्या रूपात सीन क्लास तयार केला आहे. लाल आणि काळ्या रंगाचे तुकडे वर्ग फेसर.गेमऑब्जेक्ट.स्प्रिट या क्लासच्या विस्ताराच्या रूपात पहा.

तर खेळाचे मुख्य देखावे म्हणजे एका बोर्डची प्रतिमा आणि काळ्या डागांवरील खेळातील वस्तू. तुकडा फिरविणे हे हलविणे शक्य आहे की नाही हे दर्शविते आणि त्यावर क्लिक केल्याने जंप्स आणि एकाधिक जंपसह त्याच्या संभाव्य हालचाली दर्शविल्या जातात. मी या गेममध्ये घातलेले एकमेव अ‍ॅनिमेशन म्हणजे चळवळ अ‍ॅनिमेशन. मी प्रतिस्पर्ध्याचा तुकडा “खाण्यासाठी” खेळातील वस्तूंमध्ये टक्कर वापरला, म्हणून जेव्हा हालचालीचा एखादा तुकडा दुस with्याशी आदळतो तेव्हा दुसरा नष्ट होतो. मला काही आवाज ऐकायला आवडेल, परंतु सर्व चेकर्सना ऑनलाईन पैसे दिले आहेत आणि मी गरीब आहे. बोर्ड लॉजिकमध्ये अ‍ॅरेच्या अ‍ॅरेद्वारे प्रतिनिधित्व केले जाते. रिक्त स्थानास 0 मूल्य प्राप्त होते आणि व्यापलेल्यास त्यातील ऑब्जेक्टसाठी पॉईंटर प्राप्त होते.

हा नियम सोपा करण्याचा माझा नियम असूनही, खेळाचे तर्कशास्त्र या लेखासाठी बरेचच जटिल आहे - तथापि, मी या मल्टीप्लेअर आणि उपयोजित बद्दल बोलू इच्छित आहे - म्हणून आपण त्यास त्याच्या रिपॉझिटरीमध्ये पाहू शकता.

हिरोकूला तैनात करत आहे

आता मला गेमला ब्रेक द्यायचा आहे आणि जावास्क्रिप्ट बद्दल सर्वसाधारणपणे बोलायचे आहे. माझा कॅपस्टोन करत असताना मला मी प्रकल्प जेथे वेबपॅक वापरत होतो तेथे उपयोजित करताना समस्या आली. असो, आपल्याला प्रकल्प तयार करण्याची आणि ती चालविण्यासाठी सर्व्हरची आवश्यकता नाही. काही संशोधनानंतर, गडद स्वामींचा पराभव करण्यासाठी आणि माझा प्रकल्प उपयोजित करण्यात मदत करण्यासाठी हा व्हिडिओ निवडलेला होता. आपल्याला आवश्यक असलेल्या सर्व गोष्टीः

  • एक सर्व्हर फाइल
  • एक सादरीकरण
  • एक्सप्रेस विस्तार
  • एक हिरोकू खाते
  • कँडींनी भरलेली बॅग

प्रथम, आपल्या हाताच्या आवाक्यावर कँडीची पिशवी ठेवा. आपण काम करता तेव्हा आपण खाणे जाईल. दुसरे, आपल्याला खात्री असणे आवश्यक आहे की आपला प्रकल्प गिटला जोडलेला आहे आणि हिरोकूवर एक नवीन रेपॉजिटरी तयार करेल, चला 'foo-bar-प्रोजेक्ट' म्हणा. आपल्या प्रोजेक्टला त्याच्या नव्याने तयार केलेल्या रेपॉजिटरीमध्ये हिरकु गिट वापरून दुवा साधा: रिमोट -ए फू-बार-प्रोजेक्ट.

पुढील चरण सर्व्हर फाइल तयार करणे आहे. खूप सर्जनशील असण्याची गरज नाही, फक्त एक सर्व्हर. Js काम करेल. ही फाईल आपल्या प्रोजेक्टच्या मुळाशी असेल आणि काही ओळी असणे आवश्यक आहे:

काय…

तिथे काय घडत आहे हे समजून घेण्याचा प्रयत्न करूया:

  • एक्सप्रेस नोडसाठी वेब अनुप्रयोग फ्रेमवर्क आहे. आपल्याला वेब अनुप्रयोग आणि एपीआय तयार करण्याची आवश्यकता आहे. ते thepackage.jasonfile मधील आपल्या अवलंबित्व वर असल्याचे सुनिश्चित करा.
  • लाइन 4 वर सर्व्हरला हिरोकूने दिलेला पोर्ट आणि आपण देत असलेल्या दरम्यान निवड करा. या प्रकरणात, मी सर्वात सामान्य पोर्ट दिले: 8080.
  • आपण स्थिर वापरण्यासाठी एक्सप्रेसला कॉल करता. हे आमच्या मूळ फोल्डरचा संदर्भ घेण्यासाठी ग्लोबल व्हेरिएबल '__dirname' वापरण्यास अनुमती देते.
  • 9 व्या ओळीवर आपण वेबवरुन काहीतरी मिळवत आहात आणि उत्तर म्हणून अनुक्रमणिका. Html पाठवित आहात.

शेवटचे परंतु किमान नाही, आपल्याला प्रॉफाइल नावाची फाईल आवश्यक आहे. ही फाईल हिरोकूला तुमच्या अनुप्रयोगासह काय करावे, या प्रकरणात, नोड सर्व्हर.जेएस चालविण्यासाठी सांगेल. तर, आपल्या प्रॉफाइलमध्ये ही एक ओळ ठेवा आणि साजरा करा:

वेब: नोड सर्व्हर .js

चेकर्स गेममधील सर्व्हर - सॉकेट आयओ

मी वर वर्णन केलेली पद्धत ठीक काम करते… आपण वापरकर्त्यांमधील माहितीची देवाणघेवाण करू इच्छित नसल्यास - मला कठोर मार्ग काय सापडला. मला सर्वात सोपा मार्ग सापडला तो म्हणजे सॉकेट.िओ लायब्ररी वापरणे. हे एक लायब्ररी आहे जे क्लायंट्स दरम्यान द्वि-निर्देशीय संप्रेषणास परवानगी देते - अनेकवचनीकडे - आणि सर्व्हरवर लक्ष द्या. याचा वापर करून आपण एकाधिक सॉकेट्स दरम्यान माहिती प्रसारित करू शकता, प्रत्येक क्लायंटशी संबंधित डेटा संचयित करू शकता आणि एसिन्क्रोनस आय / ओ विनंत्या करू शकता.

पूर्वीप्रमाणे मी एक्सप्रेसचा वापर करून एक अ‍ॅप तयार केला आणि अनुक्रमणिका एचटीएमएल पाठविला, परंतु आता मला आमच्या अ‍ॅपच्या सर्व्हर वर्गाच्या 'http' घटकांची आवश्यकता असलेला सर्व्हर तयार करण्याची आवश्यकता आहे:

कॉन्ट सर्व्हर = आवश्यक ('http'). सर्व्हर (अॅप);

त्यानंतर, आम्ही एक व्हेरिएबल तयार करू शकतो जो सर्व्हर थ्रो सॉकेट.आयओ लायब्ररी ऐकेल.

कॉन्ट आयओ = आवश्यक ('सॉकेट.आयओ'). ऐकणे (सर्व्हर);

शेवटी, आम्ही व्हेरिएबलला पासिंग कॉलबॅक फंक्शन तयार करतो, सर्व्हरमध्ये 'कनेक्शन' कॉलिंगसाठी 'सॉकेट' म्हणा.

वरील प्रिंटबद्दल: 'डिस्कनेक्ट' कॉल, अर्थातच, केवळ कनेक्शननंतरच होऊ शकतो, म्हणूनच कॉलबॅक फंक्शनमध्ये असण्याचा अर्थ होतो. 'हॅलो वर्ल्ड' सारख्या लाइनसर्व्हर.लिस्टेनिस. मला हे फक्त सर्व्हर कनेक्ट केलेले असल्याचे सुनिश्चित करणे आवडले

“कनेक्शन कॉलबॅक” च्या आत मी कोडच्या कॉलची प्रतीक्षा करण्यासाठी आणि नंतर उत्तर देण्यासाठी इतर कार्ये जोडली.

'startGame', 'startGame', 'joinGame' आणि 'gameBegin' - माझ्यात सर्जनशीलता नाही !!!

'मेन मेनू सीन' मध्ये, प्रथम खेळाडू खेळ तयार करतो. एक यादृच्छिक चार-अंकी क्रमांक दिला जाईल आणि सर्व्हरला कॉल केला जाईल, स्टार्टगेमेकल, आयडीला पॅरामीटर (बीआयडी) म्हणून पास करते. सध्या घडत असलेले सर्व गेम संग्रहित करण्यासाठी सर्व्हरच्या सुरूवातीस तयार केलेल्या 'गेम्स' ऑब्जेक्ट - ऑब्जेक्टमध्ये एक नवीन की व्युत्पन्न केली जाईल. कॉलबॅकच्या शेवटी, एमिट केले जाईल: सर्व्हर कोडचे उत्तर म्हणूनच देईल “ठीक आहे, जेव्हा दुसरा खेळाडू आत येईल तेव्हा मी तुम्हाला सांगतो” मला तुमचा संदेश प्राप्त झाला ”.

'मेन मेनू सीन'मधील दुसरा खेळाडू, गेमची आयडी समाविष्ट करेल. हे जॉइनगॅम कॉल पाठवेल जो ऑब्जेक्टमधील दुसरा खेळाडू यापूर्वी उपलब्ध आहे का याची पडताळणी करेल, प्लेयरला ऑब्जेक्टमध्ये जोडा आणि नंतर गेम सुरू होऊ शकेल असे दोन्ही खेळाडूंना एक आणि दोन उत्तर द्या.

मी फक्त यासाठी 2 सेकंद उशीर केला आहे.

इतर कॉल आणि उत्तरे याबद्दल आपण पुन्हा एकदा तपासण्यासाठी गेमच्या भांडारात भेट द्या.

निष्कर्ष आणि भविष्यातील कामे

मला माहित आहे की मी म्हटले आहे की मी वॉकिंग डेडच्या शेवटच्या पर्वाबद्दल बोलू, परंतु मी ते आता पहात नाही, म्हणून जर आपण येथे थांबलो तर आपल्याला बेदम मारहाण केली गेली.

प्रोजेक्टबद्दल, काही नियम लागू केले नाहीत जसे की एखादा प्रतिस्पर्धी तुकडा “खाणे” हे आपले बंधन आहे जेव्हा आपण हे करू शकता कारण मला इतर काही प्रकल्पांवर काम करावे लागेल परंतु मी भविष्यात यावर कार्य करू शकेल.

इतर कल्पनाः वापरकर्त्याला त्याचे नाव देऊ आणि लोकल स्टोअर्स, सरेंडर बटणावर ठेवू द्या आणि विरोधकांना भडकवण्यासाठी काही आवाज पाठवा. पण हे दुसर्‍या वेळेसाठी आहे.

वाचल्याबद्दल धन्यवाद.