54 KiB

Raw Blame History

इव्हेंट्स वापरून गेम तयार करणे

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

तुम्ही स्वतः पाहणार आहात की वेब ब्राउझर तुमच्या JavaScript कोडशी "बोलतात" कसे. तुम्ही क्लिक करता, टाइप करता किंवा तुमचा माउस हलवता तेव्हा ब्राउझर तुमच्या कोडला लहान संदेश (ज्याला आपण इव्हेंट्स म्हणतो) पाठवत असतो आणि तुम्ही त्यावर कसे प्रतिसाद द्यायचे ते ठरवता!

जेव्हा आपण हे पूर्ण करू, तेव्हा तुम्ही एक खरा टायपिंग गेम तयार केला असेल जो तुमचा वेग आणि अचूकता ट्रॅक करतो. त्याहून महत्त्वाचे म्हणजे, तुम्ही प्रत्येक इंटरॅक्टिव्ह वेबसाइटच्या मूलभूत संकल्पना समजून घेतल्या असतील. चला सुरुवात करूया!

प्री-लेक्चर क्विझ

इव्हेंट-ड्रिव्हन प्रोग्रामिंग

तुमचा आवडता अ‍ॅप किंवा वेबसाइट विचार करा - त्याला जिवंत आणि प्रतिसादात्मक काय बनवते? हे सर्व तुम्ही काय करता यावर कसे प्रतिक्रिया देते याबद्दल आहे! प्रत्येक टॅप, क्लिक, स्वाइप किंवा कीस्ट्रोक "इव्हेंट" तयार करते आणि वेब डेव्हलपमेंटची खरी जादू तिथेच होते.

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

रेसिपीसारखा कोड वरून खाली चालवण्याऐवजी, आपण कोड लिहितो जो काहीतरी होण्याची वाट पाहतो. हे 1800 च्या दशकातील टेलिग्राफ ऑपरेटर कसे त्यांच्या मशीनजवळ बसून संदेश येताच प्रतिसाद देण्यासाठी तयार असायचे यासारखे आहे.

तर "इव्हेंट" नेमके काय आहे? साध्या भाषेत सांगायचे तर, ते काहीतरी घडते! तुम्ही बटण क्लिक करता तेव्हा - ते एक इव्हेंट आहे. तुम्ही अक्षर टाइप करता तेव्हा - ते एक इव्हेंट आहे. तुम्ही तुमचा माउस हलवता तेव्हा - ते आणखी एक इव्हेंट आहे.

इव्हेंट-ड्रिव्हन प्रोग्रामिंग आपल्याला आपला कोड ऐकण्यासाठी आणि प्रतिसाद देण्यासाठी सेट करण्यास अनुमती देते. आम्ही इव्हेंट लिसनर्स नावाच्या विशेष फंक्शन्स तयार करतो जे विशिष्ट गोष्टी घडण्याची वाट पाहतात आणि त्या घडल्यावर क्रियाशील होतात.

इव्हेंट लिसनर्सना तुमच्या कोडसाठी डोअरबेल असल्यासारखे समजा. तुम्ही डोअरबेल सेट करता (addEventListener()), त्याला कोणता आवाज ऐकायचा आहे ते सांगता (जसे 'क्लिक' किंवा 'कीप्रेस') आणि मग कोणीतरी ते वाजवते तेव्हा काय घडले पाहिजे ते निर्दिष्ट करता (तुमचे कस्टम फंक्शन).

इव्हेंट लिसनर्स कसे कार्य करतात:

ऐकतात विशिष्ट वापरकर्ता क्रिया जसे की क्लिक, कीस्ट्रोक्स किंवा माउस मूव्हमेंट्स
अंमलात आणतात तुमचा कस्टम कोड जेव्हा निर्दिष्ट इव्हेंट घडतो
त्वरित प्रतिसाद देतात वापरकर्ता इंटरॅक्शनला, एक सहज अनुभव तयार करतात
हँडल करतात एकाच घटकावर अनेक इव्हेंट्स वेगवेगळ्या लिसनर्स वापरून

NOTE: इव्हेंट लिसनर्स तयार करण्याचे अनेक मार्ग आहेत हे अधोरेखित करणे योग्य आहे. तुम्ही अज्ञात फंक्शन्स वापरू शकता किंवा नामांकित फंक्शन्स तयार करू शकता. तुम्ही विविध शॉर्टकट्स वापरू शकता, जसे की click प्रॉपर्टी सेट करणे किंवा addEventListener() वापरणे. आपल्या व्यायामामध्ये आपण addEventListener() आणि अज्ञात फंक्शन्सवर लक्ष केंद्रित करणार आहोत, कारण वेब डेव्हलपर्स वापरत असलेली ही सर्वात सामान्य तंत्र आहे. हे सर्वात लवचिक देखील आहे, कारण addEventListener() सर्व इव्हेंट्ससाठी कार्य करते आणि इव्हेंटचे नाव पॅरामीटर म्हणून प्रदान केले जाऊ शकते.

सामान्य इव्हेंट्स

वेब ब्राउझर तुम्ही ऐकण्यासाठी डझनभर वेगवेगळ्या इव्हेंट्स ऑफर करतात, परंतु बहुतेक इंटरॅक्टिव्ह अ‍ॅप्लिकेशन्स फक्त काही आवश्यक इव्हेंट्सवर अवलंबून असतात. या मुख्य इव्हेंट्स समजून घेणे तुम्हाला परिष्कृत वापरकर्ता इंटरॅक्शन तयार करण्याचा पाया देईल.

तुम्ही अ‍ॅप्लिकेशन तयार करताना ऐकण्यासाठी डझनभर इव्हेंट्स उपलब्ध आहेत. मूलतः वापरकर्ता पृष्ठावर जे काही करतो ते एक इव्हेंट निर्माण करते, जे तुम्हाला हवे असलेले अनुभव सुनिश्चित करण्यासाठी खूप शक्ती देते. सुदैवाने, तुम्हाला सामान्यतः फक्त काही इव्हेंट्सची आवश्यकता असते. येथे काही सामान्य इव्हेंट्स आहेत (ज्यामध्ये आपण गेम तयार करताना वापरणार आहोत):

इव्हेंट	वर्णन	सामान्य उपयोग
`click`	वापरकर्त्याने काहीतरी क्लिक केले	बटण, लिंक, इंटरॅक्टिव्ह घटक
`contextmenu`	वापरकर्त्याने उजव्या माउस बटणावर क्लिक केले	कस्टम राइट-क्लिक मेनू
`select`	वापरकर्त्याने काही टेक्स्ट हायलाइट केले	टेक्स्ट एडिटिंग, कॉपी ऑपरेशन्स
`input`	वापरकर्त्याने काही टेक्स्ट इनपुट केले	फॉर्म व्हॅलिडेशन, रिअल-टाइम सर्च

या इव्हेंट प्रकार समजून घेणे:

ट्रिगर होते जेव्हा वापरकर्ते तुमच्या पृष्ठावरील विशिष्ट घटकांशी संवाद साधतात
तपशीलवार माहिती प्रदान करते वापरकर्त्याच्या क्रियेबद्दल इव्हेंट ऑब्जेक्ट्सद्वारे
तुम्हाला सक्षम करते प्रतिसादात्मक, इंटरॅक्टिव्ह वेब अ‍ॅप्लिकेशन्स तयार करण्यासाठी
वेगवेगळ्या ब्राउझर्स आणि डिव्हाइसवर सातत्याने कार्य करते

गेम तयार करणे

आता तुम्हाला इव्हेंट्स कसे कार्य करतात हे समजले आहे, चला त्या ज्ञानाचा उपयोग करून काहीतरी उपयुक्त तयार करूया. आम्ही एक टायपिंग स्पीड गेम तयार करू जो इव्हेंट हँडलिंग प्रदर्शित करेल आणि तुम्हाला एक महत्त्वाचे डेव्हलपर कौशल्य विकसित करण्यात मदत करेल.

आम्ही एक गेम तयार करणार आहोत ज्याद्वारे JavaScript मध्ये इव्हेंट्स कसे कार्य करतात हे एक्सप्लोर करता येईल. आमचा गेम खेळाडूच्या टायपिंग कौशल्याची चाचणी घेईल, जे सर्व डेव्हलपर्ससाठी एक अतिशय उपयुक्त कौशल्य आहे. एक मजेदार तथ्य: आज आपण वापरत असलेली QWERTY कीबोर्ड लेआउट प्रत्यक्षात 1870 च्या दशकात टाइपरायटर्ससाठी डिझाइन केली गेली होती - आणि चांगले टायपिंग कौशल्य आजही प्रोग्रामर्ससाठी तितकेच मौल्यवान आहे! गेमचा सामान्य प्रवाह असा असेल:

flowchart TD
    A[Player clicks Start] --> B[Random quote displays]
    B --> C[Player types in textbox]
    C --> D{Word complete?}
    D -->|Yes| E[Highlight next word]
    D -->|No| F{Correct so far?}
    F -->|Yes| G[Keep normal styling]
    F -->|No| H[Show error styling]
    E --> I{Quote complete?}
    I -->|No| C
    I -->|Yes| J[Show success message with time]
    G --> C
    H --> C

आमचा गेम कसा कार्य करेल:

सुरू होतो जेव्हा खेळाडू स्टार्ट बटण क्लिक करतो आणि एक रँडम कोट दाखवतो
ट्रॅक करतो खेळाडूचा टायपिंग प्रगती शब्दानुसार रिअल-टाइममध्ये
हायलाइट करतो सध्याचा शब्द खेळाडूचे लक्ष केंद्रित करण्यासाठी
त्वरित व्हिज्युअल फीडबॅक प्रदान करतो टायपिंग एरर्ससाठी
गणना करतो आणि कोट पूर्ण झाल्यावर एकूण वेळ दाखवतो

चला आपला गेम तयार करूया आणि इव्हेंट्सबद्दल शिकूया!

फाइल स्ट्रक्चर

कोडिंग सुरू करण्यापूर्वी, चला व्यवस्थित होऊया! सुरुवातीपासून स्वच्छ फाइल स्ट्रक्चर असणे तुम्हाला नंतर डोकेदुखीपासून वाचवेल आणि तुमचा प्रोजेक्ट अधिक व्यावसायिक बनवेल. 😊

आपण फक्त तीन फाइल्ससह गोष्टी सोप्या ठेवणार आहोत: index.html आपल्या पृष्ठ संरचनेसाठी, script.js आपल्या सर्व गेम लॉजिकसाठी आणि style.css सर्वकाही चांगले दिसण्यासाठी. हे वेबच्या बहुतेक भागांना शक्ती देणारे क्लासिक त्रिकूट आहे!

कन्सोल किंवा टर्मिनल विंडो उघडून खालील कमांड जारी करून तुमच्या कामासाठी एक नवीन फोल्डर तयार करा:

# Linux or macOS
mkdir typing-game && cd typing-game

# Windows
md typing-game && cd typing-game

या कमांड्स काय करतात:

एक नवीन डिरेक्टरी तयार करते ज्याचे नाव typing-game आहे तुमच्या प्रोजेक्ट फाइल्ससाठी
स्वतःच नव्याने तयार केलेल्या डिरेक्टरीमध्ये जाते
तुमच्या गेम डेव्हलपमेंटसाठी एक स्वच्छ कार्यक्षेत्र सेट करते

Visual Studio Code उघडा:

code .

ही कमांड:

Visual Studio Code सुरू करते सध्याच्या डिरेक्टरीमध्ये
तुमच्या प्रोजेक्ट फोल्डरला एडिटरमध्ये उघडते
तुम्हाला आवश्यक असलेल्या सर्व डेव्हलपमेंट टूल्ससाठी प्रवेश प्रदान करते

Visual Studio Code मध्ये फोल्डरमध्ये खालील नावांच्या तीन फाइल्स जोडा:

index.html - तुमच्या गेमची संरचना आणि सामग्री समाविष्ट करते
script.js - सर्व गेम लॉजिक आणि इव्हेंट लिसनर्स हाताळते
style.css - व्हिज्युअल स्वरूप आणि स्टाइलिंग परिभाषित करते

वापरकर्ता इंटरफेस तयार करा

आता चला स्टेज तयार करूया जिथे आमच्या गेमची सर्व क्रिया होईल! याला स्पेसशिपसाठी कंट्रोल पॅनेल डिझाइन करणे असे समजा - आपल्याला खात्री करायची आहे की आमच्या खेळाडूंना आवश्यक असलेली प्रत्येक गोष्ट तिथेच आहे जिथे त्यांना अपेक्षित आहे.

चला आपल्या गेमला प्रत्यक्षात काय आवश्यक आहे ते शोधूया. जर तुम्ही टायपिंग गेम खेळत असाल, तर तुम्हाला स्क्रीनवर काय पाहायचे आहे? येथे आपल्याला काय आवश्यक आहे:

UI घटक	उद्देश	HTML घटक
कोट डिस्प्ले	टाइप करण्यासाठी टेक्स्ट दाखवतो	`<p>` `id="quote"` सह
मेसेज एरिया	स्टेटस आणि यशाचे संदेश दाखवतो	`<p>` `id="message"` सह
टेक्स्ट इनपुट	जिथे खेळाडू कोट टाइप करतो	`<input>` `id="typed-value"` सह
स्टार्ट बटण	गेम सुरू करतो	`<button>` `id="start"` सह

UI स्ट्रक्चर समजून घेणे:

सामग्री व्यवस्थित करते वरून खाली लॉजिकल पद्धतीने
युनिक IDs असाइन करते घटकांना JavaScript टार्गेटिंगसाठी
स्पष्ट व्हिज्युअल हायरार्की प्रदान करते चांगल्या वापरकर्ता अनुभवासाठी
समाविष्ट करते अ‍ॅक्सेसिबिलिटीसाठी सेमॅंटिक HTML घटक

त्यापैकी प्रत्येकाला IDs आवश्यक असतील जेणेकरून आपण त्यांना आपल्या JavaScript मध्ये काम करू शकू. आम्ही तयार करणार असलेल्या CSS आणि JavaScript फाइल्ससाठी संदर्भ देखील जोडू.

index.html नावाची नवीन फाइल तयार करा. खालील HTML जोडा:

<!-- inside index.html -->
<html>
<head>
  <title>Typing game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Typing game!</h1>
  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
  <p id="quote"></p> <!-- This will display our quote -->
  <p id="message"></p> <!-- This will display any status messages -->
  <div>
    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
    <button type="button" id="start">Start</button> <!-- To start the game -->
  </div>
  <script src="script.js"></script>
</body>
</html>

या HTML स्ट्रक्चरने काय साध्य केले आहे ते समजून घेणे:

CSS स्टाइलशीट लिंक करते <head> मध्ये स्टाइलिंगसाठी
स्पष्ट हेडिंग आणि सूचना तयार करते वापरकर्त्यांसाठी
स्पेसिफिक IDs असलेल्या प्लेसहोल्डर पॅराग्राफ्स तयार करते डायनॅमिक कंटेंटसाठी
एक इनपुट फील्ड समाविष्ट करते अ‍ॅक्सेसिबिलिटी अ‍ॅट्रिब्युट्ससह
स्टार्ट बटण प्रदान करते गेम ट्रिगर करण्यासाठी
JavaScript फाइल लोड करते शेवटी ऑप्टिमल परफॉर्मन्ससाठी

अ‍ॅप्लिकेशन लॉन्च करा

डेव्हलपमेंट दरम्यान तुमचे अ‍ॅप्लिकेशन वारंवार टेस्ट करणे तुम्हाला लवकर समस्या पकडण्यास आणि तुमची प्रगती रिअल-टाइममध्ये पाहण्यास मदत करते. Live Server एक अमूल्य टूल आहे जे तुम्ही बदल सेव्ह करता तेव्हा तुमचा ब्राउझर आपोआप रिफ्रेश करते, ज्यामुळे डेव्हलपमेंट अधिक कार्यक्षम होते.

नेहमीच पुनरावृत्तीने डेव्हलप करणे चांगले असते जेणेकरून गोष्टी कशा दिसतात ते पाहता येईल. चला आपले अ‍ॅप्लिकेशन लॉन्च करूया. Visual Studio Code साठी Live Server नावाचा एक उत्कृष्ट एक्सटेंशन आहे जो तुमचे अ‍ॅप्लिकेशन लोकल होस्ट करेल आणि तुम्ही प्रत्येक वेळी सेव्ह केल्यावर ब्राउझर रिफ्रेश करेल.

Live Server इंस्टॉल करा, लिंक फॉलो करून आणि इंस्टॉलवर क्लिक करून:

इंस्टॉलेशन दरम्यान काय होते:

तुमच्या ब्राउझरला Visual Studio Code उघडण्यास प्रवृत्त करते
तुम्हाला एक्सटेंशन इंस्टॉलेशन प्रक्रियेद्वारे मार्गदर्शन करते
Visual Studio Code पुन्हा सुरू करणे आवश्यक असू शकते सेटअप पूर्ण करण्यासाठी

इंस्टॉल झाल्यावर, Visual Studio Code मध्ये, Ctrl-Shift-P (किंवा Cmd-Shift-P) क्लिक करा कमांड पॅलेट उघडण्यासाठी:

कमांड पॅलेट समजून घेणे:

Visual Studio Code च्या सर्व कमांड्ससाठी जलद प्रवेश प्रदान करते
तुम्ही टाइप करता तेव्हा कमांड्स शोधते
फास्ट डेव्हलपमेंटसाठी कीबोर्ड शॉर्टकट्स ऑफर करते

"Live Server: Open with Live Server" टाइप करा:

Live Server काय करते:

तुमच्या प्रोजेक्टसाठी लोकल डेव्हलपमेंट सर्व्हर सुरू करते
तुम्ही फाइल्स सेव्ह करता तेव्हा ब्राउझर आपोआप रिफ्रेश करते
तुमच्या फाइल्स लोकल URL वर सर्व्ह करते (सामान्यतः localhost:5500)

ब्राउझर उघडा आणि https://localhost:5500 वर जा:

आता तुम्ही तयार केलेले पृष्ठ पाहू शकता! चला काही फंक्शनॅलिटी जोडूया.

CSS जोडा

आता गोष्टी चांगल्या दिसू द्या! व्हिज्युअल फीडबॅक संगणकीय इंटरफेससाठी सुरुवातीच्या काळापासून महत्त्वाचा आहे. 1980 च्या दशकात, संशोधकांनी शोधले की त्वरित व्हिज्युअल फीडबॅक वापरकर्त्याची कार्यक्षमता लक्षणीयरीत्या सुधारतो आणि चुका कमी करतो. हेच आपण तयार करणार आहोत.

आमच्या गेममध्ये काय चालले आहे हे स्पष्ट असणे आवश्यक आहे. खेळाडूंनी त्वरित ओळखले पाहिजे की त्यांना कोणता शब्द टाइप करायचा आहे आणि त्यांनी चूक केली तर त्यांना लगेच दिसले पाहिजे. चला काही साधे पण प्रभावी स्टाइलिंग तयार करूया:

आपल्याला UI घटकांचे संदर्भ देखील आवश्यक आहेत:

घटक	ID	उद्देश
टेक्स्ट इनपुट	`typed-value`	जिथे खेळाडू टाइप करतात
कोट डिस्प्ले	`quote`	टाइप करण्यासाठी कोट दाखवतो
मेसेज एरिया	`message`	स्थिती अपडेट्स दाखवतो

// inside script.js
// all of our quotes
const quotes = [
    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
    'There is nothing more deceptive than an obvious fact.',
    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
    'I never make exceptions. An exception disproves the rule.',
    'What one man can invent another can discover.',
    'Nothing clears up a case so much as stating it to another person.',
    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
let words = [];
let wordIndex = 0;
// the starting time
let startTime = Date.now();
// page elements
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');

या सेटअप कोडने काय साध्य केले आहे याचे विश्लेषण:

साठवते Sherlock Holmes कोट्सची यादी const वापरून कारण कोट्स बदलणार नाहीत
ट्रॅकिंग व्हेरिएबल्स सुरू करते let वापरून कारण हे मूल्य गेमप्ले दरम्यान अपडेट होईल
DOM घटकांचे संदर्भ घेतो document.getElementById() वापरून कार्यक्षम प्रवेशासाठी
सर्व गेम फंक्शनॅलिटीसाठी पाया तयार करतो स्पष्ट, वर्णनात्मक व्हेरिएबल नावांसह
संबंधित डेटा आणि घटक व्यवस्थित ठेवतो कोड देखभाल सुलभ करण्यासाठी

✅ आपल्या खेळात अधिक कोट्स जोडा

💡 प्रो टिप: आपण कोडमध्ये कधीही घटक पुनर्प्राप्त करू शकतो document.getElementById() वापरून. कारण आपण या घटकांचा नियमितपणे संदर्भ घेणार आहोत, आम्ही स्ट्रिंग लिटरल्ससह टायपो टाळणार आहोत आणि कॉन्स्टंट्स वापरणार आहोत. Vue.js किंवा React सारख्या फ्रेमवर्क्स आपल्याला कोड केंद्रीकरण अधिक चांगल्या प्रकारे व्यवस्थापित करण्यात मदत करू शकतात.

ही पद्धत इतकी प्रभावी का आहे:

स्पेलिंग त्रुटी टाळते जेव्हा घटक अनेक वेळा संदर्भित केले जातात
कोड वाचनीयता सुधारते वर्णनात्मक कॉन्स्टंट नावांसह
चांगले IDE समर्थन सक्षम करते ऑटो-कंप्लीट आणि त्रुटी तपासणीसह
रिफॅक्टरिंग सुलभ करते जर घटक IDs नंतर बदलले

const, let आणि var वापरण्याबद्दल व्हिडिओ पाहण्यासाठी एक मिनिट घ्या

🎥 व्हेरिएबल्सबद्दल व्हिडिओसाठी वरील प्रतिमेवर क्लिक करा.

सुरुवात करण्याचे लॉजिक जोडा

इथेच सर्वकाही एकत्र येते! 🚀 तुम्ही तुमचा पहिला खरा इव्हेंट लिसनर लिहिणार आहात, आणि "स्टार्ट" बटणावर क्लिक केल्यावर तुमचा कोड प्रतिसाद देताना पाहण्यात काहीतरी समाधानकारक आहे.

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

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

// at the end of script.js
document.getElementById('start').addEventListener('click', () => {
  // get a quote
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
  // Put the quote into an array of words
  words = quote.split(' ');
  // reset the word index for tracking
  wordIndex = 0;

  // UI updates
  // Create an array of span elements so we can set a class
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
  // Convert into string and set as innerHTML on quote display
  quoteElement.innerHTML = spanWords.join('');
  // Highlight the first word
  quoteElement.childNodes[0].className = 'highlight';
  // Clear any prior messages
  messageElement.innerText = '';

  // Setup the textbox
  // Clear the textbox
  typedValueElement.value = '';
  // set focus
  typedValueElement.focus();
  // set the event handler

  // Start the timer
  startTime = new Date().getTime();
});

कोडचे लॉजिकल विभागांमध्ये विश्लेषण:

📊 शब्द ट्रॅकिंग सेटअप:

निवडतो एक रँडम कोट Math.floor() आणि Math.random() वापरून विविधतेसाठी
कोटला वेगवेगळ्या शब्दांच्या यादीत बदलतो split(' ') वापरून
wordIndex रीसेट करतो कारण खेळाडू पहिल्या शब्दापासून सुरुवात करतात
गेम स्टेट तयार करतो नवीन राउंडसाठी

🎨 UI सेटअप आणि डिस्प्ले:

निर्मिती करतो <span> घटकांची यादी, प्रत्येक शब्दाला वेगळ्या स्टाइलसाठी लपेटतो
स्पॅन घटकांना एकाच स्ट्रिंगमध्ये जोडतो कार्यक्षम DOM अपडेटसाठी
पहिल्या शब्दाला हायलाइट करतो highlight CSS क्लास जोडून
पूर्वीचे गेम मेसेजेस साफ करतो स्वच्छ सुरुवातीसाठी

⌨️ टेक्स्टबॉक्स तयारी:

इनपुट फील्डमधील विद्यमान टेक्स्ट साफ करतो
टेक्स्टबॉक्सवर फोकस सेट करतो जेणेकरून खेळाडू लगेच टाइपिंग सुरू करू शकतील
नवीन गेम सत्रासाठी इनपुट एरिया तयार करतो

⏱️ टाइमर इनिशियलायझेशन:

सध्याचा टाइमस्टॅम्प कॅप्चर करतो new Date().getTime() वापरून
टायपिंग स्पीड आणि पूर्ण वेळेची अचूक गणना सक्षम करतो
गेम सत्रासाठी परफॉर्मन्स ट्रॅकिंग सुरू करतो

टाइपिंग लॉजिक जोडा

इथे आपण आपल्या खेळाचा मुख्य भाग हाताळणार आहोत! सुरुवातीला हे जास्त वाटले तरी काळजी करू नका - आपण प्रत्येक भागातून जाऊ आणि शेवटी तुम्हाला हे सर्व कसे लॉजिकल आहे ते समजेल.

आपण जे तयार करत आहोत ते खूप प्रगत आहे: प्रत्येक वेळी कोणी अक्षर टाइप करते, आपला कोड त्याने काय टाइप केले ते तपासणार आहे, त्याला फीडबॅक देणार आहे, आणि पुढे काय करायचे ते ठरवणार आहे. हे 1970 च्या दशकातील WordStar सारख्या सुरुवातीच्या वर्ड प्रोसेसरसारखे आहे जे टायपिस्टला रिअल-टाइम फीडबॅक देत होते.

// at the end of script.js
typedValueElement.addEventListener('input', () => {
  // Get the current word
  const currentWord = words[wordIndex];
  // get the current value
  const typedValue = typedValueElement.value;

  if (typedValue === currentWord && wordIndex === words.length - 1) {
    // end of sentence
    // Display success
    const elapsedTime = new Date().getTime() - startTime;
    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
    messageElement.innerText = message;
  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
    // end of word
    // clear the typedValueElement for the new word
    typedValueElement.value = '';
    // move to the next word
    wordIndex++;
    // reset the class name for all elements in quote
    for (const wordElement of quoteElement.childNodes) {
      wordElement.className = '';
    }
    // highlight the new word
    quoteElement.childNodes[wordIndex].className = 'highlight';
  } else if (currentWord.startsWith(typedValue)) {
    // currently correct
    // highlight the next word
    typedValueElement.className = '';
  } else {
    // error state
    typedValueElement.className = 'error';
  }
});

टाइपिंग लॉजिक फ्लो समजून घेणे:

ही फंक्शन सर्वात विशिष्ट परिस्थितीपासून सर्वसामान्य परिस्थितीपर्यंत अटी तपासते. प्रत्येक परिस्थितीचे विश्लेषण करूया:

flowchart TD
    A[Player types character] --> B[Get current word and typed value]
    B --> C{Quote complete?}
    C -->|Yes| D[Show completion message with time]
    C -->|No| E{Word complete with space?}
    E -->|Yes| F[Clear input, move to next word, update highlight]
    E -->|No| G{Typing correctly so far?}
    G -->|Yes| H[Remove error styling]
    G -->|No| I[Show error styling]

🏁 कोट पूर्ण (परिस्थिती 1):

तपासते की टाइप केलेले मूल्य सध्याच्या शब्दाशी जुळते आणि आपण शेवटच्या शब्दावर आहोत
लागलेला वेळ मोजते सुरुवातीच्या वेळेपासून सध्याच्या वेळेपर्यंत वजा करून
मिलीसेकंद सेकंदात बदलते 1,000 ने भागून
पूर्ण वेळेसह अभिनंदन संदेश दाखवते

✅ शब्द पूर्ण (परिस्थिती 2):

शब्द पूर्ण होणे ओळखते जेव्हा इनपुट स्पेसने संपते
तपासते की ट्रिम केलेले इनपुट सध्याच्या शब्दाशी अचूक जुळते
इनपुट फील्ड साफ करते पुढील शब्दासाठी
पुढील शब्दावर जाते wordIndex वाढवून
व्हिज्युअल हायलाइटिंग अपडेट करते सर्व क्लासेस काढून आणि नवीन शब्द हायलाइट करून

📝 टाइपिंग चालू आहे (परिस्थिती 3):

तपासते की सध्याचा शब्द आतापर्यंत टाइप केलेल्या गोष्टीने सुरू होतो
कोणतेही एरर स्टाइलिंग काढते दाखवण्यासाठी की इनपुट योग्य आहे
टाइपिंग सुरू ठेवण्यास परवानगी देते कोणत्याही व्यत्ययाशिवाय

❌ एरर स्टेट (परिस्थिती 4):

ट्रिगर करते जेव्हा टाइप केलेला मजकूर अपेक्षित शब्दाच्या सुरुवातीशी जुळत नाही
एरर CSS क्लास लागू करते त्वरित व्हिज्युअल फीडबॅक देण्यासाठी
खेळाडूंना त्रुटी पटकन ओळखण्यास आणि सुधारण्यास मदत करते

तुमचे अॅप्लिकेशन टेस्ट करा

तुम्ही काय साध्य केले आहे ते पहा! 🎉 तुम्ही इव्हेंट-ड्रिव्हन प्रोग्रामिंग वापरून स्क्रॅचपासून एक खरा, कार्यरत टाइपिंग गेम तयार केला आहे. त्याचा आनंद घ्या - हे काही छोटे यश नाही!

आता टेस्टिंगचा टप्पा आला आहे! हे अपेक्षेप्रमाणे कार्य करेल का? आपण काहीतरी चुकवले आहे का? गोष्ट अशी आहे: जर काहीतरी लगेच परिपूर्णपणे कार्य करत नसेल, तर ते पूर्णपणे सामान्य आहे. अनुभवी विकसक देखील नियमितपणे त्यांच्या कोडमध्ये बग शोधतात. हे विकास प्रक्रियेचा भाग आहे!

start क्लिक करा, आणि टाइपिंग सुरू करा! हे थोडेसे आपण पाहिलेल्या अॅनिमेशनसारखे दिसले पाहिजे.

तुमच्या अॅप्लिकेशनमध्ये काय टेस्ट करायचे:

तपासते की स्टार्ट क्लिक केल्यावर रँडम कोट दिसतो
पुष्टी करते की टाइपिंग सध्याचा शब्द योग्य प्रकारे हायलाइट करते
तपासते की चुकीच्या टाइपिंगसाठी एरर स्टाइलिंग दिसते
पुष्टी करते की शब्द पूर्ण झाल्यावर हायलाइट योग्य प्रकारे पुढे जातो
तपासते की कोट पूर्ण केल्यावर पूर्ण वेळेसह संदेश दिसतो

सामान्य डिबगिंग टिप्स:

ब्राउझर कन्सोल तपासा (F12) JavaScript त्रुटींसाठी
सर्व फाइल नावे अचूक जुळत असल्याची खात्री करा (केस-सेंसिटिव्ह)
लाइव्ह सर्व्हर चालू असल्याची खात्री करा आणि योग्य प्रकारे रिफ्रेश होत आहे
वेगवेगळे कोट्स टेस्ट करा रँडम निवड कार्य करते याची पुष्टी करण्यासाठी

GitHub Copilot Agent Challenge 🎮

Agent मोड वापरून खालील चॅलेंज पूर्ण करा:

वर्णन: खेळाडूच्या कामगिरीवर आधारित गेम समायोजित करणारी अडचण प्रणाली अंमलात आणून टाइपिंग गेम विस्तृत करा. हे चॅलेंज तुम्हाला प्रगत इव्हेंट हँडलिंग, डेटा विश्लेषण, आणि डायनॅमिक UI अपडेट्सचा सराव करण्यास मदत करेल.

प्रॉम्प्ट: टाइपिंग गेमसाठी अडचण समायोजन प्रणाली तयार करा जी:

खेळाडूचा टाइपिंग स्पीड (शब्द प्रति मिनिट) आणि अचूकता टक्केवारी ट्रॅक करते
आपोआप तीन अडचण पातळ्यांमध्ये समायोजित करते: सोपे (सोपे कोट्स), मध्यम (सध्याचे कोट्स), कठीण (अवघड कोट्स, विरामचिन्हांसह)
सध्याची अडचण पातळी आणि खेळाडूची आकडेवारी UI वर दाखवते
सलग 3 चांगल्या कामगिरीनंतर अडचण वाढवणारा स्ट्रीक काउंटर अंमलात आणते
अडचण बदल सूचित करण्यासाठी व्हिज्युअल फीडबॅक (रंग, अॅनिमेशन) जोडते

आवश्यक HTML घटक, CSS शैली, आणि JavaScript फंक्शन्स जोडा ही सुविधा अंमलात आणण्यासाठी. योग्य एरर हँडलिंग समाविष्ट करा आणि गेम योग्य ARIA लेबल्ससह प्रवेशयोग्य राहील याची खात्री करा.

Agent मोडबद्दल अधिक जाणून घ्या.

🚀 चॅलेंज

तुमचा टाइपिंग गेम पुढील स्तरावर नेण्यासाठी तयार आहात? इव्हेंट हँडलिंग आणि DOM मॅनिप्युलेशनची सखोल समज मिळवण्यासाठी या प्रगत वैशिष्ट्यांची अंमलबजावणी करण्याचा प्रयत्न करा:

अधिक फंक्शनॅलिटी जोडा:

वैशिष्ट्य	वर्णन	सराव कौशल्ये
इनपुट नियंत्रण	पूर्ण झाल्यावर `input` इव्हेंट लिसनर डिसेबल करा, आणि बटण क्लिक केल्यावर पुन्हा सक्षम करा	इव्हेंट व्यवस्थापन आणि स्टेट नियंत्रण
UI स्टेट व्यवस्थापन	खेळाडू कोट पूर्ण केल्यावर टेक्स्टबॉक्स डिसेबल करा	DOM प्रॉपर्टी मॅनिप्युलेशन
मोडल डायलॉग	यशाचा संदेश दाखवण्यासाठी मोडल डायलॉग बॉक्स दाखवा	प्रगत UI पॅटर्न आणि प्रवेशयोग्यता
हाय स्कोअर सिस्टम	`localStorage` वापरून हाय स्कोअर्स साठवा	ब्राउझर स्टोरेज APIs आणि डेटा टिकवणे

अंमलबजावणी टिप्स:

शोधा localStorage.setItem() आणि localStorage.getItem() टिकाऊ स्टोरेजसाठी
सराव करा डायनॅमिकली इव्हेंट लिसनर्स जोडणे आणि काढणे
अन्वेषण करा HTML डायलॉग घटक किंवा CSS मोडल पॅटर्न
विचार करा फॉर्म कंट्रोल्स डिसेबल आणि सक्षम करताना प्रवेशयोग्यतेबद्दल

पोस्ट-लेक्चर क्विझ

पुनरावलोकन आणि स्व-अभ्यास

वेब ब्राउझरद्वारे उपलब्ध सर्व इव्हेंट्स बद्दल वाचा, आणि तुम्ही प्रत्येक इव्हेंट कोणत्या परिस्थितीत वापराल याचा विचार करा.

असाइनमेंट

नवीन कीबोर्ड गेम तयार करा

अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.

54 KiB Raw Blame History