# Event-Driven Programming - एक टाइपिंग खेल बनाएं

```mermaid
journey
    title आपका टाइपिंग गेम विकास यात्रा
    section Foundation
      गेम संरचना योजना बनाएं: 3: Student
      उपयोगकर्ता इंटरफ़ेस डिजाइन करें: 4: Student
      HTML तत्व सेटअप करें: 4: Student
    section Functionality
      उपयोगकर्ता इनपुट संभालें: 4: Student
      समय ट्रैक करें: 5: Student
      सटीकता गणना करें: 5: Student
    section Features
      दृश्य प्रतिक्रिया जोड़ें: 5: Student
      गेम लॉजिक लागू करें: 5: Student
      अनुभव चमकाएं: 5: Student
```
## परिचय

यह हर डेवलपर जानता है लेकिन शायद ही कभी बात करता है: तेज़ टाइप करना एक सुपरपावर है! 🚀 सोचिए - जितनी जल्दी आप अपने विचारों को अपने मस्तिष्क से कोड एडिटर तक पहुंचा सकते हैं, उतनी ही अधिक आपकी रचनात्मकता प्रवाहित हो सकती है। यह आपकी सोच और स्क्रीन के बीच एक सीधी पाइपलाइन की तरह है।

```mermaid
pie title गेम फीचर्स
    "रीयल-टाइम फीडबैक" : 25
    "प्रदर्शन ट्रैकिंग" : 20
    "इंटरैक्टिव यूआई" : 20
    "टाइमर सिस्टम" : 15
    "कोट प्रबंधन" : 10
    "परिणाम प्रदर्शन" : 10
```
क्या आप इस कौशल को बढ़ाने के सबसे अच्छे तरीकों में से एक जानना चाहते हैं? आपने सही अनुमान लगाया - हम एक गेम बनाने वाले हैं!

```mermaid
flowchart LR
    A[खिलाड़ी खेल शुरू करता है] --> B[यादृच्छिक उद्धरण दिखाया गया]
    B --> C[खिलाड़ी अक्षर टाइप करता है]
    C --> D{अक्षर सही है?}
    D -->|हाँ| E[हरा हाइलाइट]
    D -->|नहीं| F[लाल हाइलाइट]
    E --> G[सटीकता अपडेट करें]
    F --> G
    G --> H{उद्धरण पूरा हुआ?}
    H -->|नहीं| C
    H -->|हाँ| I[WPM गणना करें]
    I --> J[परिणाम दिखाएं]
    J --> K[फिर से खेलें?]
    K -->|हाँ| B
    K -->|नहीं| L[खेल खत्म]
    
    style A fill:#e1f5fe
    style D fill:#fff3e0
    style E fill:#e8f5e8
    style F fill:#ffebee
    style I fill:#f3e5f5
```
> आइए साथ मिलकर एक शानदार टाइपिंग गेम बनाते हैं!

क्या आप उन सभी जावास्क्रिप्ट, HTML, और CSS कौशलों को लागू करने के लिए तैयार हैं जिन्हें आप सीख रहे हैं? हम एक टाइपिंग गेम बनाएंगे जो आपको प्रसिद्ध जासूस [शर्लक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) से यादृच्छिक उद्धरणों के साथ चुनौती देगा। यह गेम आपकी टाइपिंग की गति और सटीकता को ट्रैक करेगा - और विश्वास करें, यह आप सोच सकते हैं उससे ज्यादा नशेड़ी होगा!

```mermaid
mindmap
  root((टाइपिंग गेम विकास))
    User Interface
      Input Elements
      Visual Feedback
      Responsive Design
      Accessibility
    Game Logic
      Quote Selection
      Timer Management
      Accuracy Tracking
      Score Calculation
    Event Handling
      Keyboard Input
      Button Clicks
      Real-time Updates
      Game State Changes
    Performance Metrics
      Words Per Minute
      Character Accuracy
      Error Tracking
      Progress Display
    User Experience
      Immediate Feedback
      Clear Instructions
      Engaging Content
      Achievement System
```
![demo](../../../4-typing-game/images/demo.gif)

## आपको क्या जानना होगा

```mermaid
flowchart TD
    A[उपयोगकर्ता क्रिया] --> B{घटना प्रकार?}
    B -->|की प्रेस| C[कीबोर्ड घटना]
    B -->|बटन क्लिक| D[माउस घटना]
    B -->|टाइमर| E[समय घटना]
    
    C --> F[अक्षर जांचें]
    D --> G[खेल शुरू/रीसेट करें]
    E --> H[टाइमर अपडेट करें]
    
    F --> I{सही?}
    I -->|हाँ| J[हरा हाइलाइट करें]
    I -->|नहीं| K[लाल हाइलाइट करें]
    
    J --> L[स्कोर अपडेट करें]
    K --> L
    L --> M[खेल की स्थिति जांचें]
    
    G --> N[नई उद्धरण उत्पन्न करें]
    H --> O[समय दिखाएं]
    
    M --> P{खेल पूरा हुआ?}
    P -->|हाँ| Q[परिणाम दिखाएं]
    P -->|नहीं| R[खेल जारी रखें]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#fff3e0
    style Q fill:#f3e5f5
```
शुरू करने से पहले, सुनिश्चित करें कि आप इन अवधारणाओं से परिचित हैं (अगर आपकी याददाश्त थोड़ी कमजोर हो, तो चिंता न करें - हम सभी वहां से गुजरे हैं!):

- टेक्स्ट इनपुट और बटन नियंत्रण बनाना
- CSS और क्लासेस के माध्यम से स्टाइल सेट करना  
- जावास्क्रिप्ट की मूल बातें
  - एक एरे बनाना
  - एक यादृच्छिक संख्या बनाना
  - वर्तमान समय प्राप्त करना

अगर इनमें से कोई भी थोड़ा धुंधला लगे, तो यह बिलकुल ठीक है! कभी-कभी अपने ज्ञान को मजबूत करने का सबसे अच्छा तरीका है कि आप सीधे एक प्रोजेक्ट में कूद जाएं और धीरे-धीरे चीजों को समझें।

### 🔄 **शिक्षण जांच**
**बुनियादी मूल्यांकन**: विकास शुरू करने से पहले, सुनिश्चित करें कि आप समझते हैं:
- ✅ HTML फॉर्म और इनपुट एलिमेंट्स कैसे काम करते हैं
- ✅ CSS क्लासेस और डायनामिक स्टाइलिंग
- ✅ जावास्क्रिप्ट इवेंट लिसनर्स और हैंडलर्स
- ✅ एरे मैनिपुलेशन और रैंडम चयन
- ✅ समय मापन और गणना

**त्वरित स्व-परीक्षा**: क्या आप समझा सकते हैं कि ये अवधारणाएं एक इंटरैक्टिव गेम में कैसे मिलती हैं?
- **इवेंट्स** तब ट्रिगर होते हैं जब उपयोगकर्ता एलिमेंट्स के साथ इंटरैक्ट करते हैं
- **हैंडलर्स** उन ईवेंट्स को प्रोसेस करते हैं और गेम की स्थिति अपडेट करते हैं
- **CSS** उपयोगकर्ता क्रियाओं के लिए दृश्य फीडबैक प्रदान करता है
- **टाइमिंग** प्रदर्शन मापन और गेम प्रगति को सक्षम बनाता है

```mermaid
quadrantChart
    title टाइपिंग गेम कौशल विकास
    x-axis शुरुआती --> विशेषज्ञ
    y-axis स्थैतिक --> इंटरैक्टिव
    quadrant-1 उन्नत गेम्स
    quadrant-2 रीयल-टाइम ऐप्स
    quadrant-3 बुनियादी पेज
    quadrant-4 इंटरैक्टिव साइट्स
    
    HTML Forms: [0.3, 0.2]
    CSS Styling: [0.4, 0.3]
    Event Handling: [0.7, 0.8]
    Game Logic: [0.8, 0.9]
    Performance Tracking: [0.9, 0.7]
```
## आइए इसे बनाएं!

[घटना-चालित प्रोग्रामिंग का उपयोग करके एक टाइपिंग गेम बनाना](./typing-game/README.md)

### ⚡ **अगले 5 मिनट में क्या कर सकते हैं**
- [ ] अपना ब्राउज़र कंसोल खोलें और `addEventListener` के साथ कीबोर्ड ईवेंट सुनने का प्रयास करें
- [ ] एक सरल HTML पेज बनाएं जिसमें एक इनपुट फ़ील्ड हो और टाइपिंग डिटेक्शन का परीक्षण करें
- [ ] टाइप किए गए टेक्स्ट की तुलना लक्ष्य टेक्स्ट से करके स्ट्रिंग मैनिपुलेशन का अभ्यास करें
- [ ] समय कार्यों को समझने के लिए `setTimeout` के साथ प्रयोग करें

### 🎯 **इस घंटे में आप क्या हासिल कर सकते हैं**
- [ ] पोस्ट-लेसन क्विज़ पूरा करें और इवेंट-ड्रिवन प्रोग्रामिंग को समझें
- [ ] वर्ड वेलिडेशन के साथ टाइपिंग गेम का एक बुनियादी संस्करण बनाएं
- [ ] सही और गलत टाइपिंग के लिए दृश्य फीडबैक जोड़ें
- [ ] गति और सटीकता के आधार पर एक साधारण स्कोरिंग सिस्टम लागू करें
- [ ] अपनी गेम को CSS के साथ स्टाइल करें ताकि यह देखने में आकर्षक हो

### 📅 **आपका सप्ताहभर का गेम डेवलपमेंट**
- [ ] सभी सुविधाओं और पॉलिश के साथ पूरा टाइपिंग गेम पूरा करें
- [ ] विभिन्न शब्द जटिलताओं के साथ कठिनाई स्तर जोड़ें
- [ ] उपयोगकर्ता के आँकड़े ट्रैकिंग लागू करें (WPM, समय के अनुसार सटीकता)
- [ ] बेहतर उपयोगकर्ता अनुभव के लिए ध्वनि प्रभाव और एनिमेशन बनाएं
- [ ] अपने गेम को मोबाइल-रिस्पॉन्सिव बनाएं ताकि यह टच डिवाइसों पर भी काम करे
- [ ] ऑनलाइन अपना गेम साझा करें और उपयोगकर्ताओं से प्रतिक्रिया एकत्र करें

### 🌟 **आपका महीनेभर का इंटरैक्टिव डेवलपमेंट**
- [ ] विभिन्न इंटरैक्शन पैटर्न की खोज करने वाले कई गेम बनाएं
- [ ] गेम लूप्स, स्टेट मैनेजमेंट, और प्रदर्शन अनुकूलन के बारे में जानें
- [ ] ओपन सोर्स गेम डेवलपमेंट प्रोजेक्ट्स में योगदान करें
- [ ] उन्नत टाइमिंग अवधारणाओं और स्मूथ एनिमेशन में महारत हासिल करें
- [ ] विभिन्न इंटरैक्टिव एप्लिकेशन दिखाने के लिए एक पोर्टफोलियो बनाएं
- [ ] गेम डेवलपमेंट और उपयोगकर्ता इंटरैक्शन में रुचि रखने वाले अन्य लोगों को मार्गदर्शन दें

## 🎯 आपकी टाइपिंग गेम मास्टरी टाइमलाइन

```mermaid
timeline
    title गेम विकास सीखने की प्रगति
    
    section सेटअप (10 मिनट)
        परियोजना संरचना: HTML आधार
                         : CSS स्टाइलिंग सेटअप
                         : JavaScript फ़ाइल निर्माण
        
    section उपयोगकर्ता इंटरफ़ेस (20 मिनट)
        इंटरैक्टिव तत्व: इनपुट फ़ील्ड
                         : बटन नियंत्रण
                         : प्रदर्शन क्षेत्र
                         : उत्तरदायी लेआउट
        
    section ईवेंट हैंडलिंग (25 मिनट)
        उपयोगकर्ता इंटरैक्शन: कीबोर्ड इवेंट्स
                              : माउस इवेंट्स
                              : रीयल-टाइम फीडबैक
                              : स्थिति प्रबंधन
        
    section गेम लॉजिक (30 मिनट)
        मुख्य कार्यक्षमता: कोट जनरेशन
                         : कैरेक्टर तुलना
                         : सटीकता गणना
                         : टाइमर कार्यान्वयन
        
    section प्रदर्शन ट्रैकिंग (35 मिनट)
        मीट्रिक्स और विश्लेषण: WPM गणना
                              : त्रुटि ट्रैकिंग
                              : प्रगति विज़ुअलाइज़ेशन
                              : परिणाम प्रदर्शन
        
    section पॉलिश और संवर्धन (45 मिनट)
        उपयोगकर्ता अनुभव: दृश्य प्रतिक्रिया
                         : ध्वनि प्रभाव
                         : एनिमेशन
                         : पहुंच सुविधाएँ
        
    section उन्नत विशेषताएँ (1 सप्ताह)
        विस्तारित कार्यक्षमता: कठिनाई स्तर
                               : लीडरबोर्ड्स
                               : कस्टम कोट्स
                               : मल्टीप्लेयर विकल्प
        
    section पेशेवर कौशल (1 महीना)
        गेम विकास: प्रदर्शन अनुकूलन
                    : कोड संरचना
                    : परीक्षण रणनीतियाँ
                    : तैनाती पैटर्न
```
### 🛠️ आपका गेम डेवलपमेंट टूलकिट सारांश

इस प्रोजेक्ट को पूरा करने के बाद, आप महारत हासिल कर लेंगे:
- **इवेंट-चालित प्रोग्रामिंग**: प्रतिक्रियाशील उपयोगकर्ता इंटरफेस जो इनपुट पर प्रतिक्रिया करते हैं
- **रियल-टाइम फीडबैक**: तत्काल दृश्य और प्रदर्शन अपडेट
- **प्रदर्शन मापन**: सटीक समय और स्कोरिंग सिस्टम
- **गेम स्टेट मैनेजमेंट**: एप्लीकेशन फ्लो और उपयोगकर्ता अनुभव को नियंत्रित करना
- **इंटरैक्टिव डिजाइन**: आकर्षक, लत लगाने वाले उपयोगकर्ता अनुभव बनाना
- **मॉर्डन वेब API**: समृद्ध इंटरैक्शन के लिए ब्राउज़र क्षमताओं का उपयोग
- **एक्सेसिबिलिटी पैटर्न**: सभी उपयोगकर्ताओं के लिए समावेशी डिज़ाइन

**वास्तविक दुनिया के अनुप्रयोग**: ये कौशल सीधे लागू होते हैं:
- **वेब एप्लीकेशंस**: कोई भी इंटरैक्टिव इंटरफेस या डैशबोर्ड
- **शैक्षिक सॉफ़्टवेयर**: लर्निंग प्लेटफ़ॉर्म और कौशल मूल्यांकन उपकरण
- **उत्पादकता उपकरण**: टेक्स्ट एडिटर्स, IDEs, और सहयोग सॉफ़्टवेयर
- **गेमिंग इंडस्ट्री**: ब्राउज़र गेम्स और इंटरैक्टिव एंटरटेनमेंट
- **मोबाइल डेवलपमेंट**: टच-आधारित इंटरफेस और जेस्चर हैंडलिंग

**अगला स्तर**: आप उन्नत गेम फ्रेमवर्क्स, रियल-टाइम मल्टीप्लेयर सिस्टम्स, या जटिल इंटरैक्टिव एप्लिकेशन का अन्वेषण करने के लिए तैयार हैं!

## क्रेडिट्स

♥️ के साथ लिखा गया [Christopher Harrison](http://www.twitter.com/geektrainer) द्वारा

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
इस दस्तावेज़ का अनुवाद एआई अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियाँ या असंगतियाँ हो सकती हैं। मूल दस्तावेज़ इसकी मूल भाषा में आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं।
<!-- CO-OP TRANSLATOR DISCLAIMER END -->