🤷 ♈️ 🏫 शुक्रवार जेएस: 0-लाइन जेएस और सीएसएस गेम 🐼 🧜🏿 🧑🏽‍🤝‍🧑🏼

शायद पुराने समय के कई लेखकों को याद होगा कि जेएस की 30 लाइनों में "% कुछ%" जैसी सुर्खियों वाले लेखों की एक महामारी है। और इसके बाद महाकाव्य पोस्ट " शुद्ध जेएस पर कोड की 0 पंक्तियों में गेम ", जिसके बाद महामारी अचानक कम हो गई। पूरी तरह से जानते हैं कि मैं इस मास्टरपीस को पार नहीं करूंगा, फिर भी मैंने पांच साल बाद अपना पांच सेंट खत्म करने का फैसला किया।

देवियों और सज्जनों, हम आपको जेएस की शून्य रेखाओं पर गेम "टिक-टैक-टो" की पेशकश करते हैं, और सीएसएस की शून्य लाइनों (इनलाइन शैलियों सहित) के ऊपर दिए गए खेल के विपरीत भी। केवल नंगे HTML, केवल कट्टर।

→ खेल के लिए लिंक

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

दरअसल, सबकुछ बहुत बेवकूफी भरा है। गेम में स्टेटिक HTML के लगभग 6 हजार पेज हैं, जो एक-दूसरे से जुड़ते हैं। जब आप खेल के मैदान की एक सेल पर प्रहार करते हैं, तो आप उस पृष्ठ पर जाते हैं जहां इस सेल का मूव पहले ही बन चुका है। जाहिर है, अपने हाथों से 6k पृष्ठ लिखना औसत से नीचे एक खुशी है। इसलिए (आश्चर्य!) पृष्ठ NodeJS का उपयोग करते हुए JS स्क्रिप्ट द्वारा बनाए गए हैं।

गीतात्मक विषयांतर

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

सबसे पहले, हम तथाकथित गेम ट्री का निर्माण करते हैं - सभी संभव गेम स्टेट्स की समग्रता और उनके बीच संक्रमण। मेरे कोड में खेल की प्रारंभिक स्थिति इस प्रकार है:

const initialState = { player: PLAYER_X, field: Array.from(Array(9)).map(() => EMPTY_CELL), moves: {} }

इसमें जानकारी दी गई है कि अब किसकी बारी है और खेल मैदान की स्थिति क्या है। भविष्य में, इसमें यह भी जानकारी होगी कि कौन सी चालें बनाई जा सकती हैं और वे किन राज्यों को आगे बढ़ाएंगे, साथ ही साथ कुछ अन्य सुखद बातें भी बताएंगे।

फिर हम शुरू करते हैं, मैं प्रारंभिक अवस्था से, टॉटोलॉजी के लिए माफी माँगता हूँ और निम्नलिखित कार्य करता हूँ:

हम जांचते हैं कि क्या राज्य टर्मिनल है (क्रॉस की जीत, टोकन की जीत, ड्रा)।
यदि ऐसा है, तो इस बारे में जानकारी राज्य ऑब्जेक्ट में जोड़ें और समाप्त करें।
यदि नहीं, तो क्षेत्र की सभी कोशिकाओं से गुजरें।
क्षेत्र में प्रत्येक खाली सेल के लिए, एक नया गेम स्टेट बनाएं जिसमें वर्तमान खिलाड़ी ने इस सेल में कदम रखा, और अगले खिलाड़ी के लिए यह कदम पास हो गया।
वर्तमान स्थिति के moves क्षेत्र में, एक संभावित कदम का रिकॉर्ड जोड़ें। इस प्रविष्टि की कुंजी सेल इंडेक्स है, और मान नए राज्य का लिंक है।
हम सभी नए दिखाई दिए गए राज्यों के लिए इस एल्गोरिथम को पुनरावर्ती रूप से दोहराते हैं।

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

फिर, प्रत्येक गेम स्टेट ऑब्जेक्ट से, हम एक HTML पेज बनाते हैं। moves वस्तु के माध्यम से चलना, हम इन कक्षों में किए गए चाल के अनुरूप पृष्ठों के लिंक के साथ क्षेत्र के खाली कक्षों में भरते हैं। फिर हम फ़ील्ड के एक-आयामी सरणी को दो-आयामी HTML तालिका में बदल देते हैं। हम सभी प्रकार की सुखद चीजों को जोड़ते हैं जैसे निर्देश जो खिलाड़ी चलता है, और होम पेज से लिंक करता है - और वॉइला!

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

सबसे पहले, प्रत्येक खेल राज्य के लिए पुनरावर्ती (वास्तव में नहीं), खेल के अपेक्षित परिणाम की गणना की जाती है - एक जो कि प्राप्त की जाएगी यदि दोनों पक्ष पूरी तरह से खेलते हैं।
फिर गेम ट्री को निम्नानुसार संशोधित किया गया है: खिलाड़ी की चाल के बजाय, अब हम एक साथ दो चाल चलते हैं। दूसरी चाल कृत्रिम बुद्धिमत्ता की चाल है। इसके अलावा, खिलाड़ी के कदम के सभी संभावित उत्तरों से, सबसे अच्छा अपेक्षित परिणाम वाला चयन किया जाता है। इस प्रकार, एक खाली पिंजरे पर पके हुए, खिलाड़ी तुरंत उस स्थिति में जाता है जहां एक क्रॉस (या शून्य) इस सेल में दिखाई दिया, और एक शून्य (या क्रॉस) किसी अन्य सेल में दिखाई दिया।
सभी गेम में एआई को शामिल नहीं करने वाले मूव्स को बेरहमी से खारिज कर दिया जाता है।
फिर HTML एक अलग फ़ोल्डर में शेष पदों से उत्पन्न होता है - बिल्कुल दो खिलाड़ियों के मामले के लिए जैसा।

समान सिद्धांतों से, आप बहुत बड़े पेड़ के साथ किसी भी खेल को लागू नहीं कर सकते। हालांकि, अगर मैं इस तरह से शतरंज बनाना चाहता हूं, तो मुझे ऐसा लगता है कि गितुब इस बात की मेजबानी करने से इनकार कर देगा)

गिथब का बोलना: आप वहां पूरा कोड देख सकते हैं (लिंक गेम के मुख्य पृष्ठ पर है)। इस पर, सामान्य तौर पर, यह सब है। अलविदा, लड़कियों और लड़कों। फिर मिलते हैं।

पीएस की जगह विंडोज-स्टाइल से यूनिक्स-स्टाइल तक की लाइन ब्रेक एक बहुत लंबा समय है जब यह 6 हजार फाइलों की बात आती है। मुझे कोड लिखने के चरण में इस बात का ध्यान नहीं रखने का पछतावा था, लेकिन फिर भी हिम्मत के साथ अंत तक हिम्मत जुटाई।

शुक्रवार जेएस: 0-लाइन जेएस और सीएसएस गेम

More articles: