👩‍👩‍👧‍👦 🧜🏼 🧚 हम शुद्ध जावास्क्रिप्ट का उपयोग करके एक टच टाइपिंग सिम्युलेटर लिख रहे हैं। भाग 1 🤙 🤛🏾 🚲

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

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

।

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

इसलिए, लेआउट के लिए रूपरेखा के रूप में, मैंने Bulma.css को चुना। बुल्मा काफी विविधतापूर्ण है, और इसकी मदद से आप अपने सीएसएस को कम से कम पहले चरण में लिख सकते हैं।

तो, चलो मुख्य पृष्ठ बनाकर शुरू करते हैं। सभी के लिए एक ही कोड पर जगह बर्बाद न करने के लिए, मैं कहूंगा कि head टैग में मैंने javascript , bulma और favicon फ़ाइल को कनेक्ट किया है।

 <body> <section class="hero is-primary is-large"> <!--    hero  bulma --> <div class="hero-head container"> <h1 class="label is-size-3 has-text-white promo">   </h1> <h3 class="label is-size-4 has-text-link has-text-centered"></h3> <progress id="prog" class="progress is-danger" value="0" max="20"></progress> <h3 class="label is-size-5 has-text-white has-text-centered begin">Press Enter to Start</h3> </div> <div class="hero-body has-background-grey-dark "> <div id="columns"> <div class="buttons columns is-half is-centered "> <!--        --> </div> </div> </div> </section> </body>

हम एक छोटा पैनल बनाते हैं जिसमें हमारे उपयोगकर्ता के लिए Enter कुंजी दबाकर खेलने का निमंत्रण है। buttons तत्व में, हम अपने बटन खींचेंगे, जो हमारे जेएस द्वारा यादृच्छिक रूप से उत्पन्न होगा। आदर्श रूप से, त्रुटियों की प्रगति खेल की शुरुआत से पहले छिपाई जानी चाहिए, शायद हम इसे अगले भाग में ठीक कर देंगे।

ठीक है, index.html तैयार है, और bulma ने सुंदरता और लेआउट का ध्यान रखा। अब हम अपने js में गोता लगा सकते हैं।

कीबोर्ड पर क्या कुंजी पहले प्रशिक्षित हैं? मुझे लगता है कि हर कोई जानता है कि आपकी तर्जनी उंगलियों को जे और एफ कीज़ पर झूठ बोलना चाहिए (हमारा आवेदन अंग्रेजी लेआउट को सबसे उपयोगी (1C प्रोग्रामर के रूप में पार्स करेगा, मुझे क्षमा करें यदि आप कर सकते हैं)। मध्य उंगलियां क्रमशः कश्मीर और डी पर होनी चाहिए, और इसके अलावा यह महत्वपूर्ण है कि प्रशिक्षण के दौरान हम स्पेस बार भी दबाएं। कुल, हमारे मूल संस्करण में, हमें 5 वर्णों की आवश्यकता होगी।

जल्दी से नहीं कहा। हम एक सरणी बनाते हैं जिसमें हमारी सभी कुंजियाँ स्थित होती हैं। इसके अलावा, हम रंगों की एक सरणी बनाएंगे, क्योंकि सिम्युलेटर, जिसमें सभी अक्षर एक-रंग हैं, बहुत उबाऊ और असुविधाजनक है:

 let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link']; //  bulma,        //         ,       let str_arr = ['j', 'f', 'k', 'd', ' '];

खैर, रंगों और प्रतीकों के एक सेट के साथ, हमने फैसला किया। अगला, हमें आगे के काम के लिए आवश्यक सभी DOM तत्व मिलते हैं:

 let begin = document.querySelector(".begin"); //    ,     Enter   . let progress = document.getElementById("prog"); //      let buttons = document.querySelector('.buttons'); //

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

 function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }

ठीक है, अब सब कुछ तैयार है, डोम तत्वों का उत्पादन शुरू करने का समय आ गया है:

 function drawBoard() { for (let index = 0; index < 20; index++) { //           let rand = getRandomInt(colors.length); //          ,  ,    buttons.insertAdjacentHTML("afterbegin", `<button class='game-buttons button is-large ${colors[rand]}' id='${str_arr[rand]}'>${str_arr[rand]} </button>`); } }

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

 document.addEventListener('keydown', StartGame, { once: true // once        });

और यहाँ StartGame फ़ंक्शन StartGame :

 function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none"; //    mainGame(); //   } }

mainGame , हम दबाए गए सभी बटन सुनते हैं ताकि हम यह समझ सकें कि उपयोगकर्ता कीबोर्ड पर बटन सही से दबाता है या:

 function mainGame() { document.addEventListener('keyup', press); //    ,         }

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

 var count_right = 0; var errors_count = 0;

ठीक है, सबसे बुनियादी और स्वादिष्ट आगे है। बहुमुखी प्रतिभा के लिए, ताकि हमारा आवेदन रूसी और अंग्रेजी लेआउट पर इतना निर्भर न हो, हम keyCode उपयोग कर सकते हैं, लेकिन यह कोड को जटिल करेगा। हमें सभी उत्पन्न वर्णों को प्राप्त करने की आवश्यकता है और, यदि कीबोर्ड पर कुंजी हमारे तत्व की आईडी से मेल खाती है (ध्यान दें, मैंने प्रत्येक तत्व के लिए drawBoard() भी drawBoard() जो तत्व की पाठ सामग्री के बराबर है। बिना किसी संदेह के, आप केवल textContent , और के माध्यम से सामग्री पढ़ सकते हैं। भविष्य में, शायद हम ऐसा करेंगे), तो तत्व हटा दिया गया है। एक अन्य मामले में, एक वैरिएबल का मान जोड़ें जो उपयोगकर्ता की त्रुटियों पर विचार करता है और उन्हें progress अंदर लिखता है:

 function press(e) { let elements_arr = document.querySelectorAll(".game-buttons"); //     if (e.key == elements_arr[0].id) { //      querySelector,      elements_arr[0].remove(); count_right++; //    } else { errors_count++; //   progress.value = errors_count; if (errors_count > 20) { //         ,   let fail = confirm("Game over!    ?"); if (fail) { document.location.reload(); //         } else { //      document.addEventListener('keyup', press); } } } if (count_right == 20) { alert(" !"); let win = confirm("  ?"); if(win){ drawBoard(); begin.style.display = "none"; //    mainGame(); //   } } }

वाह! अब हमारा आवेदन तैयार होना चाहिए और इसका परीक्षण किया जा सकता है।

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

यहाँ ऐसी सामग्री है। हम आपको याद दिलाते हैं कि यह सामग्री एक स्वतंत्र लेखक द्वारा लिखी गई थी और यह शैक्षिक प्रक्रिया से संबंधित नहीं है। यदि आप शिक्षा में रुचि रखते हैं और पाठ्यक्रम के बारे में अधिक जानना चाहते हैं, तो हम आपको एक खुले दिन के लिए आमंत्रित करते हैं , जो सोमवार को आयोजित किया जाएगा ।

हम शुद्ध जावास्क्रिप्ट का उपयोग करके एक टच टाइपिंग सिम्युलेटर लिख रहे हैं। भाग 1

More articles: