📦 microsoft / Web-Dev-For-Beginners

📄 README.md · 295 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
  "translation_date": "2025-11-04T02:34:40+00:00",
  "source_file": "4-typing-game/README.md",
  "language_code": "he"
}
-->
# תכנות מונחה אירועים - בניית משחק הקלדה

```mermaid
journey
    title Your Typing Game Development Journey
    section Foundation
      Plan game structure: 3: Student
      Design user interface: 4: Student
      Setup HTML elements: 4: Student
    section Functionality
      Handle user input: 4: Student
      Track timing: 5: Student
      Calculate accuracy: 5: Student
    section Features
      Add visual feedback: 5: Student
      Implement game logic: 5: Student
      Polish experience: 5: Student
```

## הקדמה

הנה משהו שכל מפתח יודע אבל כמעט לא מדברים עליו: להקליד מהר זה כוח על! 🚀 תחשבו על זה - ככל שתוכלו להעביר את הרעיונות שלכם מהמוח לעורך הקוד מהר יותר, כך היצירתיות שלכם תזרום בצורה חלקה יותר. זה כמו צינור ישיר בין המחשבות שלכם למסך.

```mermaid
pie title Game Features
    "Real-time Feedback" : 25
    "Performance Tracking" : 20
    "Interactive UI" : 20
    "Timer System" : 15
    "Quote Management" : 10
    "Results Display" : 10
```

רוצים לדעת אחת הדרכים הטובות ביותר לשפר את המיומנות הזו? ניחשתם נכון - אנחנו הולכים לבנות משחק!

```mermaid
flowchart LR
    A[Player starts game] --> B[Random quote displayed]
    B --> C[Player types characters]
    C --> D{Character correct?}
    D -->|Yes| E[Green highlight]
    D -->|No| F[Red highlight]
    E --> G[Update accuracy]
    F --> G
    G --> H{Quote complete?}
    H -->|No| C
    H -->|Yes| I[Calculate WPM]
    I --> J[Display results]
    J --> K[Play again?]
    K -->|Yes| B
    K -->|No| L[Game over]
    
    style A fill:#e1f5fe
    style D fill:#fff3e0
    style E fill:#e8f5e8
    style F fill:#ffebee
    style I fill:#f3e5f5
```

> בואו ניצור יחד משחק הקלדה מדהים!

מוכנים להשתמש בכל הכישורים שלמדתם ב-JavaScript, HTML ו-CSS? אנחנו הולכים לבנות משחק הקלדה שיאתגר אתכם עם ציטוטים אקראיים מהבלש האגדי [שרלוק הולמס](https://en.wikipedia.org/wiki/Sherlock_Holmes). המשחק יעקוב אחרי מהירות ודיוק ההקלדה שלכם - ותאמינו לי, זה ממכר יותר ממה שאתם חושבים!

```mermaid
mindmap
  root((Typing Game Development))
    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[User Action] --> B{Event Type?}
    B -->|Key Press| C[Keyboard Event]
    B -->|Button Click| D[Mouse Event]
    B -->|Timer| E[Time Event]
    
    C --> F[Check Character]
    D --> G[Start/Reset Game]
    E --> H[Update Timer]
    
    F --> I{Correct?}
    I -->|Yes| J[Highlight Green]
    I -->|No| K[Highlight Red]
    
    J --> L[Update Score]
    K --> L
    L --> M[Check Game State]
    
    G --> N[Generate New Quote]
    H --> O[Display Time]
    
    M --> P{Game Complete?}
    P -->|Yes| Q[Show Results]
    P -->|No| R[Continue Game]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#fff3e0
    style Q fill:#f3e5f5
```

לפני שנתחיל, ודאו שאתם מרגישים בנוח עם המושגים הבאים (אל תדאגו אם אתם צריכים רענון קצר - כולנו היינו שם!):

- יצירת שדות טקסט וכפתורים
- CSS והגדרת סגנונות באמצעות מחלקות  
- יסודות JavaScript  
  - יצירת מערך
  - יצירת מספר אקראי
  - קבלת הזמן הנוכחי

אם אחד מהמושגים האלה מרגיש לכם קצת חלוד, זה לגמרי בסדר! לפעמים הדרך הטובה ביותר לחזק את הידע היא לקפוץ לפרויקט וללמוד תוך כדי.

### 🔄 **בדיקת יסודות**
**הערכת בסיס**: לפני שמתחילים בפיתוח, ודאו שאתם מבינים:
- ✅ איך טפסים ואלמנטים קלט ב-HTML עובדים
- ✅ מחלקות CSS ועיצוב דינמי
- ✅ מאזיני אירועים ומטפלים ב-JavaScript
- ✅ מניפולציה של מערכים ובחירה אקראית
- ✅ מדידת זמן וחישובים

**מבחן עצמי מהיר**: האם תוכלו להסביר איך המושגים האלה עובדים יחד במשחק אינטראקטיבי?
- **אירועים** מופעלים כאשר משתמשים מתקשרים עם אלמנטים
- **מטפלים** מעבדים את האירועים ומעדכנים את מצב המשחק
- **CSS** מספק משוב חזותי לפעולות המשתמש
- **תזמון** מאפשר מדידת ביצועים והתקדמות במשחק

```mermaid
quadrantChart
    title Typing Game Skills Development
    x-axis Beginner --> Expert
    y-axis Static --> Interactive
    quadrant-1 Advanced Games
    quadrant-2 Real-time Apps
    quadrant-3 Basic Pages
    quadrant-4 Interactive Sites
    
    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 כדי להפוך אותו למושך חזותית

### 📅 **פיתוח משחק במהלך השבוע**
- [ ] להשלים את משחק ההקלדה המלא עם כל התכונות והליטושים
- [ ] להוסיף רמות קושי עם מורכבות מילים משתנה
- [ ] ליישם מעקב סטטיסטיקות משתמש (מילים לדקה, דיוק לאורך זמן)
- [ ] ליצור אפקטים קוליים ואנימציות לשיפור חוויית המשתמש
- [ ] להפוך את המשחק שלכם לרספונסיבי למכשירים ניידים
- [ ] לשתף את המשחק שלכם אונליין ולאסוף משוב ממשתמשים

### 🌟 **פיתוח אינטראקטיבי במהלך החודש**
- [ ] לבנות משחקים נוספים החוקרים דפוסי אינטראקציה שונים
- [ ] ללמוד על לולאות משחק, ניהול מצב ואופטימיזציית ביצועים
- [ ] לתרום לפרויקטים של פיתוח משחקים בקוד פתוח
- [ ] לשלוט במושגי תזמון מתקדמים ואנימציות חלקות
- [ ] ליצור תיק עבודות המציג יישומים אינטראקטיביים שונים
- [ ] להדריך אחרים המתעניינים בפיתוח משחקים ואינטראקציה עם משתמשים

## 🎯 לוח זמנים לשליטה במשחק ההקלדה

```mermaid
timeline
    title Game Development Learning Progression
    
    section Setup (10 minutes)
        Project Structure: HTML foundation
                         : CSS styling setup
                         : JavaScript file creation
        
    section User Interface (20 minutes)
        Interactive Elements: Input fields
                            : Button controls
                            : Display areas
                            : Responsive layout
        
    section Event Handling (25 minutes)
        User Interaction: Keyboard events
                        : Mouse events
                        : Real-time feedback
                        : State management
        
    section Game Logic (30 minutes)
        Core Functionality: Quote generation
                          : Character comparison
                          : Accuracy calculation
                          : Timer implementation
        
    section Performance Tracking (35 minutes)
        Metrics & Analytics: WPM calculation
                           : Error tracking
                           : Progress visualization
                           : Results display
        
    section Polish & Enhancement (45 minutes)
        User Experience: Visual feedback
                       : Sound effects
                       : Animations
                       : Accessibility features
        
    section Advanced Features (1 week)
        Extended Functionality: Difficulty levels
                              : Leaderboards
                              : Custom quotes
                              : Multiplayer options
        
    section Professional Skills (1 month)
        Game Development: Performance optimization
                        : Code architecture
                        : Testing strategies
                        : Deployment patterns
```

### 🛠️ סיכום ערכת הכלים לפיתוח משחקים

לאחר השלמת הפרויקט הזה, תשלוט ב:
- **תכנות מונחה אירועים**: ממשקי משתמש רספונסיביים שמגיבים לקלט
- **משוב בזמן אמת**: עדכונים חזותיים וביצועיים מיידיים
- **מדידת ביצועים**: מערכות תזמון וניקוד מדויקות
- **ניהול מצב משחק**: שליטה בזרימת האפליקציה וחוויית המשתמש
- **עיצוב אינטראקטיבי**: יצירת חוויות משתמש ממכרות ומרתקות
- **API מודרניים של דפדפן**: ניצול יכולות הדפדפן לאינטראקציות עשירות
- **דפוסי נגישות**: עיצוב כוללני לכל המשתמשים

**יישומים בעולם האמיתי**: הכישורים האלה מיושמים ישירות ב:
- **אפליקציות אינטרנט**: כל ממשק אינטראקטיבי או לוח בקרה
- **תוכנות חינוכיות**: פלטפורמות למידה וכלי הערכת מיומנויות
- **כלי פרודוקטיביות**: עורכי טקסט, IDE וכלי שיתוף פעולה
- **תעשיית המשחקים**: משחקי דפדפן ובידור אינטראקטיבי
- **פיתוח למובייל**: ממשקים מבוססי מגע וטיפול במחוות

**הרמה הבאה**: אתם מוכנים לחקור מסגרות משחק מתקדמות, מערכות מרובות משתתפים בזמן אמת או יישומים אינטראקטיביים מורכבים!

## קרדיטים

נכתב באהבה על ידי [כריסטופר האריסון](http://www.twitter.com/geektrainer)

---

**כתב ויתור**:  
מסמך זה תורגם באמצעות שירות תרגום AI [Co-op Translator](https://github.com/Azure/co-op-translator). בעוד שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.