😷 😜 🐲 शुद्ध जावास्क्रिप्ट का उपयोग करके एक टच टाइपिंग सिम्युलेटर लिखना: भाग 2 👥 🥨 😥

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

पहला भाग यहाँ पढ़ा जा सकता है।

सभी को नमस्कार! हम देशी जावास्क्रिप्ट का उपयोग करके एक देशी टाइपिंग सिम्युलेटर लिखना जारी रखते हैं। पिछले भाग में, हमने एप्लिकेशन का मुख्य तर्क बनाया, जिसमें एंटर कुंजी दबाकर, बीस अक्षरों का पहला स्तर लोड किया गया था, जिसे पढ़ते समय टच प्रिंटिंग की विधि का अध्ययन सबसे पहले किया जाता है (जे, के, एफ, डी)। पहले संस्करण के कामकाजी संस्करण को यहां देखा जा सकता है । हालाँकि, हमारे पास अभी भी एप्लिकेशन को बेहतर बनाने के लिए कुछ कार्य हैं।

आइए टीओआर को समझते हैं कि वास्तव में हम क्या हासिल करना चाहते हैं:

“गेम की शुरुआत में, उपयोगकर्ता द्वारा इनवाइट दर्ज करने के बाद, जो बाएं से दाएं की ओर एनिमेटेड रूप से चलता है, पहले से तीसरे स्तर को क्रमिक रूप से लोड किया जाता है। सही बटन दबाकर, एक सकारात्मक गेम सिग्नल खेला जाता है, एक त्रुटि के मामले में, एक नकारात्मक गेम सिग्नल खेला जाता है। पहले और दूसरे स्तर में साधारण प्रतीक हैं, तीसरे स्तर में बोनस है, जिसमें प्रतीक विशेष रूप से प्रोग्रामर (बल्कि हास्य) के लिए हैं। स्तर के अंत में, हमारे पास एक परिणाम विंडो है जिसे localStorage से लिखा और लिया गया है, यह विंडो प्लेयर त्रुटियों की संख्या और गेम सत्र के अंतिम समय को प्रदर्शित करती है। बहुत अधिक त्रुटियों के मामले में, अगले स्तर पर सफल संक्रमण के मामले में, नुकसान की आवाज बजाई जाती है - एक प्रमुख राग। "

ठीक है, अब हमारे पास TK है, चलो प्रोग्रामिंग शुरू करते हैं। जाहिर है, हमारे कोड बेस में काफी वृद्धि होगी, जिसका अर्थ है कि बहुत सारे कोड का सामना करने और आवश्यक पुस्तकालयों को आयात करने के लिए, हमें webpack आवश्यकता है। लेकिन चलो लेआउट से शुरू करते हैं और देखते हैं कि क्या परिवर्तन हुए हैं। मैं head की सामग्री नहीं दूंगा, क्योंकि केवल एक चीज जो वहां बदल गई है, वह यह है कि अब हम dist/code.js द्वारा संसाधित dist/code.js से जावास्क्रिप्ट खींच रहे हैं, लेकिन बाकी सब कुछ वैसा dist/code.js ।

पृष्ठ के मुख्य भाग में, मैंने एक मोडल विंडो जोड़ी जो अभी दिखाई नहीं दे रही है और जिसमें हम table में गेम पास करने के परिणाम लिखेंगे:

 <body class="has-background-black-bis"> <div class="modal"> <div class="modal-background has-background-link"></div> <div class="modal-content has-background-white"> <h3 class="is-size-4">   </h3> <table class="table"> <thead> <tr> <th>  </th> <th>  </th> </tr> </thead> <tbody> <tr class="target_error"> <!--      --> </tr> </tbody> </table> <div> </div> <button class="modal-close is-large" aria-label="close"></button> </div> </div>

बेशक, इस तथ्य पर कि हमारे पास पृष्ठ पर एक मोडल विंडो सही होगी, स्पा प्रेमियों के लिए शारीरिक दर्द का कारण बनता है - चौखटे (आखिरकार, वे बड़े करीने से घटकों में यह सब करना चाहते हैं)। लेकिन मैं जेएस में इस सामग्री की पीढ़ी को चित्रित नहीं करना चाहता था। आइए हमारे html के अगले भाग को देखें:

  <section class="hero is-primary is-large"> <div class="hero-head container"> <h1 class="label is-size-4 has-text-white promo">   3000</h1> <!--   --> <h3 class="label is-size-4 has-text-danger has-text-centered name-level"></h3> <div class="error-panel is-hidden"> <!--       --> <progress id="prog" class="progress is-danger" value="0" max="20"> </progress> </div> </div> <div class="hero-body has-background-black-bis main-board"> <div id="columns"> <h3 class="label is-size-2 has-text-white has-text-centered begin anim-elem">Press Enter to Start</h3> <div class="buttons columns is-half is-centered"> <!--        --> </div> </div> </div> </section> </body>

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

बस JS शुरू करने के बारे में, मैं थोड़ा सीएसएस जोड़ने के लिए थोड़ा सा जो मैं Bulma साथ नहीं कर सकता था उसे जोड़ने के लिए Bulma :

 body{ max-height:40vh !important; } .promo{ margin-top: 1rem; }

ठीक है जे एस मैंने सबसे सरल वेबपैक विन्यास लिखा है। webpack प्रलेखन के पहले पृष्ठ पर जो है, वह केवल फाइलों में ट्रैकिंग परिवर्तन की उपस्थिति में भिन्न होता है। अधिकांश भाग के लिए, मुझे मुख्य index.js फ़ाइल में आयात का उपयोग करने के लिए इसकी आवश्यकता है, और आखिरकार एक छोटा फ़ाइल है:

 const path = require("path"); module.exports = { entry: './js/index.js', output: { filename: 'code.js', path: path.resolve(__dirname, 'dist'), }, watch: true, }

महान, और अब हम जेएस संरचना पर आगे बढ़ सकते हैं। एनिमेशन के लिए, मैंने anime.js का उपयोग करने का फैसला किया - हालांकि मैं अच्छी तरह से समझता हूं कि एनीमेशन की मात्रा जिसे हमें 10 लाइनों में सीएसएस में किया जा सकता है। शायद भविष्य में हम और अधिक एनिमेशन जोड़ेंगे, इसलिए मैंने पूरे anime.es.js खींच लिया। anime.es.js इसके अलावा, मैंने एक यादृच्छिक फ़ाइल पीढ़ी फ़ंक्शन को एक अलग फ़ाइल में जोड़ा - विशुद्ध रूप से सुविधा के लिए:

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

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

 export default function showResult(target_El, content){ localStorage.setItem(+new Date, content); (function drawOnLoad() { let temp_arr = []; for (let i = 0; i < localStorage.length; i++) { temp_arr.push(+localStorage.key(i)); } temp_arr.sort(); for(let i = 0; i< temp_arr.length; i++){ let item_time = new Date(temp_arr[i]); target_El.insertAdjacentHTML('afterend', `<th>${item_time.getDate()} / ${item_time.getMonth()} ${item_time.getHours()} : ${item_time.getMinutes()} </th> <th> ${localStorage.getItem(String(temp_arr[i]))}</th> `); } })(); }

महान, अतिरिक्त फ़ाइलों के साथ, आखिरकार हम मुख्य फ़ाइल पर जा सकते हैं। पहले हम आयात करते हैं:

  import anime from "./anime.es"; import getRandomInt from "./random"; import showResult from "./showResult";

पुस्तकालय प्राप्त हुए। चलिए शुरू से ही हमारे आमंत्रित शिलालेख का एक एनीमेशन बनाते हैं:

 anime({ targets: ".anim-elem", translateX: [-50, 50], easing: "linear", direction: "alternate", duration: 1000, loop: true });

सुपर! अंत में, आवेदन ही। मैंने सर्वर के संचालन को चित्रित करने के लिए सभी डेटा को json में स्थानांतरित करने का निर्णय लिया, जो कि इस तरह के खेल को उत्पन्न कर सकता है, उदाहरण के लिए, हंगेरियन, रूसी या सरलीकृत चीनी में - संक्षेप में, वर्णों के किसी भी सेट के साथ (लेकिन इससे पहले, निश्चित रूप से, विकसित और विकसित)। fetch पर डेटा प्राप्त करने के बाद, फ़ंक्शन को खुद को अतुल्यकालिक रूप से कहा जाता है, जो हमारे खेल को शुरू करेगा। मैंने JSON को gist.github ( यहां देखा जा सकता है )

 function get_data() { fetch( // "    ,   json" ) //     json  -     , //  -       .then(res => res.json()) .then(data => { //    ,     read_data(data); }) .catch(err => { console.warn(" "); console.warn(err.name); //   }); } get_data(); //      , ...

जैसा कि पाठक पहले ही समझ चुके हैं, हमारे अतुल्यकालिक read_data फ़ंक्शन में खेल के अन्य सभी कार्य स्थित होंगे। इसलिए, बाकी कोड इस फ़ंक्शन के अंदर पहले से ही चले जाएंगे:

 var number_of_level = 0; //        0 var error_sound = new Audio("sounds/error_sound.wav"); var fail_sound = new Audio("sounds/fail_sound.wav"); //    var press_sound = new Audio("sounds/press_sound.wav"); var succes_sound = new Audio("sounds/succes_sound.wav"); //       .

मुझे इंटरनेट पर मुफ्त बैंकों में 8-बिट ध्वनियां मिलीं। आइए अब उन तत्वों को देखें जो मुझे DOM ट्री से प्राप्त हुए हैं:

  let modal = document.querySelector(".modal"); //      var target_error = document.querySelector(".target_error"); //          let error_panel = document.querySelector(".error-panel"); //    let begin = document.querySelector(".begin"); //    ,     enter   .      let progress = document.getElementById("prog"); //     let buttons = document.querySelector(".buttons"); //         let name_level = document.querySelector(".name-level"); //       let modal_close = document.querySelector(".modal-close"); // ,                document.addEventListener("keydown", StartGame, { once: true // once           //     ,      });

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

  function StartGame(e) { if (e.key == "Enter") { error_panel.classList.remove("is-hidden"); //     press_sound.play(); begin.remove(); //    mainGame(); //    } }

ठीक है, अगले अक्षरों की ड्राइंग आती है। पिछले संस्करण से सभी अंतर यह है कि अब हम JSON ऑब्जेक्ट से डेटा लेते हैं:

  function drawBoard(info) { let str_arr = info.level_info[number_of_level].symbols; //    -     ,      webpack, .... name_level.innerHTML = info.level_info[number_of_level].name_level; let col_arr = info.symbol_colors; for (let i = 0; i < 20; i++) { //    20  let rand = getRandomInt(str_arr.length); buttons.insertAdjacentHTML( "afterbegin", `<button class='game-button button is-large ${col_arr[rand]}' id='${str_arr[rand]}'> ${str_arr[rand]}</button>` ); } }

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

  function mainGame() { drawBoard(information); document.addEventListener("keydown", press);

फिर हमारे कोड में अंतिम फ़ंक्शन press जाएगा, जिसमें हम नुकसान का निर्धारण करते हैं और जीतते हैं। यदि उपयोगकर्ता ने बहुत अधिक त्रुटियां कीं, तो आपको उसे यह बताने की आवश्यकता है कि वह हार गया, और वह धुन बजाएं जो "फियास्को" के लिए जिम्मेदार है। स्तर का एक सफल अंत तब होता है जब चर count_right उन वर्णों की संख्या के बराबर मूल्य प्राप्त करता है जो हम उत्पन्न करते हैं (20)। मुझे पता है कि अगले स्तर पर परिवर्तन तब किया जा सकता है जब elements_arr की elements_arr सरणी 0 के बराबर हो जाती है, लेकिन अब हमारे पास ऐसा समाधान है। यदि उपयोगकर्ता ने सभी तीन स्तरों को सफलतापूर्वक पूरा कर लिया है, तो एक परिणाम बोर्ड त्रुटियों की संख्या के साथ प्रदर्शित होता है:

  var errors_count = 0; var count_right = 0; function press(e) { let elements_arr = document.querySelectorAll(".game-button"); //      if (e.key == elements_arr[0].id) { //      querySelector,      elements_arr[0].remove(); count_right++; //    press_sound.play(); } else { errors_count++; //   error_sound.play(); progress.value = errors_count; //     if (errors_count > 20) { //         ,   fail_sound.play(); //    name_level.innerHTML = ' !'; setTimeout(() => { window.location.reload(); //       }, 2500); } } if (count_right == 20) { count_right = 0; number_of_level++; if (number_of_level == 3) { //     3  modal.classList.add("is-active"); //     showResult(target_error, errors_count); modal_close.onclick = async function() { modal.classList.remove("is-active"); window.location.reload(); //,     ,    }; } succes_sound.play(); mainGame(); } } } //      ,

यह हमारे लेख का मुख्य भाग है। यदि आप आवेदन के स्रोत कोड में रुचि रखते हैं, तो आप इसे यहां पा सकते हैं। यदि आप हमारे आवेदन को कार्रवाई में खेलना और देखना चाहते हैं, तो यहां स्वागत है । कृपया सभी कीड़े और प्रश्न या तो टिप्पणियों में या तुरंत गितुब पर रिपॉजिटरी के issues में लिखें।

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

खैर, हम पाठ्यक्रम पर सभी की प्रतीक्षा कर रहे हैं!

शुद्ध जावास्क्रिप्ट का उपयोग करके एक टच टाइपिंग सिम्युलेटर लिखना: भाग 2

More articles: