History

softchris 84e6dc3258 🌐 Update translations via Co-op Translator		4 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	4 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	1 month ago

README.md

इभेन्ट्स प्रयोग गरेर खेल बनाउने

के तपाईंले कहिल्यै सोच्नुभएको छ कि वेबसाइटहरूले कसरी थाहा पाउँछन् कि तपाईंले बटन क्लिक गर्नुभयो वा टेक्स्ट बक्समा टाइप गर्नुभयो? यो इभेन्ट-ड्रिभन प्रोग्रामिङको जादू हो! यो महत्वपूर्ण सीप सिक्नको लागि के राम्रो तरिका हुन सक्छ - एउटा टाइपिङ स्पीड खेल बनाउनुहोस् जसले तपाईंले गरेको प्रत्येक कीस्ट्रोकमा प्रतिक्रिया दिन्छ।

तपाईंले प्रत्यक्ष रूपमा देख्नुहुनेछ कि वेब ब्राउजरहरूले तपाईंको JavaScript कोडसँग "कसरी कुरा गर्छन्।" तपाईंले क्लिक गर्दा, टाइप गर्दा, वा माउस सार्दा, ब्राउजरले साना सन्देशहरू (हामी तिनीहरूलाई इभेन्ट्स भन्छौं) तपाईंको कोडमा पठाइरहेको हुन्छ, र तपाईंले कसरी प्रतिक्रिया दिने निर्णय गर्न सक्नुहुन्छ!

यहाँ काम सकिएपछि, तपाईंले आफ्नो स्पीड र एक्युरेसी ट्र्याक गर्ने वास्तविक टाइपिङ खेल बनाइसक्नुहुनेछ। अझ महत्त्वपूर्ण कुरा, तपाईंले हरेक इन्टरएक्टिभ वेबसाइटलाई शक्ति दिने आधारभूत अवधारणाहरू बुझ्नुहुनेछ। सुरु गरौं!

प्रि-लेक्चर क्विज

इभेन्ट-ड्रिभन प्रोग्रामिङ

तपाईंको मनपर्ने एप वा वेबसाइटको बारेमा सोच्नुहोस् - यसले कसरी जीवित र प्रतिक्रियाशील महसुस गराउँछ? यो तपाईंले के गर्नुहुन्छ भन्ने कुरामा कसरी प्रतिक्रिया दिन्छ भन्ने कुरामा आधारित छ! प्रत्येक ट्याप, क्लिक, स्वाइप, वा कीस्ट्रोकले "इभेन्ट" सिर्जना गर्छ, र त्यहाँ नै वेब विकासको वास्तविक जादू हुन्छ।

वेबको लागि प्रोग्रामिङलाई रोचक बनाउने कुरा के हो भने: हामीलाई कहिल्यै थाहा हुँदैन कि कसैले त्यो बटन कहिले क्लिक गर्नेछ वा टेक्स्ट बक्समा टाइप गर्न सुरु गर्नेछ। उनीहरूले तुरुन्तै क्लिक गर्न सक्छन्, पाँच मिनेट पर्खन सक्छन्, वा सायद कहिल्यै क्लिक नगर्न सक्छन्! यो अनिश्चितताले हामीलाई हाम्रो कोड कसरी लेख्ने भन्ने कुरामा फरक सोच्न बाध्य बनाउँछ।

रेसिपी जस्तै माथिबाट तलसम्म चल्ने कोड लेख्नको सट्टा, हामी कोड लेख्छौं जुन केही हुने प्रतीक्षा गर्छ। यो १८०० को दशकमा टेलिग्राफ अपरेटरहरूले आफ्नो मेसिनको छेउमा बस्ने तरिकासँग मिल्दोजुल्दो छ, तारबाट सन्देश आउँदा तुरुन्तै प्रतिक्रिया दिन तयार।

त्यसो भए "इभेन्ट" भनेको वास्तवमा के हो? सरल शब्दमा भन्नुपर्दा, यो केही हो जुन हुन्छ! तपाईंले बटन क्लिक गर्दा - त्यो इभेन्ट हो। तपाईंले अक्षर टाइप गर्दा - त्यो इभेन्ट हो। तपाईंले माउस सार्दा - त्यो अर्को इभेन्ट हो।

इभेन्ट-ड्रिभन प्रोग्रामिङले हामीलाई हाम्रो कोडलाई सुन्न र प्रतिक्रिया दिन सेटअप गर्न दिन्छ। हामीले विशेष प्रकारका कार्यहरू सिर्जना गर्छौं जसलाई इभेन्ट लिस्नर भनिन्छ, जुन केही विशेष घटना हुनको लागि प्रतीक्षा गर्छ, अनि त्यो हुँदा तुरुन्तै सक्रिय हुन्छ।

इभेन्ट लिस्नरलाई तपाईंको कोडको लागि डोरबेल भएको जस्तो सोच्नुहोस्। तपाईंले डोरबेल सेटअप गर्नुहुन्छ (addEventListener()), यसलाई कुन आवाज सुन्ने भनेर बताउनुहुन्छ (जस्तै 'क्लिक' वा 'कीप्रेस'), अनि कसैले यसलाई बजाउँदा के हुनुपर्छ भनेर निर्दिष्ट गर्नुहुन्छ (तपाईंको कस्टम फङ्सन)।

इभेन्ट लिस्नरहरू यसरी काम गर्छन्:

सुन्छन् विशेष प्रयोगकर्ता क्रियाकलापहरू जस्तै क्लिक, कीस्ट्रोक, वा माउस मूभमेन्ट
तुरुन्तै कार्यान्वयन गर्छन् जब निर्दिष्ट इभेन्ट हुन्छ
प्रतिक्रिया दिन्छन् प्रयोगकर्ता इन्टरएक्शनमा, सहज अनुभव सिर्जना गर्दै
एकै तत्वमा विभिन्न लिस्नरहरू प्रयोग गरेर धेरै इभेन्टहरू ह्यान्डल गर्छन्

NOTE: इभेन्ट लिस्नरहरू सिर्जना गर्ने धेरै तरिकाहरू छन्। तपाईंले अनोनिमस फङ्सनहरू प्रयोग गर्न सक्नुहुन्छ, वा नामित फङ्सनहरू सिर्जना गर्न सक्नुहुन्छ। तपाईंले विभिन्न सर्टकटहरू प्रयोग गर्न सक्नुहुन्छ, जस्तै click प्रोपर्टी सेट गर्ने, वा addEventListener() प्रयोग गर्ने। हाम्रो अभ्यासमा हामी addEventListener() र अनोनिमस फङ्सनहरूमा ध्यान केन्द्रित गर्नेछौं, किनकि यो वेब डेभलपरहरूले सबैभन्दा धेरै प्रयोग गर्ने प्रविधि हो। यो सबैभन्दा लचिलो पनि हो, किनकि addEventListener() सबै इभेन्टहरूको लागि काम गर्छ, र इभेन्ट नामलाई पेरामिटरको रूपमा प्रदान गर्न सकिन्छ।

सामान्य इभेन्टहरू

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

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

इभेन्ट	विवरण	सामान्य प्रयोग केसहरू
`click`	प्रयोगकर्ताले केही क्लिक गरे	बटनहरू, लिंकहरू, इन्टरएक्टिभ तत्वहरू
`contextmenu`	प्रयोगकर्ताले दायाँ माउस बटन क्लिक गरे	कस्टम राइट-क्लिक मेनुहरू
`select`	प्रयोगकर्ताले केही टेक्स्ट हाइलाइट गरे	टेक्स्ट एडिटिङ, कपी अपरेसनहरू
`input`	प्रयोगकर्ताले केही टेक्स्ट इनपुट गरे	फर्म भ्यालिडेसन, रियल-टाइम सर्च

यी इभेन्ट प्रकारहरू बुझ्दै:

ट्रिगर हुन्छन् जब प्रयोगकर्ताले तपाईंको पेजका विशेष तत्वहरूसँग इन्टरएक्ट गर्छन्
प्रदान गर्छन् प्रयोगकर्ताको क्रियाकलापको विस्तृत जानकारी इभेन्ट वस्तुहरू मार्फत
सक्षम बनाउँछन् तपाईंलाई प्रतिक्रियाशील, इन्टरएक्टिभ वेब एप्लिकेसनहरू सिर्जना गर्न
काम गर्छन् विभिन्न ब्राउजर र उपकरणहरूमा निरन्तर

खेल बनाउने

अब तपाईंले इभेन्टहरू कसरी काम गर्छन् भन्ने कुरा बुझ्नुभयो, त्यस ज्ञानलाई अभ्यासमा राखेर केही उपयोगी बनाऔं। हामी एउटा टाइपिङ स्पीड खेल बनाउनेछौं जसले इभेन्ट ह्यान्डलिङ प्रदर्शन गर्नेछ र तपाईंलाई महत्त्वपूर्ण डेभलपर सीप विकास गर्न मद्दत गर्नेछ।

हामी एउटा खेल बनाउनेछौं जसले JavaScript मा इभेन्टहरू कसरी काम गर्छन् भन्ने कुरा अन्वेषण गर्नेछ। हाम्रो खेलले खेलाडीको टाइपिङ सीप परीक्षण गर्नेछ, जुन सबै डेभलपरहरूले राख्नुपर्ने सबैभन्दा कम मूल्याङ्कन गरिएको सीप हो। रोचक तथ्य: आज हामीले प्रयोग गर्ने QWERTY किबोर्ड लेआउट वास्तवमा १८७० को दशकमा टाइपराइटरहरूको लागि डिजाइन गरिएको थियो - र राम्रो टाइपिङ सीप आज पनि प्रोग्रामरहरूको लागि उत्तिकै मूल्यवान छ! खेलको सामान्य प्रवाह यस प्रकार देखिनेछ:

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 छ, तपाईंको प्रोजेक्ट फाइलहरूको लागि
नयाँ बनाइएको डाइरेक्टरीमा स्वतः नेभिगेट गर्छ
सफा कार्यक्षेत्र सेटअप गर्छ तपाईंको खेल विकासको लागि

भिजुअल स्टुडियो कोड खोल्नुहोस्:

code .

यो कमाण्ड:

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

भिजुअल स्टुडियो कोडमा फोल्डरमा तीन फाइलहरू निम्न नामहरूमा थप्नुहोस्:

index.html - तपाईंको खेलको संरचना र सामग्री समावेश गर्दछ
script.js - सम्पूर्ण खेल तर्क र इभेन्ट लिस्नरहरू ह्यान्डल गर्छ
style.css - दृश्यात्मक उपस्थिति र स्टाइल परिभाषित गर्छ

प्रयोगकर्ता इन्टरफेस बनाउनुहोस्

अब हाम्रो खेलको सम्पूर्ण क्रियाकलाप हुने स्टेज बनाऔं! यसलाई स्पेसशिपको कन्ट्रोल प्यानल डिजाइन गर्ने जस्तो सोच्नुहोस् - हामीले सुनिश्चित गर्नुपर्छ कि खेलाडीहरूले चाहिने सबै कुरा त्यहीँ छ जहाँ उनीहरूले अपेक्षा गर्छन्।

आउनुहोस्, हाम्रो खेललाई वास्तवमा के चाहिन्छ भनेर पत्ता लगाऔं। यदि तपाईं टाइपिङ खेल खेल्दै हुनुहुन्थ्यो भने, तपाईंले स्क्रिनमा के देख्न चाहनुहुन्छ? यहाँ हामीलाई चाहिने कुरा हो:

UI तत्व	उद्देश्य	HTML तत्व
कोट डिस्प्ले	टाइप गर्नको लागि टेक्स्ट देखाउँछ	`<p>` `id="quote"` सहित
मेसेज क्षेत्र	स्टाटस र सफलता सन्देशहरू देखाउँछ	`<p>` `id="message"` सहित
टेक्स्ट इनपुट	जहाँ खेलाडीहरूले कोट टाइप गर्छन्	`<input>` `id="typed-value"` सहित
स्टार्ट बटन	खेल सुरु गर्छ	`<button>` `id="start"` सहित

UI संरचना बुझ्दै:

सामग्रीलाई माथिबाट तलसम्म तार्किक रूपमा व्यवस्थित गर्छ
तत्वहरूलाई JavaScript टार्गेटिङको लागि युनिक IDs प्रदान गर्छ
स्पष्ट दृश्यात्मक पदानुक्रम प्रदान गर्छ राम्रो प्रयोगकर्ता अनुभवको लागि
सामाजिक HTML तत्वहरू समावेश गर्छ पहुँचयोग्यताको लागि

यी सबैलाई JavaScript मा काम गर्नको लागि IDs चाहिन्छ। हामीले सिर्जना गर्न लागेको 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 फाइल लोड गर्छ अन्त्यमा, इष्टतम प्रदर्शनको लागि

एप्लिकेसन लन्च गर्नुहोस्

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

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

लाइभ सर्भर इन्स्टल गर्नुहोस् र लिंकमा क्लिक गरेर इन्स्टल गर्नुहोस्:

इन्स्टलेसनको क्रममा के हुन्छ:

तपाईंको ब्राउजरलाई भिजुअल स्टुडियो कोड खोल्न प्रेरित गर्छ
एक्सटेन्सन इन्स्टलेसन प्रक्रियामा मार्गदर्शन गर्छ
भिजुअल स्टुडियो कोडलाई पुनः सुरु गर्न आवश्यक हुन सक्छ सेटअप पूरा गर्न

इन्स्टल भएपछि, भिजुअल स्टुडियो कोडमा, Ctrl-Shift-P (वा Cmd-Shift-P) क्लिक गरेर कमाण्ड प्यालेट खोल्नुहोस्:

कमाण्ड प्यालेट बुझ्दै:

भिजुअल स्टुडियो कोडका सबै कमाण्डहरूमा छिटो पहुँच प्रदान गर्छ
टाइप गर्दा कमाण्डहरू खोज्छ
छिटो विकासको लागि किबोर्ड सर्टकटहरू प्रदान गर्छ

"Live Server: Open with Live Server" टाइप गर्नुहोस्:

लाइभ सर्भरले के गर्छ:

तपाईंको प्रोजेक्टको लागि स्थानीय विकास सर्भर सुरु गर्छ
तपाईंले फाइलहरू बचत गर्दा ब्राउजरलाई स्वतः रिफ्रेस गर्छ
तपाईंको फाइलहरूलाई स्थानीय URL (सामान्यतया localhost:5500) बाट सर्भ गर्छ

ब्राउजर खोल्नुहोस् र https://localhost:5500 मा नेभिगेट गर्नुहोस्:

अब तपाईंले बनाएको पेज देख्न सक्नुहुन्छ! केही कार्यक्षमता थपौं।

CSS थप्नुहोस्

अब चीजहरू राम्रो देखाऔं! दृश्यात्मक प्रतिक्रिया कम्प्युटिङको सुरुवाती दिनदेखि नै प्रयोगकर्ता इन्टरफेसहरूको लागि महत्त्वपूर्ण भएको छ। १९८० को दशकमा, अनुसन्धानकर्ताहरूले पत्ता लगाए कि तत्काल दृश्यात्मक प्रतिक्रिया प्रयोगकर्ताको प्रदर्शनलाई नाटकीय रूपमा सुधार गर्छ र त्रुटिहरू कम गर्छ। यही कुरा हामी सिर्जना गर्नेछौं।

हाम्रो खेलले के भइरहेको छ भन्ने कुरामा स्पष्ट हुनुपर्छ। खेलाडीहरूले तुरुन्तै थाहा पाउनुपर्छ कि कुन शब्द टाइप गर्नुपर्ने हो, र यदि उनीहरूले गल्ती गरे भने, उनीहरूले तुरुन्तै देख्नुपर्छ। केही सरल तर प्रभावकारी स्टाइलिङ सिर्जना गरौं:

style.css नामको नयाँ फाइल सिर्जना गर्नुहोस् र निम्न सिंट्याक्स थप्नुहोस्।

/* inside style.css */
.highlight {
  background-color: yellow;
}

.error {
  background-color: lightcoral;
  border: red;
}

यी CSS क्लासहरू बुझ्दै:

हालको शब्दलाई हाइलाइट गर्छ स्पष्ट दृश्यात्मक मार्गदर्शनको लागि पहेँलो पृष्ठभूमि सहित
टाइपिङ त्रुटिहरूलाई संकेत गर्छ हल्का कोरल पृष्ठभूमि रंगको साथ
तुरुन्तै प्रतिक्रिया प्रदान गर्छ प्रयोगकर्ताको टाइपिङ प्रवाहलाई बाधा नपुर्‍याई
पहुंचयोग्यताको लागि र स्पष्ट दृश्यात्मक सञ्चारको लागि विरोधाभासी रंगहरू प्रयोग गर्छ

✅ CSS को कुरा गर्दा तपाईं आफ्नो पेजलाई जस्तो चाहनुहुन्छ त्यस्तै लेआउट गर्न सक्नुहुन्छ। अलिकति समय निकालेर पेजलाई अझ आकर्षक बनाउनुहोस्:

फरक फन्ट चयन गर्नुहोस्
हेडरहरूलाई रंग दिनुहोस्
वस्तुहरूलाई पुनः आकार दिनुहोस्

JavaScript

हामीलाई हाम्रो 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');

यो सेटअप कोडले के हासिल गर्छ भन्ने कुरा तोड्दै:

उद्धरणहरू परिवर्तन नहुने भएकाले const प्रयोग गरेर शर्लक होम्स उद्धरणहरूको सूची भण्डारण गर्दछ
खेलको क्रममा यी मानहरू अपडेट हुने भएकाले let प्रयोग गरेर ट्र्याकिङ भेरिएबलहरू सुरु गर्दछ
DOM तत्वहरूको सन्दर्भहरू क्याप्चर गर्दछ document.getElementById() प्रयोग गरेर प्रभावकारी पहुँचको लागि
स्पष्ट र वर्णनात्मक भेरिएबल नामहरूको साथ सबै खेल कार्यक्षमता सेटअप गर्दछ
सम्बन्धित डेटा र तत्वहरू व्यवस्थित गर्दछ कोड मर्मतलाई सजिलो बनाउन

✅ आफ्नो खेलमा थप उद्धरणहरू थप्न अगाडि बढ्नुहोस्

💡 प्रो टिप: हामीले document.getElementById() प्रयोग गरेर कोडमा जबसुकै तत्वहरू पुनः प्राप्त गर्न सक्छौं। किनकि हामीले यी तत्वहरूलाई नियमित रूपमा सन्दर्भ गर्नुपर्नेछ, हामी स्ट्रिङ लिटरलहरूमा टाइपोग्राफिकल त्रुटिहरूबाट बच्नका लागि स्थिरांकहरू प्रयोग गर्नेछौं। Vue.js वा React जस्ता फ्रेमवर्कहरूले तपाईंलाई आफ्नो कोडलाई केन्द्रित गर्न मद्दत गर्न सक्छ।

यो दृष्टिकोण किन यति राम्रोसँग काम गर्छ:

स्पष्टता प्रदान गर्दछ जब तत्वहरू बारम्बार सन्दर्भ गरिन्छ
कोड पढ्न सजिलो बनाउँछ वर्णनात्मक स्थिरांक नामहरूको साथ
IDE समर्थन सुधार गर्दछ स्वतः पूर्ण र त्रुटि जाँचको साथ
पुनः संरचना गर्न सजिलो बनाउँछ यदि पछि तत्व ID परिवर्तन हुन्छ

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 लाई 0 मा किनकि खेलाडी पहिलो शब्दबाट सुरु गर्छन्
तयार गर्छ खेलको अवस्था नयाँ राउन्डको लागि

🎨 UI सेटअप र प्रदर्शन:

सिर्जना गर्छ <span> तत्वहरूको सूची, प्रत्येक शब्दलाई व्यक्तिगत शैलीको लागि र्याप गर्दै
जोड्छ 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,000 ले भाग गरेर
प्रदर्शन गर्छ बधाई सन्देश पूरा गर्ने समयको साथ

✅ शब्द पूरा भयो (परिदृश्य २):

पत्ता लगाउँछ शब्द पूरा भएको जब इनपुट स्पेसमा समाप्त हुन्छ
मान्य बनाउँछ कि ट्रिम गरिएको इनपुट हालको शब्दसँग ठीक मेल खान्छ
इनपुट फिल्ड मेट्छ अर्को शब्दको लागि
अगाडि बढ्छ अर्को शब्दमा wordIndex बढाएर
दृश्य हाइलाइटिङ अपडेट गर्छ सबै क्लासहरू हटाएर र नयाँ शब्दलाई हाइलाइट गरेर

📝 टाइपिङ प्रगति (परिदृश्य ३):

पुष्टि गर्छ कि हालको शब्दले अहिलेसम्म टाइप गरिएको कुराबाट सुरु हुन्छ
कुनै पनि त्रुटि शैली हटाउँछ इनपुट सही छ भनेर देखाउन
टाइपिङ जारी राख्न अनुमति दिन्छ बिना अवरोध

❌ त्रुटि अवस्था (परिदृश्य ४):

ट्रिगर गर्छ जब टाइप गरिएको पाठले अपेक्षित शब्दको सुरुवातसँग मेल खाँदैन
त्रुटि CSS क्लास लागू गर्छ तुरुन्त दृश्य प्रतिक्रिया प्रदान गर्न
मदत गर्छ खेलाडीहरूलाई छिटो त्रुटिहरू पहिचान गर्न र सुधार गर्न

आफ्नो एप्लिकेसन परीक्षण गर्नुहोस्

हेर्नुहोस् तपाईंले के हासिल गर्नुभयो! 🎉 तपाईंले इभेन्ट-ड्राइभन प्रोग्रामिङ प्रयोग गरेर स्क्र्याचबाट वास्तविक, काम गर्ने टाइपिङ खेल निर्माण गर्नुभयो। यसलाई सराहना गर्न एक क्षण लिनुहोस् - यो सानो उपलब्धि होइन!

अब परीक्षण चरण आउँछ! के यो अपेक्षाकृत काम गर्नेछ? के हामीले केही छुटायौं? यहाँ कुरा छ: यदि केहि तुरुन्तै पूर्ण रूपमा काम गर्दैन भने, त्यो पूर्ण रूपमा सामान्य हो। अनुभवी विकासकर्ताहरूले नियमित रूपमा आफ्नो कोडमा बगहरू पाउँछन्। यो विकास प्रक्रियाको हिस्सा हो!

start मा क्लिक गर्नुहोस्, र टाइप गर्न सुरु गर्नुहोस्! यो पहिले देखिएको एनिमेसन जस्तै देखिनु पर्छ।

तपाईंको एप्लिकेसनमा के परीक्षण गर्ने:

पुष्टि गर्छ कि Start क्लिक गर्दा र्यान्डम उद्धरण देखिन्छ
पुष्टि गर्छ कि टाइप गर्दा हालको शब्द सही रूपमा हाइलाइट हुन्छ
जाँच गर्छ कि गलत टाइपिङको लागि त्रुटि शैली देखिन्छ
पुष्टि गर्छ कि शब्दहरू पूरा गर्दा हाइलाइट सही रूपमा अगाडि बढ्छ
पुष्टि गर्छ कि उद्धरण पूरा गर्दा समयको साथ पूरा गर्ने सन्देश देखिन्छ

सामान्य डिबगिङ सुझावहरू:

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

GitHub Copilot Agent Challenge 🎮

Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:

विवरण: खेलाडीको प्रदर्शनको आधारमा खेल समायोजन गर्ने कठिनाई प्रणाली कार्यान्वयन गरेर टाइपिङ खेल विस्तार गर्नुहोस्। यो चुनौतीले तपाईंलाई उन्नत इभेन्ट ह्यान्डलिङ, डेटा विश्लेषण, र गतिशील UI अपडेट अभ्यास गर्न मद्दत गर्नेछ।

प्रस्तावना: टाइपिङ खेलको लागि कठिनाई समायोजन प्रणाली सिर्जना गर्नुहोस् जसले:

खेलाडीको टाइपिङ गति (शब्द प्रति मिनेट) र शुद्धता प्रतिशत ट्र्याक गर्छ
स्वचालित रूपमा तीन कठिनाई स्तरहरूमा समायोजन गर्छ: सजिलो (साधारण उद्धरणहरू), मध्यम (हालको उद्धरणहरू), कठिन (वर्ण विराम चिह्न सहित जटिल उद्धरणहरू)
UI मा हालको कठिनाई स्तर र खेलाडीको तथ्याङ्कहरू प्रदर्शन गर्छ
लगातार तीन राम्रो प्रदर्शन पछि कठिनाई बढाउने स्ट्रिक काउन्टर कार्यान्वयन गर्छ
कठिनाई परिवर्तनहरू संकेत गर्न दृश्य प्रतिक्रिया (रङहरू, एनिमेसनहरू) थप्छ

आवश्यक HTML तत्वहरू, CSS शैलीहरू, र JavaScript फङ्सनहरू थप्नुहोस् यो सुविधा कार्यान्वयन गर्न। उचित त्रुटि ह्यान्डलिङ समावेश गर्नुहोस् र खेल पहुँचयोग्य रहन्छ सुनिश्चित गर्नुहोस्।

agent mode को बारेमा थप जान्नुहोस्।

🚀 चुनौती

तपाईंको टाइपिङ खेललाई अर्को स्तरमा लैजान तयार हुनुहुन्छ? इभेन्ट ह्यान्डलिङ र DOM म्यानिपुलेसनको गहिरो समझको लागि यी उन्नत सुविधाहरू कार्यान्वयन गर्ने प्रयास गर्नुहोस्:

थप कार्यक्षमता थप्नुहोस्:

सुविधा	विवरण	तपाईंले अभ्यास गर्ने सीपहरू
इनपुट नियन्त्रण	उद्धरण पूरा भएपछि `input` इभेन्ट लिस्नरलाई निष्क्रिय गर्नुहोस्, र बटन क्लिक गर्दा पुनः सक्रिय गर्नुहोस्	इभेन्ट व्यवस्थापन र अवस्था नियन्त्रण
UI अवस्था व्यवस्थापन	खेलाडीले उद्धरण पूरा गरेपछि टेक्स्टबक्स निष्क्रिय गर्नुहोस्	DOM सम्पत्ति हेरफेर
मोडल संवाद	सफलता सन्देशको साथ मोडल संवाद बक्स प्रदर्शन गर्नुहोस्	उन्नत UI ढाँचा र पहुँचयोग्यता
उच्च स्कोर प्रणाली	`localStorage` प्रयोग गरेर उच्च स्कोरहरू भण्डारण गर्नुहोस्	ब्राउजर भण्डारण API र डेटा स्थायित्व

कार्यान्वयन सुझावहरू:

स्थायी भण्डारणको लागि localStorage.setItem() र localStorage.getItem() अनुसन्धान गर्नुहोस्
गतिशील रूपमा इभेन्ट लिस्नरहरू थप्ने र हटाउने अभ्यास गर्नुहोस्
HTML संवाद तत्वहरू वा CSS मोडल ढाँचाहरू अन्वेषण गर्नुहोस्
फारम नियन्त्रणहरू निष्क्रिय र सक्रिय गर्दा पहुँचयोग्यता विचार गर्नुहोस्

पोस्ट-व्याख्यान क्विज

🚀 तपाईंको टाइपिङ खेल मास्टरी समयरेखा

⚡ अर्को ५ मिनेटमा तपाईं के गर्न सक्नुहुन्छ

विभिन्न उद्धरणहरूसँग आफ्नो टाइपिङ खेल परीक्षण गर्नुहोस् ताकि यो सहज रूपमा काम गर्छ भनेर सुनिश्चित गर्न सकून्
CSS शैलीको साथ प्रयोग गर्नुहोस् - हाइलाइट र त्रुटि रङहरू परिवर्तन गर्न प्रयास गर्नुहोस्
आफ्नो ब्राउजरको DevTools (F12) खोल्नुहोस् र खेल्दा कन्सोल हेर्नुहोस्
आफैंलाई चुनौती दिनुहोस् कि उद्धरण सकेसम्म छिटो पूरा गर्नुहोस्

⏰ यो घण्टामा तपाईं के हासिल गर्न सक्नुहुन्छ

सूचीमा थप उद्धरणहरू थप्नुहोस् (शायद तपाईंको मनपर्ने पुस्तकहरू वा चलचित्रहरूबाट)
चुनौती खण्डबाट localStorage उच्च स्कोर प्रणाली कार्यान्वयन गर्नुहोस्
प्रत्येक खेल पछि प्रदर्शन हुने शब्द प्रति मिनेट गणक सिर्जना गर्नुहोस्
सही टाइपिङ, त्रुटिहरू, र पूरा गर्नेका लागि ध्वनि प्रभावहरू थप्नुहोस्

📅 तपाईंको हप्ताको साहसिक यात्रा

मल्टिप्लेयर संस्करण निर्माण गर्नुहोस् जहाँ साथीहरूले सँगै प्रतिस्पर्धा गर्न सकून्
उद्धरण जटिलतासँग विभिन्न कठिनाई स्तरहरू सिर्जना गर्नुहोस्
उद्धरणको कति भाग पूरा भएको छ भनेर देखाउने प्रगति बार थप्नुहोस्
व्यक्तिगत तथ्याङ्क ट्र्याकिङको साथ प्रयोगकर्ता खाता कार्यान्वयन गर्नुहोस्
अनुकूलन थिमहरू डिजाइन गर्नुहोस् र प्रयोगकर्ताहरूलाई उनीहरूको मनपर्ने शैली चयन गर्न दिनुहोस्

🗓️ तपाईंको महिनाको रूपान्तरण

पाठको उचित औंलाको स्थान क्रमशः सिकाउने पाठहरू सहित टाइपिङ कोर्स सिर्जना गर्नुहोस्
विश्लेषण निर्माण गर्नुहोस् जसले देखाउँछ कि कुन अक्षर वा शब्दहरूले सबैभन्दा धेरै त्रुटिहरू उत्पन्न गर्छन्
विभिन्न भाषाहरू र किबोर्ड लेआउटहरूको लागि समर्थन थप्नुहोस्
साहित्य डेटाबेसबाट उद्धरणहरू तान्न शैक्षिक API हरूसँग एकीकृत गर्नुहोस्
अन्य प्रयोगकर्ताहरूले प्रयोग गर्न र रमाइलो गर्नको लागि आफ्नो उन्नत टाइपिङ खेल प्रकाशित गर्नुहोस्

🎯 अन्तिम प्रतिबिम्ब जाँच

अर्को चरणमा जानु अघि, एक क्षण लिनुहोस् र उत्सव मनाउनुहोस्:

खेल निर्माण गर्दा सबैभन्दा सन्तोषजनक क्षण के थियो?
इभेन्ट-ड्राइभन प्रोग्रामिङको बारेमा तपाईंको अनुभव सुरुमा भन्दा अहिले कस्तो छ?
यो खेललाई अद्वितीय बनाउन थप्नको लागि तपाईं उत्साहित हुनुहुन्छ कि एक सुविधा के हो?
तपाईं अन्य परियोजनाहरूमा इभेन्ट ह्यान्डलिङ अवधारणाहरू कसरी लागू गर्न सक्नुहुन्छ?

journey
    title Your Event Programming Confidence Journey
    section Today
      Understanding Events: 3: You
      Building UI: 4: You
      Writing Event Listeners: 5: You
    section This Week
      Adding Features: 4: You
      Debugging Issues: 5: You
      Enhancing UX: 4: You
    section Next Month
      Building Complex Apps: 5: You
      Teaching Others: 5: You
      Creating Frameworks: 5: You

🌟 याद गर्नुहोस्: तपाईंले अहिले मात्र अन्तरक्रियात्मक वेबसाइट र एप्लिकेसनलाई शक्ति दिने मुख्य अवधारणाहरूमा महारत हासिल गर्नुभएको छ। इभेन्ट-ड्राइभन प्रोग्रामिङले वेबलाई जीवन्त र प्रतिक्रियाशील महसुस गराउँछ। जब तपाईंले ड्रपडाउन मेनु, टाइप गर्दा मान्य गर्ने फारम, वा खेल जसले तपाईंको क्लिकहरूमा प्रतिक्रिया दिन्छ देख्नुहुन्छ, तपाईंले अब यसको पछाडि रहेको जादू बुझ्नुभएको छ। तपाईं केवल कोड सिक्दै हुनुहुन्न - तपाईं अनुभवहरू सिर्जना गर्न सिक्दै हुनुहुन्छ जसले सहज र आकर्षक महसुस गराउँछ! 🎉

समीक्षा र आत्म अध्ययन

वेब ब्राउजर मार्फत विकासकर्तालाई उपलब्ध सबै इभेन्टहरू को बारेमा पढ्नुहोस्, र तपाईंले प्रत्येकलाई प्रयोग गर्ने परिदृश्यहरू विचार गर्नुहोस्।

असाइनमेन्ट

नयाँ किबोर्ड खेल सिर्जना गर्नुहोस्

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