जावास्क्रिप्ट के साथ वर्डले क्लोन कैसे बनाएं

वर्ल्ड एक लोकप्रिय गेम है जिसने 2022 की शुरुआत में दुनिया में तहलका मचा दिया। वर्डले गेम को दोबारा बनाना या कम से कम इसका एक सरल संस्करण बनाना कुछ ऐसा है जिस पर उन डेवलपर्स को विचार करना चाहिए जो जावास्क्रिप्ट में नए हैं।

वर्डले कैसे काम करता है

वर्डले में पांच अक्षर का एक गुप्त शब्द है। खिलाड़ी के पास छह प्रयास होते हैं और उसे अलग-अलग पांच अक्षरों वाले शब्दों का अनुमान लगाना होता है, यह देखने के लिए कि वे गुप्त शब्द के कितने करीब हैं।

खिलाड़ी द्वारा अनुमान प्रस्तुत करने के बाद, वर्डले रंगों का उपयोग करके खिलाड़ी को बताता है कि वे गुप्त शब्द के कितने करीब हैं। यदि किसी अक्षर का रंग पीला है, तो इसका मतलब है कि वह अक्षर गुप्त शब्द में है, लेकिन गलत स्थिति में है।

हरा रंग उपयोगकर्ता को बताता है कि अक्षर गुप्त शब्द में है और सही स्थिति में है, जबकि ग्रे रंग खिलाड़ी को बताता है कि अक्षर शब्द में नहीं है।

विकास सर्वर की स्थापना

प्रोजेक्ट का उपयोग करता है वाइट बिल्ड टूल के माध्यम से कमांड लाइन इंटरफ़ेस (सीएलआई) मचान के लिए. सुनिश्चित करें कि आपके कंप्यूटर पर यार्न स्थापित है क्योंकि यह आम तौर पर इससे तेज़ है नोड पैकेज मैनेजर (एनपीएम). अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

यार्न वाइट बनाएं

यह एक नया Vite प्रोजेक्ट बनाएगा. रूपरेखा होनी चाहिए वनीला और वैरिएंट को सेट किया जाना चाहिए जावास्क्रिप्ट. अब चलाएँ:

धागा

यह प्रोजेक्ट को कार्यान्वित करने के लिए आवश्यक सभी निर्भरताएँ स्थापित करेगा। इस स्थापना के बाद, विकास सर्वर शुरू करने के लिए निम्नलिखित कमांड चलाएँ:

यार्न देव

गेम सेट करना और कीबोर्ड डिज़ाइन करना

अपने कोड संपादक में प्रोजेक्ट खोलें, इसकी सामग्री साफ़ करें मुख्य.जे.एस फ़ाइल, और सुनिश्चित करें कि आपका प्रोजेक्ट फ़ोल्डर इस तरह दिखता है:

अब, की सामग्री को बदलें Index.html निम्नलिखित बॉयलरप्लेट कोड के साथ फ़ाइल करें:

एचटीएमएल>
<एचटीएमएललैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8" />
<जोड़नारिले="आइकन"प्रकार="छवि/एसवीजी+एक्सएमएल"href="/vite.svg" />
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1.0" />
<शीर्षक>जेएस वर्डलेशीर्षक>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<डिव>
<एच 1>वर्डले क्लोनएच 1>
<डिवपहचान="नियंत्रण">
<बटनपहचान="पुनरारंभ-बीटीएन">REPLAYबटन>
<बटनपहचान="शो-बीटीएन">उत्तर दिखानेबटन>
डिव>
<डिवपहचान="संदेश">कृपया प्रतीक्षा करें। खेल लोड कर रहा है...डिव>
डिव>
<डिवपहचान="इंटरफेस">
<डिवपहचान="तख़्ता">डिव>
<डिवकक्षा="कीबोर्ड">डिव>
डिव>
डिव>
<लिखी हुई कहानीप्रकार="मापांक"स्रोत="/main.js">लिखी हुई कहानी>
शरीर>
एचटीएमएल>

सीएसएस के लिए, इस प्रोजेक्ट के GitHub रिपॉजिटरी पर जाएं और इसकी सामग्री को कॉपी करें स्टाइल.सीएसएस अपने में फ़ाइल करें स्टाइल.सीएसएस फ़ाइल।

अब, टर्मिनल में, निम्नलिखित कमांड चलाकर टोस्टिफ़ाई एनपीएम पैकेज स्थापित करें:

यार्न टोस्टिफ़ाइ जोड़ें -एस

टोस्टिफ़ाई एक लोकप्रिय जावास्क्रिप्ट पैकेज है जो आपको उपयोगकर्ता को अलर्ट दिखाने की अनुमति देता है। अगला, में मुख्य.जे.एस फ़ाइल, आयात करें स्टाइल.सीएसएस फ़ाइल और टोस्टिफ़ाई करें उपयोगिता।

आयात"./style.css"
आयात टोस्टिफ़ाई करें से'टोस्टिफ़ाइ-जेएस'

DOM तत्वों के साथ इंटरेक्शन को आसान बनाने के लिए निम्नलिखित वेरिएबल्स को परिभाषित करें:

होने देना बोर्ड = दस्तावेज़.क्वेरी चयनकर्ता("#तख़्ता");
होने देना संदेश = दस्तावेज़.क्वेरी चयनकर्ता("#संदेश");
होने देना चाबियाँ = "QWERTYUIOPASDFGHJKLZXCVBNM"।विभाजित करना("");
होने देना पुनरारंभबीटीएन = दस्तावेज़.क्वेरी चयनकर्ता("#पुनरारंभ-बीटीएन");
होने देना शोबीटीएन = दस्तावेज़.क्वेरी चयनकर्ता("#शो-बीटीएन");
showBtn.setAttribute("अक्षम", "सत्य");
चाबियाँ.पुश("बैकस्पेस");
होने देना कीबोर्ड = दस्तावेज़.क्वेरी चयनकर्ता(".कीबोर्ड");

गेम बोर्ड की स्थापना

चूंकि वर्डले एक गेम है जहां उपयोगकर्ता को छह कोशिशों में पांच अक्षरों वाले शब्द का अनुमान लगाना होता है, जिसे वेरिएबल कहा जाता है बोर्डसामग्री जिसमें छह सारणियों की एक सारणी है। फिर वेरिएबल्स को परिभाषित करें वर्तमान पंक्ति और वर्तमान बॉक्स इसे पार करना आसान बनाने के लिए बोर्डसामग्री.

होने देना बोर्डसामग्री = [
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0],
];
होने देना वर्तमान पंक्ति = 0;
होने देना करंटबॉक्स = 0;
होने देना गुप्त शब्द;

HTML तत्वों का उपयोग करके छह पंक्तियों में से प्रत्येक में पांच बॉक्स वाले बोर्ड को प्रस्तुत करने के लिए, तत्वों को पुनरावृत्त करने और बनाने के लिए नेस्टेड लूप का उपयोग करें। अंत में, उन्हें बोर्ड में जोड़ें।

के लिए (होने देना मैं = 0; मैं <= 5; मैं++) {
होने देना पंक्ति = दस्तावेज़.createElement('div')
के लिए (होने देना य = 0; य <= 4; य++) {
होने देना डिब्बा= दस्तावेज़.createElement('अवधि');
 row.appendChild (बॉक्स);
 पंक्ति.वर्गनाम = `पंक्ति-${मैं + 1}`
 }
 बोर्ड.एपेंड चाइल्ड (पंक्ति);
}

कीबोर्ड जोड़ना और कीबोर्ड इनपुट सुनना

कीबोर्ड बनाने के लिए, कुंजियों का उपयोग करके पुनरावृति करें प्रत्येक के लिए, प्रत्येक प्रविष्टि के लिए एक बटन तत्व बनाना। बटन का टेक्स्ट इस पर सेट करें बैकस्पेस यदि प्रविष्टि है *, अन्यथा इसे प्रविष्टि मान पर सेट करें।

असाइन करें चाबी बटन पर क्लास लगाएं, और सेट करें डेटा-कुंजी अपरकेस प्रविष्टि मान के लिए विशेषता। इसके बाद, फ़ंक्शन को कॉल करने वाले बटन पर एक क्लिक इवेंट श्रोता जोड़ें कुंजी डालें अपरकेस प्रविष्टि मान के साथ.

कुंजियाँ.प्रत्येक के लिए(प्रवेश => {
होने देना कुंजी = दस्तावेज़.createElement("बटन");
अगर (प्रवेश "*") {
 key.innerText = "बैकस्पेस";
 } अन्य {
 key.innerText = प्रविष्टि;
 }
 key.className = "चाबी";
 key.setविशेषता("डेटा-कुंजी", Entry.toUpperCase());
 key.addEventListener("क्लिक करें", () => {
 इन्सर्टकी (entry.toUpperCase())
 सेटटाइमआउट(() => {
दस्तावेज़.क्वेरी चयनकर्ता(`बटन[डेटा-कुंजी=${entry.toUpperCase()}]`.धुंधला();
 }, 250)
 })
 कीबोर्ड.जोड़ें (कुंजी);
})

एपीआई से एक नया शब्द प्राप्त करना

जब उपयोगकर्ता पहली बार गेम लोड करता है, तो गेम को एक नया पांच-अक्षर वाला शब्द लाना चाहिए यादृच्छिक शब्द एपीआई. फिर इस शब्द को इसमें संग्रहीत किया जाता है गुप्त शब्द चर।

समारोहन्यूवर्ड प्राप्त करें() {
asyncसमारोहफ़ेचवर्ड() {
कोशिश {
कॉन्स्ट प्रतिक्रिया = इंतजार लाना(" https://random-word-api.herokuapp.com/word? लंबाई=5");
अगर (प्रतिक्रिया.ओके) {
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया.json();
वापस करना आंकड़े;
 } अन्य {
फेंकनानयागलती("कुछ गलत हो गया!")
 }
 } पकड़ना (गलती) {
 message.innerText = `कुछ ग़लत हो गया. \एन${त्रुटि}\nअपना इंटरनेट कनेक्शन जांचें।`;
 }
 }
 फ़ेचवर्ड().तब(आंकड़े => {
 सीक्रेटवर्ड = डेटा[0].toUpperCase();
 मुख्य();
 })
}

उपरोक्त कोड ब्लॉक में, मुख्य यदि यादृच्छिक शब्द सफलतापूर्वक प्राप्त हो जाता है तो फ़ंक्शन चलता है। ए को परिभाषित करें मुख्य के ठीक नीचे कार्य करता है न्यूवर्ड प्राप्त करें समारोह:

समारोहमुख्य(){
}

बोर्ड पर प्रत्येक बॉक्स को स्टाइल करने के लिए, आपको प्रत्येक पंक्ति में सभी बॉक्सों की एक सूची की आवश्यकता होगी। एक चर घोषित करें, पंक्ति जो DOM में सभी पंक्तियों को पकड़ लेता है। इसके अलावा, सेट करें संदेश शैली प्रदर्शित करें कोई नहीं:

 पंक्तियाँ.प्रत्येक के लिए(पंक्ति => [...पंक्ति.बच्चे].प्रत्येक के लिए(बच्चा => बक्से.पुश (बच्चा)))
 बक्से.प्रत्येक के लिए((डिब्बा) => {
 बॉक्स.क्लासलिस्ट.जोड़ें("खाली");
 })
 message.style.display= "कोई नहीं";

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

खिड़की.addEventListener('तनाव के स्थिति में', (ई) => {
अगर (isValidCharacter (e.key)) {
दस्तावेज़.क्वेरी चयनकर्ता(`बटन[डेटा-कुंजी=${e.key.toUpperCase()}]`)।केंद्र();
दस्तावेज़.क्वेरी चयनकर्ता(`बटन[डेटा-कुंजी=${e.key.toUpperCase()}]`.क्लिक();
 सेटटाइमआउट(() => {
दस्तावेज़.क्वेरी चयनकर्ता(`बटन[डेटा-कुंजी=${e.key.toUpperCase()}]`.धुंधला();
 }, 250)
 }
 })

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

क्लिक करना पुनरारंभ करेंबीटीएन पृष्ठ पुनः लोड करता है. यह भी सुनिश्चित करें कि आप एक शामिल करें वैधचरित्र है यह जाँचने के लिए फ़ंक्शन कि क्या कोई कुंजी वैध वर्ण है।

 showBtn.addEventListener('क्लिक करें', () => {
 टोस्टिफ़ाइ({
 मूलपाठ: `ठीक है ठीक है! जवाब है ${secretWord}`,
 अवधि: 2500,
 कक्षा का नाम: "चेतावनी",
 }).शोटोस्ट();
 })
 restartBtn.addEventListener('क्लिक करें', () => {
 स्थान.पुनः लोड();
 })
समारोहवैधचरित्र है(वैल) {
वापस करना (वैल.मैच(/^[a-zA-Z]+$/) && (वैल.लेंथ 1 || वैल "बैकस्पेस"))
 }

इसके बाहर मुख्य फ़ंक्शन, एक बनाएं रेंडरबॉक्स कार्य करें और तीन पैरामीटर प्रदान करें: पंक्ति (पंक्ति संख्या), डिब्बा (पंक्ति के भीतर बॉक्स इंडेक्स), और आंकड़े (अद्यतन करने के लिए पाठ्य सामग्री)।

समारोहरेंडरबॉक्स(पंक्ति, बॉक्स, डेटा) {
 [...दस्तावेज़.querySelector(`.पंक्ति-${पंक्ति}`.children][बॉक्स].innerText = डेटा;
}

एक फ़ंक्शन के साथ कीबोर्ड इनपुट को संभालना

मुख्य इनपुट को संभालने और बोर्ड को अद्यतन करने के लिए, एक बनाएं कुंजी डालें ए के साथ कार्य करें चाबी पैरामीटर. फ़ंक्शन को पारित पैरामीटर के अनुसार व्यवहार करना चाहिए।

समारोहकुंजी डालें(चाबी) {
अगर (चाबी "बैकस्पेस".toUpperCase() && currentRow  बोर्डकंटेंट[करंटरो][करंटबॉक्स] = 0;
अगर (करंटबॉक्स!== 0) {
 करंटबॉक्स--;
 रेंडरबॉक्स (वर्तमान पंक्ति + 1, करंटबॉक्स, "");
 }
 } अन्य {
अगर (वर्तमान पंक्ति  बोर्डकंटेंट[करंटरो][करंटबॉक्स] = कुंजी;
 रेंडरबॉक्स (वर्तमान पंक्ति + 1, करंटबॉक्स, कुंजी);
 करंटबॉक्स++;
 }
अगर (currentRow 0) {
 मूल्यांकन करें (वर्तमान पंक्ति, कुंजी);
 करंटबॉक्स = 0;
 वर्तमान पंक्ति++;
 }
 }
}

खिलाड़ी के अनुमान का मूल्यांकन

एक बनाएं मूल्यांकन करना फ़ंक्शन जो पंक्ति पैरामीटर स्वीकार करता है। यह फ़ंक्शन खिलाड़ी के अनुमान का मूल्यांकन करने के लिए ज़िम्मेदार है।

समारोहमूल्यांकन करना(पंक्ति){
}

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

अगर (वर्तमान पंक्ति 4) {
 showBtn.removeAttribute('अक्षम')
}

फिर अनुमान चर और एक उत्तर चर को परिभाषित करें जो जांचता है कि अक्षर सही स्थिति में हैं या नहीं।

होने देना अनुमान = बोर्ड सामग्री[पंक्ति].जुड़ें(''.toUpperCase();
होने देना उत्तर = SecretWord.split("");

टाइल रंगने का एल्गोरिदम यहां काम आएगा। याद रखें कि यदि कोई टाइल या अक्षर शब्द में और सही स्थान पर है तो उसे हरा होना चाहिए।

यदि टाइल शब्द में है लेकिन गलत स्थान पर है, तो टाइल पीली है और अंत में, ग्रे रंग उन टाइलों के लिए है जो शब्द में नहीं हैं।

होने देना रंग = अनुमान
 ।विभाजित करना("")
 ।नक्शा((पत्र, आईडीएक्स) => पत्र == उत्तर[idx]? (उत्तर[idx] = असत्य): पत्र)
 ।नक्शा((पत्र, आईडीएक्स) =>
 पत्र
? (idx = उत्तर.indexOf (पत्र)) < 0
? "स्लेटी"
: (उत्तर[idx] = "पीला")
: "हरा"
);

ऊपर दिया गया कोड ब्लॉक तत्व-दर-तत्व तुलना करता है अनुमान सरणी और उत्तर सरणी. इस तुलना के परिणामों के आधार पर, कोड अद्यतन होता है रंग की सरणी.

अगला, परिभाषित करें a सेटरंग फ़ंक्शन जो इसमें ले सकता है रंग की एक पैरामीटर के रूप में सरणी बनाएं और टाइल्स को उचित रूप से रंगें:

समारोहसेटरंग(रंग की) {
 रंग.प्रत्येक के लिए((रंग, सूचकांक) => {
दस्तावेज़.क्वेरी चयनकर्ता(`बटन[डेटा-कुंजी=${अनुमान[सूचकांक].toUpperCase()}]`).style.backgroundColor = रंग;
दस्तावेज़.क्वेरी चयनकर्ता(`बटन[डेटा-कुंजी=${अनुमान[सूचकांक].toUpperCase()}]`).शैली.रंग= "काला";
 [...दस्तावेज़.querySelector(`.पंक्ति-${पंक्ति + 1}`.children][सूचकांक].style.backgroundColor = रंग;
 })
}

खेल अब पूरा हो गया है. अब आपको बस कॉल करना है न्यूवर्ड प्राप्त करें कार्य, और आप जाने के लिए तैयार हैं।

getNewWord();

बधाई हो, आपने अभी-अभी वर्डले को फिर से बनाया है।

गेम्स को दोबारा बनाकर अपने जावास्क्रिप्ट कौशल को अगले स्तर पर ले जाएं

एक शुरुआत के तौर पर नई भाषा सीखना आसान नहीं है। टिक-टैक-टो, हैंगमैन और वर्डले जैसे खेलों को जावास्क्रिप्ट जैसी भाषा में दोबारा बनाने से शुरुआती लोगों को अभ्यास में लाकर भाषा की अवधारणाओं में महारत हासिल करने में मदद मिल सकती है।