# יצירת משחק באמצעות אירועים האם אי פעם תהיתם איך אתרים יודעים כשאתם לוחצים על כפתור או מקלידים בתיבת טקסט? זו הקסם של תכנות מבוסס אירועים! איזו דרך טובה יותר ללמוד את המיומנות החשובה הזו מאשר לבנות משהו שימושי - משחק מהירות הקלדה שמגיב לכל הקשה שאתם מבצעים. אתם הולכים לראות ממקור ראשון איך דפדפני האינטרנט "מדברים" עם קוד ה-JavaScript שלכם. בכל פעם שאתם לוחצים, מקלידים או מזיזים את העכבר, הדפדפן שולח הודעות קטנות (שאנחנו קוראים להן אירועים) לקוד שלכם, ואתם מחליטים איך להגיב! עד שנסיים כאן, תבנו משחק הקלדה אמיתי שעוקב אחרי המהירות והדיוק שלכם. יותר חשוב מזה, תבינו את העקרונות הבסיסיים שמניעים כל אתר אינטראקטיבי שאי פעם השתמשתם בו. בואו נתחיל! ## שאלון לפני ההרצאה [שאלון לפני ההרצאה](https://ff-quizzes.netlify.app/web/quiz/21) ## תכנות מבוסס אירועים חשבו על האפליקציה או האתר האהובים עליכם - מה גורם להם להרגיש חיים ומגיבים? הכל קשור לאיך שהם מגיבים למה שאתם עושים! כל לחיצה, הקשה, החלקה או הקשה יוצרים מה שאנחנו קוראים לו "אירוע", ושם מתרחש הקסם האמיתי של פיתוח אתרים. הנה מה שהופך את התכנות עבור האינטרנט לכל כך מעניין: אנחנו אף פעם לא יודעים מתי מישהו ילחץ על הכפתור הזה או יתחיל להקליד בתיבת טקסט. הם עשויים ללחוץ מיד, לחכות חמש דקות, או אולי לא ללחוץ בכלל! חוסר הוודאות הזה אומר שאנחנו צריכים לחשוב אחרת על איך אנחנו כותבים את הקוד שלנו. במקום לכתוב קוד שרץ מלמעלה למטה כמו מתכון, אנחנו כותבים קוד שיושב בסבלנות ומחכה שמשהו יקרה. זה דומה לאופן שבו מפעילי טלגרף במאה ה-19 היו יושבים ליד המכונות שלהם, מוכנים להגיב ברגע שהודעה מגיעה דרך החוט. אז מה בדיוק זה "אירוע"? בפשטות, זה משהו שקורה! כשאתם לוחצים על כפתור - זה אירוע. כשאתם מקלידים אות - זה אירוע. כשאתם מזיזים את העכבר - זה עוד אירוע. תכנות מבוסס אירועים מאפשר לנו להגדיר את הקוד שלנו להקשיב ולהגיב. אנחנו יוצרים פונקציות מיוחדות שנקראות **מאזיני אירועים** שמחכות בסבלנות לדברים ספציפיים לקרות, ואז פועלות ברגע שהם קורים. חשבו על מאזיני אירועים כמו פעמון דלת עבור הקוד שלכם. אתם מגדירים את פעמון הדלת (`addEventListener()`), אומרים לו איזה צליל להקשיב לו (כמו 'click' או 'keypress'), ואז מציינים מה צריך לקרות כשמישהו מצלצל בו (הפונקציה המותאמת שלכם). **כך מאזיני אירועים עובדים:** - **מקשיבים** לפעולות משתמש ספציפיות כמו לחיצות, הקשות או תנועות עכבר - **מבצעים** את הקוד המותאם שלכם כשהאירוע המוגדר מתרחש - **מגיבים** מיד לאינטראקציות משתמש, ויוצרים חוויה חלקה - **מטפלים** באירועים מרובים על אותו אלמנט באמצעות מאזינים שונים > **NOTE:** כדאי להדגיש שיש דרכים רבות ליצור מאזיני אירועים. אתם יכולים להשתמש בפונקציות אנונימיות, או ליצור פונקציות עם שמות. אתם יכולים להשתמש בקיצורי דרך שונים, כמו הגדרת מאפיין `click`, או שימוש ב-`addEventListener()`. בתרגיל שלנו נתמקד ב-`addEventListener()` ובפונקציות אנונימיות, שכן זו כנראה הטכניקה הנפוצה ביותר שמפתחי אתרים משתמשים בה. היא גם הכי גמישה, שכן `addEventListener()` עובד עבור כל האירועים, ושם האירוע יכול להיות מסופק כפרמטר. ### אירועים נפוצים בעוד שדפדפני אינטרנט מציעים עשרות אירועים שונים שאפשר להקשיב להם, רוב האפליקציות האינטראקטיביות מסתמכות רק על קומץ אירועים חיוניים. הבנת האירועים המרכזיים הללו תעניק לכם את הבסיס לבניית אינטראקציות משתמש מתוחכמות. יש [עשרות אירועים](https://developer.mozilla.org/docs/Web/Events) שאפשר להקשיב להם בעת יצירת אפליקציה. למעשה, כל דבר שמשתמש עושה בדף מעלה אירוע, מה שנותן לכם הרבה כוח להבטיח שהם יקבלו את החוויה שאתם רוצים. למרבה המזל, בדרך כלל תצטרכו רק קומץ קטן של אירועים. הנה כמה נפוצים (כולל השניים שנשתמש בהם כשניצור את המשחק שלנו): | אירוע | תיאור | שימושים נפוצים | |-------|-------------|------------------| | `click` | המשתמש לחץ על משהו | כפתורים, קישורים, אלמנטים אינטראקטיביים | | `contextmenu` | המשתמש לחץ על כפתור העכבר הימני | תפריטי לחיצה ימנית מותאמים אישית | | `select` | המשתמש סימן טקסט | עריכת טקסט, פעולות העתקה | | `input` | המשתמש הכניס טקסט | אימות טפסים, חיפוש בזמן אמת | **הבנת סוגי האירועים הללו:** - **מופעלים** כאשר משתמשים מבצעים אינטראקציה עם אלמנטים ספציפיים בדף שלכם - **מספקים** מידע מפורט על פעולת המשתמש דרך אובייקטי אירוע - **מאפשרים** לכם ליצור אפליקציות אינטרנט מגיבות ואינטראקטיביות - **עובדים** באופן עקבי בין דפדפנים ומכשירים שונים ## יצירת המשחק עכשיו כשאתם מבינים איך אירועים עובדים, בואו ניישם את הידע הזה על ידי יצירת משהו שימושי. ניצור משחק מהירות הקלדה שמדגים טיפול באירועים תוך כדי עזרה בפיתוח מיומנות חשובה למפתחים. אנחנו הולכים ליצור משחק כדי לחקור איך אירועים עובדים ב-JavaScript. המשחק שלנו יבדוק את מיומנות ההקלדה של השחקן, שהיא אחת המיומנויות הכי פחות מוערכות שכל מפתח צריך שיהיו לו. עובדה מעניינת: פריסת המקלדת QWERTY שאנחנו משתמשים בה היום תוכננה למעשה בשנות ה-1870 עבור מכונות כתיבה - ומיומנויות הקלדה טובות עדיין חשובות מאוד למתכנתים כיום! זרימת המשחק הכללית תיראה כך: ```mermaid 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` כדי לגרום להכל להיראות נהדר. זה השלישייה הקלאסית שמניעה את רוב האינטרנט! **צרו תיקייה חדשה עבור העבודה שלכם על ידי פתיחת חלון קונסול או טרמינל והקלדת הפקודה הבאה:** ```bash # Linux or macOS mkdir typing-game && cd typing-game # Windows md typing-game && cd typing-game ``` **כך הפקודות הללו פועלות:** - **יוצרות** תיקייה חדשה בשם `typing-game` עבור קבצי הפרויקט שלכם - **מנווטות** לתוך התיקייה החדשה שנוצרה באופן אוטומטי - **מכינות** סביבת עבודה נקייה לפיתוח המשחק שלכם **פתחו את Visual Studio Code:** ```bash code . ``` **הפקודה הזו:** - **משיקה** את Visual Studio Code בתיקייה הנוכחית - **פותחת** את תיקיית הפרויקט שלכם בעורך - **מספקת** גישה לכלי הפיתוח שתצטרכו **הוסיפו שלושה קבצים לתיקייה ב-Visual Studio Code עם השמות הבאים:** - `index.html` - מכיל את המבנה והתוכן של המשחק שלכם - `script.js` - מטפל בכל לוגיקת המשחק ומאזיני האירועים - `style.css` - מגדיר את המראה החזותי והעיצוב ## יצירת ממשק המשתמש עכשיו בואו נבנה את הבמה שבה כל פעולת המשחק שלנו תתרחש! חשבו על זה כמו עיצוב לוח הבקרה של חללית - אנחנו צריכים לוודא שכל מה שהשחקנים שלנו צריכים נמצא בדיוק במקום שהם מצפים לו. בואו נבין מה המשחק שלנו באמת צריך. אם הייתם משחקים במשחק הקלדה, מה הייתם רוצים לראות על המסך? הנה מה שנצטרך: | אלמנט ממשק משתמש | מטרה | אלמנט HTML | |------------|---------|-------------| | תצוגת ציטוט | מציגה את הטקסט להקלדה | `

` עם `id="quote"` | | אזור הודעות | מציג הודעות סטטוס והצלחה | `

` עם `id="message"` | | שדה טקסט | המקום שבו השחקנים מקלידים את הציטוט | `` עם `id="typed-value"` | | כפתור התחלה | מתחיל את המשחק | ` ``` **פירוק מה שהמבנה הזה של HTML משיג:** - **מקשר** את גיליון הסגנונות CSS ב-`` לעיצוב - **יוצר** כותרת ברורה והוראות למשתמשים - **מגדיר** פסקאות מקום עם מזהים ספציפיים לתוכן דינמי - **כולל** שדה קלט עם מאפייני נגישות - **מספק** כפתור התחלה להפעלת המשחק - **טוען** את קובץ ה-JavaScript בסוף לביצועים מיטביים ### השקת האפליקציה בדיקת האפליקציה שלכם לעיתים קרובות במהלך הפיתוח עוזרת לכם לתפוס בעיות מוקדם ולראות את ההתקדמות שלכם בזמן אמת. Live Server הוא כלי יקר ערך שמרענן את הדפדפן שלכם באופן אוטומטי בכל פעם שאתם שומרים שינויים, מה שהופך את הפיתוח ליעיל הרבה יותר. תמיד עדיף לפתח באופן איטרטיבי כדי לראות איך הדברים נראים. בואו נשיק את האפליקציה שלנו. יש הרחבה נהדרת ל-Visual Studio Code שנקראת [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) שתארח את האפליקציה שלכם באופן מקומי ותעדכן את הדפדפן בכל פעם שאתם שומרים. **התקינו [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) על ידי לחיצה על הקישור ולחיצה על Install:** **מה קורה במהלך ההתקנה:** - **מנחה** את הדפדפן לפתוח את Visual Studio Code - **מדריך** אתכם בתהליך התקנת ההרחבה - **עשוי לדרוש** הפעלה מחדש של Visual Studio Code להשלמת ההתקנה **לאחר ההתקנה, ב-Visual Studio Code, לחצו על Ctrl-Shift-P (או Cmd-Shift-P) כדי לפתוח את תפריט הפקודות:** **הבנת תפריט הפקודות:** - **מספק** גישה מהירה לכל הפקודות של VS Code - **מחפש** פקודות בזמן שאתם מקלידים - **מציע** קיצורי מקלדת לפיתוח מהיר יותר **הקלידו "Live Server: Open with Live Server":** **מה Live Server עושה:** - **מתחיל** שרת פיתוח מקומי עבור הפרויקט שלכם - **מרענן** את הדפדפן באופן אוטומטי כשאתם שומרים קבצים - **מגיש** את הקבצים שלכם מכתובת URL מקומית (בדרך כלל `localhost:5500`) **פתחו דפדפן ונווטו ל-`https://localhost:5500`:** כעת אתם אמורים לראות את הדף שיצרתם! בואו נוסיף קצת פונקציונליות. ## הוספת ה-CSS עכשיו בואו נעשה שהדברים ייראו טוב! משוב חזותי היה קריטי לממשקי משתמש מאז ימי המחשוב הראשונים. בשנות ה-80, חוקרים גילו שמשוב חזותי מיידי משפר באופן דרמטי את ביצועי המשתמש ומפחית טעויות. זה בדיוק מה שאנחנו הולכים ליצור. המשחק שלנו צריך להיות ברור לחלוטין לגבי מה שקורה. השחקנים צריכים לדעת מיד איזו מילה הם אמורים להקליד, ואם הם עושים טעות, הם צריכים לראות את זה מיד. בואו ניצור עיצוב פשוט אך יעיל: צרו קובץ חדש בשם `style.css` והוסיפו את התחביר הבא. ```css /* inside style.css */ .highlight { background-color: yellow; } .error { background-color: lightcoral; border: red; } ``` **הבנת מחלקות ה-CSS הללו:** - **מדגישות** את המילה הנוכחית עם רקע צהוב להכוונה חזותית ברורה - **מסמנות** טעויות הקלדה עם צבע רקע קורל בהיר - **מספקות** משוב מיידי מבלי להפריע לזרימת ההקלדה של המשתמש - **משתמשות** בצבעים מנוגדים לנגישות ותקשורת חזותית ברורה ✅ כשמדובר ב-CSS, אתם יכולים לעצב את הדף שלכם איך שתרצו. הקדישו קצת זמן והפכו את הדף למושך יותר: - בחרו גופן שונה - צבעו את הכותרות - שנו את גודל הפריטים ## JavaScript כאן הדברים מתחילים להיות מעניינים! 🎉 יש לנו את מבנה ה-HTML ואת עיצוב ה-CSS שלנו, אבל כרגע המשחק שלנו הוא כמו מכונית יפה בלי מנוע. JavaScript הולך להיות המנוע הזה - זה מה שגורם להכל לעבוד בפועל ולהגיב למה שהשחקנים עושים. כאן תראו את היצירה שלכם מתעוררת לחיים. אנחנו הולכים להתמודד עם זה שלב אחר שלב כדי ששום דבר לא ירגיש מכריע: | שלב | מטרה | מה תלמדו | |------|---------|------------------| | [יצירת הקבועים](../../../../4-typing-game/typing-game) | הגדרת ציטוטים והתייחסויות DOM | ניהול משתנים ובחירת DOM | | [מאזין אירועים להתחלת המשחק](../../../../4-typing-game/typing-game) | טיפול באתחול המשחק | טיפול באירועים ועדכוני ממשק משתמש | | [מאזין אירועים להקלדה](../../../../4-typing-game/typing-game) | עיבוד קלט משתמש בזמן אמת | אימות קלט ומשוב דינמי | **הגישה המובנית הזו עוזרת לכם:** - **לארגן** את הקוד שלכם למקטעים לוגיים ונוחים לניהול - **לבנות** פונקציונליות באופן הדרגתי לצורך איתור באגים קל יותר - **להבין** איך חלקים שונים של האפליקציה שלכם עובדים יחד - **ליצור** דפוסים לשימוש חוזר עבור פרויקטים עתידיים אבל קודם, צרו קובץ חדש בשם `script.js`. ### הוספת הקבועים לפני שנצלול לפעולה, בואו נאסוף את כל המשאבים שלנו! בדיוק כמו איך שמרכז הבקרה של נאס"א מכין את כל מערכות המעקב שלהם לפני השיגור, הרבה יותר קל כשיש לכם הכל מוכן ומסודר. זה חוסך לנו חיפושים מאוחר יותר ועוזר למנוע שגיאות כתיב. הנה מה שאנחנו צריכים להגדיר קודם: | סוג נתונים | מטרה | דוגמה | |-----------|---------|--------| | מערך ציטוטים | שמירת כל הציטוטים האפשריים למשחק | `['ציטוט 1', 'ציטוט 2', ...]` | | מערך מילים | פירוק הציטוט הנוכחי למילים בודדות | `['כש', 'אתה', 'יש', ...]` | | אינדקס מילים | מעקב אחרי המילה שהשחקן מקליד | `0, 1, 2, 3...` | | זמן התחלה | חישוב הזמן שחלף לצורך ניקוד | `Date.now()` | **נזדקק גם להפניות לאלמנטים בממשק המשתמש שלנו:** | אלמנט | מזהה | מטרה | |-------|------|-------| | שדה טקסט | `typed-value` | המקום שבו השחקנים מקלידים | | תצוגת ציטוט | `quote` | מציג את הציטוט להקלדה | | אזור הודעות | `message` | מציג עדכוני סטטוס | ```javascript // 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](https://vuejs.org/) או [React](https://reactjs.org/) יכולות לעזור לכם לנהל את הקוד בצורה מרכזית יותר. > **למה הגישה הזו עובדת כל כך טוב:** - **מונעת** שגיאות כתיב כאשר מתייחסים לאלמנטים מספר פעמים - **משפרת** את קריאות הקוד עם שמות קבועים ותיאוריים - **מאפשרת** תמיכה טובה יותר ב-IDE עם השלמה אוטומטית ובדיקת שגיאות - **מייעלת** את תהליך השינוי אם מזהי האלמנטים משתנים בעתיד קחו רגע לצפות בסרטון על שימוש ב-`const`, `let` ו-`var` [![סוגי משתנים](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "סוגי משתנים") > 🎥 לחצו על התמונה למעלה לצפייה בסרטון על משתנים. ### הוספת לוגיקת התחלה כאן הכל מתחבר! 🚀 אתם עומדים לכתוב את מאזין האירועים הראשון שלכם, ויש משהו מאוד מספק בלראות את הקוד שלכם מגיב ללחיצה על כפתור. תחשבו על זה: איפשהו בעולם, שחקן עומד ללחוץ על כפתור "התחל", והקוד שלכם צריך להיות מוכן לזה. אין לנו מושג מתי זה יקרה - אולי מיד, אולי אחרי שהוא ייקח קפה - אבל כשהוא יעשה זאת, המשחק שלכם יתחיל לפעול. כאשר המשתמש לוחץ על `start`, עלינו לבחור ציטוט, להגדיר את ממשק המשתמש ולהכין מעקב אחרי המילה הנוכחית והזמן. להלן קוד ה-JavaScript שתצטרכו להוסיף; נדון בו מיד לאחר בלוק הסקריפט. ```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 `${word} `}); // 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 מכיוון שהשחקנים מתחילים מהמילה הראשונה - **מכין** את מצב המשחק לסיבוב חדש **🎨 הגדרת ממשק משתמש ותצוגה:** - **יוצר** מערך של אלמנטים ``, עוטף כל מילה לעיצוב פרטני - **מצרף** את אלמנטי ה-span למחרוזת אחת לעדכון DOM יעיל - **מדגיש** את המילה הראשונה על ידי הוספת מחלקת CSS `highlight` - **מנקה** הודעות משחק קודמות כדי לספק התחלה נקייה **⌨️ הכנת שדה הטקסט:** - **מנקה** כל טקסט קיים בשדה הקלט - **ממקם את הפוקוס** על שדה הטקסט כדי שהשחקנים יוכלו להתחיל להקליד מיד - **מכין** את אזור הקלט לסשן המשחק החדש **⏱️ אתחול טיימר:** - **לוכד** את חותמת הזמן הנוכחית באמצעות `new Date().getTime()` - **מאפשר** חישוב מדויק של מהירות ההקלדה וזמן הסיום - **מתחיל** את מעקב הביצועים לסשן המשחק ### הוספת לוגיקת הקלדה כאן אנחנו מתמודדים עם לב המשחק שלנו! אל תדאגו אם זה נראה הרבה בהתחלה - נעבור על כל חלק, ובסוף תראו כמה זה הגיוני. מה שאנחנו בונים כאן הוא די מתוחכם: בכל פעם שמישהו מקליד אות, הקוד שלנו יבדוק מה הוא הקליד, ייתן לו משוב, ויחליט מה צריך לקרות הלאה. זה דומה לאופן שבו מעבדי תמלילים מוקדמים כמו WordStar בשנות ה-70 סיפקו משוב בזמן אמת למקלידים. ```javascript // 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'; } }); ``` **הבנת זרימת לוגיקת ההקלדה:** הפונקציה הזו משתמשת בגישה של "מפל", בודקת תנאים מהספציפי לכללי. בואו נפרק כל תרחיש: ```mermaid 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`, והתחילו להקליד! זה אמור להיראות קצת כמו האנימציה שראינו קודם. ![אנימציה של המשחק בפעולה](../../../../4-typing-game/images/demo.gif) **מה לבדוק באפליקציה שלכם:** - **מאמת** שלחיצה על Start מציגה ציטוט אקראי - **מאשר** שהקלדה מדגישה את המילה הנוכחית כראוי - **בודק** שעיצוב שגיאה מופיע עבור הקלדה שגויה - **מבטיח** שסיום מילים מקדם את ההדגשה כראוי - **בודק** שסיום הציטוט מציג הודעת סיום עם זמן **טיפים נפוצים לדיבוג:** - **בדקו** את קונסולת הדפדפן (F12) עבור שגיאות JavaScript - **וודאו** שכל שמות הקבצים תואמים בדיוק (רגיש לאותיות גדולות/קטנות) - **וודאו** ש-Live Server פועל ומרענן כראוי - **בדקו** ציטוטים שונים כדי לוודא שהבחירה האקראית עובדת --- ## אתגר סוכן GitHub Copilot 🎮 השתמשו במצב סוכן כדי להשלים את האתגר הבא: **תיאור:** הרחיבו את משחק ההקלדה על ידי יישום מערכת קושי שמתאימה את המשחק על בסיס ביצועי השחקן. אתגר זה יעזור לכם לתרגל טיפול באירועים מתקדמים, ניתוח נתונים ועדכוני ממשק משתמש דינמיים. **הנחיה:** צרו מערכת התאמת קושי למשחק ההקלדה ש: 1. עוקבת אחרי מהירות ההקלדה של השחקן (מילים לדקה) ואחוזי דיוק 2. מתאימה אוטומטית לשלוש רמות קושי: קל (ציטוטים פשוטים), בינוני (ציטוטים נוכחיים), קשה (ציטוטים מורכבים עם סימני פיסוק) 3. מציגה את רמת הקושי הנוכחית וסטטיסטיקות השחקן בממשק המשתמש 4. מיישמת מונה רצף שמעלה את רמת הקושי לאחר 3 ביצועים טובים רצופים 5. מוסיפה משוב ויזואלי (צבעים, אנימציות) כדי להצביע על שינויי קושי הוסיפו את האלמנטים הדרושים ב-HTML, סגנונות CSS ופונקציות JavaScript כדי ליישם תכונה זו. כללו טיפול בשגיאות מתאים וודאו שהמשחק נשאר נגיש עם תוויות ARIA מתאימות. למדו עוד על [מצב סוכן](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) כאן. ## 🚀 אתגר מוכנים לקחת את משחק ההקלדה שלכם לשלב הבא? נסו ליישם את התכונות המתקדמות הללו כדי להעמיק את ההבנה שלכם בטיפול באירועים ובמניפולציה של DOM: **הוסיפו עוד פונקציונליות:** | תכונה | תיאור | מיומנויות שתתרגלו | |-------|--------|--------------------| | **שליטה בקלט** | השבתת מאזין אירוע `input` בסיום, והפעלתו מחדש כאשר לוחצים על הכפתור | ניהול אירועים ושליטה במצב | | **ניהול מצב ממשק משתמש** | השבתת שדה הטקסט כאשר השחקן מסיים את הציטוט | מניפולציה של מאפייני DOM | | **תיבת דיאלוג מודאלית** | הצגת תיבת דיאלוג מודאלית עם הודעת הצלחה | תבניות ממשק מתקדמות ונגישות | | **מערכת ניקוד גבוהה** | שמירת ניקוד גבוה באמצעות `localStorage` | APIs לאחסון בדפדפן ושימור נתונים | **טיפים ליישום:** - **חקרו** `localStorage.setItem()` ו-`localStorage.getItem()` לאחסון מתמשך - **תרגלו** הוספה והסרה דינמית של מאזיני אירועים - **חקור** אלמנטים של דיאלוג HTML או תבניות מודאליות ב-CSS - **שקלו** נגישות כאשר משביתים ומפעילים מחדש פקדי טופס ## חידון לאחר ההרצאה [חידון לאחר ההרצאה](https://ff-quizzes.netlify.app/web/quiz/22) ## סקירה ולימוד עצמי קראו על [כל האירועים הזמינים](https://developer.mozilla.org/docs/Web/Events) למפתח דרך הדפדפן, ושקלו את התרחישים שבהם הייתם משתמשים בכל אחד מהם. ## משימה [צרו משחק מקלדת חדש](assignment.md) --- **הצהרת אחריות**: מסמך זה תורגם באמצעות שירות תרגום AI [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נושאים באחריות לאי הבנות או פרשנויות שגויות הנובעות משימוש בתרגום זה.