שקף שער - בניתי אימפריה ב-10 דקות
00:00-05:00הרקע
שיעור 2 עוסק בבניית משחק Clicker/Idle Game - סוג משחק שונה לחלוטין מ-Snake. במקום רפלקסים ותנועה, כאן עוסקים במספרים, כלכלה, ממשק משתמש ושמירת נתונים. הקונספט המרכזי: ניהול מצבים (State Management) ו-שמירת נתונים (Persistence).
שתף מסך עם המשחק המוכן - מספרים רצים למעלה, כפתור ענק ולחיצות
"ערב טוב לכולם! ברוכים הבאים לשיעור השני שלנו. בשיעור שעבר בנינו את 'סנייק'. זה היה משחק של רפלקסים – צריך להיות מהיר, צריך לא להתנגש."
"היום? היום אנחנו הולכים לעבוד על חלק אחר במוח. החלק שמתמכר למספרים שעולים למעלה."
"תסתכלו על המסך שלי. זה נראה פשוט, נכון? לוחצים על כפתור, מקבלים כסף. קונים מכונה, היא עושה כסף בשבילנו."
"אבל המשחקים האלה – שנקראים Clicker Games או Idle Games – הם מהמשחקים המצליחים ביותר בהיסטוריה. 'Cookie Clicker' התחיל כבדיחה והפך לתופעה עולמית."
"היום אנחנו הולכים לבנות מכונה שמדפיסה כסף וירטואלי."
הפתיחה צריכה להרגיש כמו "מגרש משחקים חדש". הדגש שזה סוג אחר של משחק - לא רפלקסים, אלא אסטרטגיה. אם יש תלמידים שמכירים Cookie Clicker או Idle Miner, תן להם לשתף - זה יוצר מעורבות.
מה נלמד היום - שלושה דברים חדשים
שלושת הנושאים המרכזיים
1. ממשק משתמש (UI): בשיעור הקודם השתמשנו ב-Canvas לצייר. היום נבנה כפתורים, חנויות וטקסטים - כמו אתר אינטרנט אמיתי.
2. כלכלה של משחק (Game Economy): איך גורמים למשחק להיות מאתגר ולא משעמם - באמצעות עליית מחירים.
3. שמירת נתונים (Persistence): איך גורמים למחשב לזכור את ההתקדמות גם אחרי סגירת הדפדפן.
"אנחנו נלמד שלושה דברים סופר-חשובים שלא נגענו בהם בשיעור הקודם:"
"ממשק משתמש (UI) – איך בונים כפתורים וחנויות, ולא רק ציורים זזים."
"כלכלה של משחק – איך גורמים למשחק להיות מאתגר ולא קל מדי."
"הדבר הכי חשוב: איך גורמים למחשב לזכור את הכסף שלכם גם אחרי שסוגרים את הדפדפן."
"אז תפתחו את Antigravity, תכינו את האצבעות, אנחנו מתחילים."
שלושת הנושאים האלה מספרים סיפור שלם: בונים (UI), מאזנים (כלכלה), ושומרים (Persistence). ודא שהתלמידים מבינים שהשיעור הזה "מבשל" יותר - לא רק יוצרים, אלא חושבים על חוויית המשתמש.
DOM vs Canvas - למה לא ציור הפעם?
05:00-10:00DOM - Document Object Model
Canvas (שיעור 1): לוח ציור חופשי. מתאים למשחקים גרפיים עם תנועה (Snake, שחמט ויזואלי, פלטפורמר). ה-AI מחשב כל פיקסל.
DOM (שיעור 2): אלמנטים מוכנים של הדפדפן - כפתורים, טקסטים, רשימות. מתאים לממשקי משתמש, חנויות, ותצוגות מידע. הדפדפן מנהל את הכל.
פתח פרויקט חדש ב-Antigravity - מסך נקי
"דבר ראשון, כולם לפתוח פרויקט חדש. File, New Project. תקראו לו CryptoTycoon או איזה שם שבא לכם."
"לפני שאנחנו כותבים את הפרומפט, אני רוצה שנבין משהו טכני קטן. זוכרים שבסנייק כתבנו פרומפט עם המילה Canvas? Canvas זה כמו לוח ציור. ה-AI היה צריך לחשב כל פיקסל."
"היום, אנחנו לא צריכים לצייר נחש שזז. אנחנו צריכים כפתורים, טקסטים, ורשימות."
"לכן, היום אנחנו נשתמש בכוח של הדפדפן עצמו – ה-DOM. אנחנו נבקש מהסוכן לבנות לנו ממשק משתמש רגיל, כמו של אתר אינטרנט."
בדיקת דופק בצ'אט - כולם עם פרויקט חדש?
"כולם עם פרויקט חדש וריק פתוח מול העיניים? תכתבו לי 'כן' בצ'אט."
לא צריך להעמיק יותר מדי בהסבר הטכני של DOM. המטרה היא רק שהתלמידים יבינו למה הפעם לא כותבים "Canvas" בפרומפט. ההבדל הפשוט: ציור חופשי (Canvas) מול חלקי לגו מוכנים (DOM).
UI - ממשק משתמש
UI - ממשק משתמש
UI הוא כל מה שהמשתמש רואה ומקליק עליו: כפתורים, תצוגת ניקוד, חנות שדרוגים, אנימציות. בניגוד ל-UX (חוויית משתמש) שעוסק ב"איך מרגישים", UI עוסק ב"איך נראה ופועל".
"בשיעור הקודם הסוכן צייר לנו נחש על Canvas. היום הוא יבנה לנו ממשק משתמש - כפתורים, חנויות, מונים. זה נקרא UI - User Interface."
"חשבו על זה ככה: Canvas זה כמו לצייר ציור חופשי על נייר. DOM זה כמו להרכיב לגו - יש חלקים מוכנים שמסדרים על המסך."
"הסוכן שלנו הוא אלוף עולם בזה. הוא יודע לעצב כפתורים ב-CSS הרבה יותר טוב משהוא יודע לצייר נחשים."
הפרומפט הראשון - המנוע
10:00-20:00בניית הבסיס
הפרומפט הראשון מגדיר את הלב של המשחק: כפתור לחיצה, מונה כסף, וחנות עם פריט אחד. שלושת המרכיבים ההכרחיים: פעולת הליבה (לחיצה), תגמול (כסף), ומטרה (שדרוגים).
הצבע על חלונית ה-Manager / Chat
"אנחנו הולכים לבנות את הלב של המשחק בפרומפט אחד. אנחנו צריכים להגדיר לסוכן:"
"1. מה המטרה? להשיג קריפטו."
"2. מה הפעולה? להקליק."
"3. מה הפרס? חנות שדרוגים."
"אני שולח לכם בצ'אט את הפרומפט. תעתיקו ותדביקו."
המתנה לסיום יצירת הקוד. לחץ Preview כשהסוכן מסיים
"תסתכלו על התוכנית שהוא יוצר. הוא לא רק כותב קוד. הוא מתכנן את הלוגיקה:"
"הוא יוצר משתנה score שישמור כמה כסף יש לנו. הוא יוצר פונקציה click() שתופעל כל פעם שנלחץ. והוא משתמש ב-setInterval – טיימר שרץ כל שנייה כדי לתת לנו כסף אוטומטי."
פתח Preview והדגם לחיצות
"אוקיי, הסוכן סיים. בואו נלחץ על Preview."
[תן לתלמידים לראות את התוצאה]
"וואו. תראו את זה. יש לנו כפתור ענק, יש לנו מונה למעלה, ויש לנו חנות בצד ימין."
"תנסו לשחק רגע. תלחצו על הכפתור... תגיעו ל-10 מטבעות... תקנו GPU Miner. עכשיו תעזבו את העכבר."
"אתם רואים את המספר עולה לבד? מזל טוב, יצרתם הכנסה פסיבית!"
תנו לתלמידים לשחק 1-2 דקות אחרי שה-Preview עולה. ההנאה מלחיצות ומלראות מספרים עולים היא חלק מהלמידה. אם יש תלמידים שהמשחק לא עבד להם - עזרו מיידית, כי בשיעור הזה כולם צריכים לעבוד בפועל.
State Management - ניהול מצבים
State - מצב
State (מצב) הוא כל המידע שהמשחק צריך לזכור בכל רגע נתון: כמה כסף יש לשחקן, כמה כורים הוא קנה, מה המחיר הנוכחי של כל שדרוג.
State Management הוא האופן שבו הקוד מנהל את המידע הזה - מעדכן אותו כשקורה משהו (לחיצה, קנייה) ומציג אותו על המסך.
"הסוכן יצר לנו משתנים שמנהלים את המצב של המשחק. בכל רגע, המחשב יודע:"
"כמה כסף יש לכם. כמה כורים קניתם. כמה כסף נכנס כל שנייה."
"זה נקרא State Management - ניהול מצבים. בכל פעם שאתם לוחצים על הכפתור, ה-State מתעדכן. בכל פעם שקונים כורה, ה-State מתעדכן. וה-UI מציג את ה-State על המסך."
בעיית האינפלציה - למה המשחק משעמם
20:00-30:00Game Balance - איזון המשחק
אם כל GPU Miner עולה תמיד 10 מטבעות, תוך דקה אפשר לקנות מאות כורים והמשחק נהיה חסר אתגר. איזון משחק הוא האמנות של לגרום למשחק להרגיש מאתגר אבל לא מתסכל - "קל ללמוד, קשה לשלוט" (Easy to learn, hard to master).
שחק במשחק מול כולם - הדגם את הבעיה
"רגע, חברים. יש לנו בעיה במשחק. מישהו שם לב מה היא?"
"תסתכלו עליי. אני קונה GPU ב-10 מטבעות. עכשיו יש לי הכנסה אוטומטית. הכסף נכנס מהר. אני קונה עוד GPU. כמה הוא עולה? עדיין 10. ועוד אחד? עדיין 10."
"תוך דקה אני יכול לקנות אלף כורים. המשחק נהיה קל מדי ומשעמם תוך שתי דקות."
"במשחקים אמיתיים, ככל שאתה מתעשר, הדברים נהיים יקרים יותר. קוראים לזה עלות אקספוננציאלית."
"בואו נלמד את הסוכן שלנו שיעור בכלכלה."
זה רגע "אהה!" טוב. תנו לתלמידים לגלות את הבעיה בעצמם. שאלו "מישהו שם לב מה הבעיה?" לפני שאתם מסבירים. אם מישהו מזהה - תנו לו קרדיט. זה מלמד אותם לחשוב כמו מעצבי משחקים.
עלות אקספוננציאלית - תיקון הכלכלה
Exponential Cost - עלות אקספוננציאלית
עלות אקספוננציאלית פירושה שהמחיר עולה באחוז קבוע אחרי כל קנייה:
10 → 12 → 14 → 16 → 18... (עלייה של 15% כל פעם).
זה יוצר עקומת קושי טבעית: ההתחלה קלה ומהנה, אבל ככל שמתקדמים, צריך לעבוד יותר קשה.
זה העיקרון מאחורי כמעט כל משחק Idle מצליח.
"תעתיקו את הפרומפט הזה. שימו לב להוראה: 'Increase by 15%'."
"זה אומר שאם המחיר היה 10, הוא יהפוך ל-12 אחרי עיגול. אחר כך ל-14, אחר כך ל-16... זה נראה כמו שינוי קטן, אבל זה מה שהופך את המשחק למאתגר לאורך זמן."
הרץ את המשחק ב-Preview ובדוק שהמחיר עולה
"בואו נבדוק. אני קונה ב-10... הופה! המחיר השתנה ל-12. אני קונה ב-12... המחיר השתנה ל-14. עכשיו אני צריך לעבוד קשה יותר בשביל השדרוג הבא. מעולה."
אם יש זמן, שווה להסביר שהנוסחה היא: מחיר_חדש = מחיר_נוכחי × 1.15. זה לא הכרחי, אבל תלמידים סקרנים ישמחו להבין את המתמטיקה. הדגישו שלא צריך לכתוב את הנוסחה - הסוכן עושה את זה בשבילנו.
LocalStorage - שמירת נתונים
30:00-40:00LocalStorage - אחסון מקומי
LocalStorage הוא "כספת" שקיימת בכל דפדפן. היא מאפשרת לשמור מידע שיישאר גם אחרי סגירת הדפדפן. בלי LocalStorage, כל המשתנים נמחקים ברגע שסוגרים את הדף. עם LocalStorage, המשחק "זוכר" את ההתקדמות.
עשה פרצוף דרמטי
"עכשיו הגענו לחלק הכי חשוב בשיעור. אני רוצה שכולכם תצברו קצת כסף במשחק. תגיעו ל-100 מטבעות."
[חכה 30 שניות]
"הגעתם? יופי. עכשיו... תלחצו על כפתור ה-Refresh בדפדפן."
לחץ Refresh אצלך - המספר מתאפס ל-0
"לאאאא! הכל נעלם. חזרנו לאפס."
"תארו לעצמכם ששיחקתם בזה שבוע, צברתם מיליונים, בטעות סגרתם את החלון – והכל הלך. הייתם שוברים את המקלדת."
"למה זה קרה? כי HTML ו-JavaScript בברירת מחדל לא 'זוכרים' כלום. הם חיים את הרגע. ברגע שסגרתם, הזיכרון נמחק."
"כדי לתקן את זה, אנחנו צריכים להשתמש ב'כספת' סודית שיש לכל דפדפן. הכספת הזו נקראת LocalStorage."
"שימו לב מה ביקשנו:"
"Auto-save: תשמור לבד, אל תחכה שאני אלחץ."
"Every second: כל הזמן."
"Restore: כשהמשחק נפתח מחדש, תחזיר את המצב לקדמותו."
הרץ, שחק קצת, צבור ניקוד, ואז עשה Refresh
"רגע האמת... יש לי 50 מטבעות. אני עושה Refresh..."
[לחץ Refresh]
"בום! המספר נשאר 50!"
"זה הרגע שבו הפרויקט שלכם הפך מ'סתם דף אינטרנט' לאפליקציה אמיתית שזוכרת את המשתמש."
הרגע הדרמטי של ה-Refresh הוא קריטי. עשו אותו בשני שלבים: 1) קודם ה-Refresh שמוחק הכל (כאב), 2) אחרי הפרומפט - ה-Refresh ששומר (הקלה). הקונטרסט הזה יוצר רגע למידה עוצמתי. ודאו שכל התלמידים עברו את שני השלבים.
סיכום ושיעורי בית
40:00-45:00סיכום המושגים
DOM - אלמנטים מוכנים של הדפדפן (כפתורים, טקסטים)
UI - ממשק משתמש, מה שהמשתמש רואה ולוחץ
State Management - ניהול המצב של המשחק (כמה כסף, כמה כורים)
Game Balance - איזון המשחק כדי שישאר מאתגר
Exponential Cost - מחיר שעולה באחוז אחרי כל קנייה
LocalStorage - "כספת" של הדפדפן לשמירת נתונים
Persistence - שמירת מידע שנשאר גם אחרי סגירה
setInterval - טיימר שמריץ פעולה כל X שניות
עצור שיתוף מסך, חזור למצלמה
"חברים, תראו מה הספקנו ב-45 דקות:"
"בנינו משחק עם ממשק משתמש אמיתי."
"יצרנו כלכלה חכמה שמעלה מחירים."
"וגרמנו למשחק לשמור את עצמו לנצח (או עד שתנקו קוקיז)."
"המשימה שלכם לבית: המשחק שלנו כרגע הוא על 'ביטקוין' ו'כורים'. אני רוצה לראות את היצירתיות שלכם. עשו Reskinning - החלפת עור למשחק."
"תבקשו מהסוכן: 'Change the theme to a Bakery. Change Bitcoin to Cookies and GPU Miner to Grandma.' או תשנו למפעל מכוניות, חנות חיות, למה שבא לכם."
"בשיעור הבא, אנחנו ניקח את הסנייק משיעור 1 ואת הקליקר משיעור 2, נבנה להם אתר פורטפוליו משותף, ונעלה אותו לאינטרנט כדי שתוכלו לשלוח לינק לחברים בווטסאפ."
"תודה רבה לכולם, נתראה בשיעור הבא!"
שלחו את הפרומפט ל-Reskinning בצ'אט הכללי כדי שהתלמידים יוכלו להעתיק. הטיזר לשיעור 3 (פורטפוליו + העלאה לאינטרנט) חשוב ליצירת ציפייה. אם תלמידים רוצים להוסיף עוד פריטים לחנות כשיעורי בית - עודדו אותם!