1

שקף שער - בניתי אימפריה ב-10 דקות

00:00-05:00
שיעור 2 עוסק בבניית משחק Clicker/Idle Game - סוג משחק שונה לחלוטין מ-Snake. במקום רפלקסים ותנועה, כאן עוסקים במספרים, כלכלה, ממשק משתמש ושמירת נתונים. הקונספט המרכזי: ניהול מצבים (State Management) ו-שמירת נתונים (Persistence).
Cookie Clicker, AdVenture Capitalist ו-Idle Miner הם דוגמאות למשחקי Clicker מצליחים מאוד. הז'אנר הזה ממכר כי הוא מפעיל את מרכזי התגמול במוח - לראות מספרים עולים מרגיש טוב.

שתף מסך עם המשחק המוכן - מספרים רצים למעלה, כפתור ענק ולחיצות "ערב טוב לכולם! ברוכים הבאים לשיעור השני שלנו. בשיעור שעבר בנינו את 'סנייק'. זה היה משחק של רפלקסים – צריך להיות מהיר, צריך לא להתנגש."

"היום? היום אנחנו הולכים לעבוד על חלק אחר במוח. החלק שמתמכר למספרים שעולים למעלה."

"תסתכלו על המסך שלי. זה נראה פשוט, נכון? לוחצים על כפתור, מקבלים כסף. קונים מכונה, היא עושה כסף בשבילנו."

"אבל המשחקים האלה – שנקראים Clicker Games או Idle Games – הם מהמשחקים המצליחים ביותר בהיסטוריה. 'Cookie Clicker' התחיל כבדיחה והפך לתופעה עולמית."

"היום אנחנו הולכים לבנות מכונה שמדפיסה כסף וירטואלי."

הפתיחה צריכה להרגיש כמו "מגרש משחקים חדש". הדגש שזה סוג אחר של משחק - לא רפלקסים, אלא אסטרטגיה. אם יש תלמידים שמכירים Cookie Clicker או Idle Miner, תן להם לשתף - זה יוצר מעורבות.
2

מה נלמד היום - שלושה דברים חדשים

1. ממשק משתמש (UI): בשיעור הקודם השתמשנו ב-Canvas לצייר. היום נבנה כפתורים, חנויות וטקסטים - כמו אתר אינטרנט אמיתי.

2. כלכלה של משחק (Game Economy): איך גורמים למשחק להיות מאתגר ולא משעמם - באמצעות עליית מחירים.

3. שמירת נתונים (Persistence): איך גורמים למחשב לזכור את ההתקדמות גם אחרי סגירת הדפדפן.

"אנחנו נלמד שלושה דברים סופר-חשובים שלא נגענו בהם בשיעור הקודם:"

"ממשק משתמש (UI) – איך בונים כפתורים וחנויות, ולא רק ציורים זזים."

"כלכלה של משחק – איך גורמים למשחק להיות מאתגר ולא קל מדי."

"הדבר הכי חשוב: איך גורמים למחשב לזכור את הכסף שלכם גם אחרי שסוגרים את הדפדפן."

"אז תפתחו את Antigravity, תכינו את האצבעות, אנחנו מתחילים."

שלושת הנושאים האלה מספרים סיפור שלם: בונים (UI), מאזנים (כלכלה), ושומרים (Persistence). ודא שהתלמידים מבינים שהשיעור הזה "מבשל" יותר - לא רק יוצרים, אלא חושבים על חוויית המשתמש.
3

DOM vs Canvas - למה לא ציור הפעם?

05:00-10:00
Document Object Model - the structure of a web page as interactive elements Canvas (שיעור 1): לוח ציור חופשי. מתאים למשחקים גרפיים עם תנועה (Snake, שחמט ויזואלי, פלטפורמר). ה-AI מחשב כל פיקסל.

DOM (שיעור 2): אלמנטים מוכנים של הדפדפן - כפתורים, טקסטים, רשימות. מתאים לממשקי משתמש, חנויות, ותצוגות מידע. הדפדפן מנהל את הכל.
ההבדל חשוב להבנה: Canvas זה כמו לצייר על נייר לבן - צריך לצייר כל דבר מאפס. DOM זה כמו להרכיב לגו - יש חלקים מוכנים (כפתורים, טקסטים) שפשוט מסדרים על המסך.

פתח פרויקט חדש ב-Antigravity - מסך נקי "דבר ראשון, כולם לפתוח פרויקט חדש. File, New Project. תקראו לו CupcakeClicker או איזה שם שבא לכם."

"לפני שאנחנו כותבים את הפרומפט, אני רוצה שנבין משהו טכני קטן. זוכרים שבסנייק כתבנו פרומפט עם המילה Canvas? Canvas זה כמו לוח ציור. ה-AI היה צריך לחשב כל פיקסל."

"היום, אנחנו לא צריכים לצייר נחש שזז. אנחנו צריכים כפתורים, טקסטים, ורשימות."

"לכן, היום אנחנו נשתמש בכוח של הדפדפן עצמו – ה-DOM. אנחנו נבקש מהסוכן לבנות לנו ממשק משתמש רגיל, כמו של אתר אינטרנט."

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

לא צריך להעמיק יותר מדי בהסבר הטכני של DOM. המטרה היא רק שהתלמידים יבינו למה הפעם לא כותבים "Canvas" בפרומפט. ההבדל הפשוט: ציור חופשי (Canvas) מול חלקי לגו מוכנים (DOM).
4

UI - ממשק משתמש

User Interface - the visual elements users interact with UI הוא כל מה שהמשתמש רואה ומקליק עליו: כפתורים, תצוגת ניקוד, חנות שדרוגים, אנימציות. בניגוד ל-UX (חוויית משתמש) שעוסק ב"איך מרגישים", UI עוסק ב"איך נראה ופועל".
ההבדל בין UI ל-UX: UI זה "הכפתור ירוק, עגול, ובגודל 50 פיקסל". UX זה "הכפתור מרגיש מזמין ללחיצה ונותן תחושת סיפוק". שניהם חשובים, אבל היום נתמקד ב-UI - הבנייה הוויזואלית.

"בשיעור הקודם הסוכן צייר לנו נחש על Canvas. היום הוא יבנה לנו ממשק משתמש - כפתורים, חנויות, מונים. זה נקרא UI - User Interface."

"חשבו על זה ככה: Canvas זה כמו לצייר ציור חופשי על נייר. DOM זה כמו להרכיב לגו - יש חלקים מוכנים שמסדרים על המסך."

"הסוכן שלנו הוא אלוף עולם בזה. הוא יודע לעצב כפתורים ב-CSS הרבה יותר טוב משהוא יודע לצייר נחשים."

5

הפרומפט הראשון - המנוע

10:00-20:00
הפרומפט הראשון מגדיר את הלב של המשחק: כפתור אפייה, מונה קאפקייקס, וחנות מתוקה עם שדרוגים. שלושת המרכיבים ההכרחיים: פעולת הליבה (אפייה), תגמול (קאפקייקס), ומטרה (שדרוגים).
// Task Build a single-file HTML/CSS/JS 'Cupcake Clicker'. // HTML Structure Left: Giant 'Bake' button & counter. Right: 'Sweet Shop'. // JS Logic Invent 5 buyable auto-baking upgrades (scale math!). Spawn a bonus cupcake every 10-15s for massive points. // CSS Design Sweet pink theme, fun hover & juicy click animations.

הצבע על חלונית ה-Manager / Chat "אנחנו הולכים לבנות את הלב של המשחק בפרומפט אחד. אנחנו צריכים להגדיר לסוכן:"

"1. מה המטרה? לאפות קאפקייקס."
"2. מה הפעולה? ללחוץ על כפתור האפייה."
"3. מה הפרס? חנות שדרוגים."

"אני שולח לכם בצ'אט את הפרומפט. תעתיקו ותדביקו."

המתנה לסיום יצירת הקוד. לחץ Preview כשהסוכן מסיים "תסתכלו על התוכנית שהוא יוצר. הוא לא רק כותב קוד. הוא מתכנן את הלוגיקה:"

"הוא יוצר משתנה score שישמור כמה קאפקייקס יש לנו. הוא יוצר פונקציה bake() שתופעל כל פעם שנלחץ. והוא משתמש ב-setInterval – טיימר שרץ כל שנייה כדי לאפות קאפקייקס אוטומטית."

פתח Preview והדגם לחיצות "אוקיי, הסוכן סיים. בואו נלחץ על Preview." [תן לתלמידים לראות את התוצאה] "וואו. תראו את זה. יש לנו כפתור ענק, יש לנו מונה למעלה, ויש לנו חנות בצד ימין."

"תנסו לשחק רגע. תלחצו על הכפתור... תצברו קאפקייקס... תקנו שדרוג בחנות. עכשיו תעזבו את העכבר."

"אתם רואים את המספר עולה לבד? מזל טוב, יצרתם הכנסה פסיבית!"

תנו לתלמידים לשחק 1-2 דקות אחרי שה-Preview עולה. ההנאה מלחיצות ומלראות מספרים עולים היא חלק מהלמידה. אם יש תלמידים שהמשחק לא עבד להם - עזרו מיידית, כי בשיעור הזה כולם צריכים לעבוד בפועל.
6

State Management - ניהול מצבים

State Management - tracking and updating all game data State (מצב) הוא כל המידע שהמשחק צריך לזכור בכל רגע נתון: כמה קאפקייקס יש לשחקן, כמה שדרוגים הוא קנה, מה המחיר הנוכחי של כל שדרוג.

State Management הוא האופן שבו הקוד מנהל את המידע הזה - מעדכן אותו כשקורה משהו (לחיצה, קנייה) ומציג אותו על המסך.
בפיתוח מודרני, State Management הוא אחד הנושאים הכי חשובים. ספריות כמו React, Vue ו-Redux נבנו בדיוק בגלל הצורך לנהל מצב בצורה מסודרת. במשחק שלנו, ה-State פשוט: cupcakes + upgrades. בפרויקטים גדולים זה יכול להיות מורכב מאוד.

"הסוכן יצר לנו משתנים שמנהלים את המצב של המשחק. בכל רגע, המחשב יודע:"

"כמה קאפקייקס יש לכם. כמה שדרוגים קניתם. כמה קאפקייקס נאפים כל שנייה."

"זה נקרא State Management - ניהול מצבים. בכל פעם שאתם לוחצים על הכפתור, ה-State מתעדכן. בכל פעם שקונים שדרוג, ה-State מתעדכן. וה-UI מציג את ה-State על המסך."

7

בעיית האינפלציה - למה המשחק משעמם

20:00-30:00
Game Balance - ensuring the game stays challenging and fun אם כל Mixing Bowl עולה תמיד 10, תוך דקה אפשר לקנות מאות קערות והמשחק נהיה חסר אתגר. איזון משחק הוא האמנות של לגרום למשחק להרגיש מאתגר אבל לא מתסכל - "קל ללמוד, קשה לשלוט" (Easy to learn, hard to master).

שחק במשחק מול כולם - הדגם את הבעיה "רגע, חברים. יש לנו בעיה במשחק. מישהו שם לב מה היא?"

"תסתכלו עליי. אני קונה Mixing Bowl ב-10. עכשיו יש לי אפייה אוטומטית. הקאפקייקס נכנסים מהר. אני קונה עוד קערה. כמה היא עולה? עדיין 10. ועוד אחת? עדיין 10."

"תוך דקה אני יכול לקנות אלף קערות. המשחק נהיה קל מדי ומשעמם תוך שתי דקות."

"במשחקים אמיתיים, ככל שאתה מתעשר, הדברים נהיים יקרים יותר. קוראים לזה עלות אקספוננציאלית."

"בואו נלמד את הסוכן שלנו שיעור בכלכלה."

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

עלות אקספוננציאלית - תיקון הכלכלה

Exponential Cost - price increases by a percentage after each purchase עלות אקספוננציאלית פירושה שהמחיר עולה באחוז קבוע אחרי כל קנייה: 10 → 12 → 14 → 16 → 18... (עלייה של 15% כל פעם).

זה יוצר עקומת קושי טבעית: ההתחלה קלה ומהנה, אבל ככל שמתקדמים, צריך לעבוד יותר קשה. זה העיקרון מאחורי כמעט כל משחק Idle מצליח.
Update the shop logic: The price of each upgrade must increase by 15% after every purchase. Round the price to the nearest integer.

"תעתיקו את הפרומפט הזה. שימו לב להוראה: 'Increase by 15%'."

"זה אומר שאם המחיר היה 10, הוא יהפוך ל-12 אחרי עיגול. אחר כך ל-14, אחר כך ל-16... זה נראה כמו שינוי קטן, אבל זה מה שהופך את המשחק למאתגר לאורך זמן."

הרץ את המשחק ב-Preview ובדוק שהמחיר עולה "בואו נבדוק. אני קונה ב-10... הופה! המחיר השתנה ל-12. אני קונה ב-12... המחיר השתנה ל-14. עכשיו אני צריך לעבוד קשה יותר בשביל השדרוג הבא. מעולה."

אם יש זמן, שווה להסביר שהנוסחה היא: מחיר_חדש = מחיר_נוכחי × 1.15. זה לא הכרחי, אבל תלמידים סקרנים ישמחו להבין את המתמטיקה. הדגישו שלא צריך לכתוב את הנוסחה - הסוכן עושה את זה בשבילנו.
9

LocalStorage - שמירת נתונים

30:00-40:00
LocalStorage - browser's built-in persistent storage LocalStorage הוא "כספת" שקיימת בכל דפדפן. היא מאפשרת לשמור מידע שיישאר גם אחרי סגירת הדפדפן. בלי LocalStorage, כל המשתנים נמחקים ברגע שסוגרים את הדף. עם LocalStorage, המשחק "זוכר" את ההתקדמות.
LocalStorage שומר מידע כ-key/value pairs (מפתח ‑ ערך). הנפח מוגבל לכ-5MB - מספיק בהחלט למשחק Clicker. חשוב: ניקוי קוקיז/נתוני אתר ימחק גם את ה-LocalStorage. לפרויקטים גדולים משתמשים בבסיסי נתונים אמיתיים (Firebase, Supabase וכו').

עשה פרצוף דרמטי "עכשיו הגענו לחלק הכי חשוב בשיעור. אני רוצה שכולכם תצברו קצת כסף במשחק. תגיעו ל-100 מטבעות." [חכה 30 שניות] "הגעתם? יופי. עכשיו... תלחצו על כפתור ה-Refresh בדפדפן."

לחץ Refresh אצלך - המספר מתאפס ל-0 "לאאאא! הכל נעלם. חזרנו לאפס."

"תארו לעצמכם ששיחקתם בזה שבוע, צברתם מיליונים, בטעות סגרתם את החלון – והכל הלך. הייתם שוברים את המקלדת."

"למה זה קרה? כי HTML ו-JavaScript בברירת מחדל לא 'זוכרים' כלום. הם חיים את הרגע. ברגע שסגרתם, הזיכרון נמחק."

"כדי לתקן את זה, אנחנו צריכים להשתמש ב'כספת' סודית שיש לכל דפדפן. הכספת הזו נקראת LocalStorage."

Add an auto-save feature using LocalStorage. Save total cupcakes and owned items every second, and restore when page loads.

"שימו לב מה ביקשנו:"

"Auto-save: תשמור לבד, אל תחכה שאני אלחץ."
"Every second: כל הזמן."
"Restore: כשהמשחק נפתח מחדש, תחזיר את המצב לקדמותו."

הרץ, שחק קצת, צבור ניקוד, ואז עשה Refresh "רגע האמת... יש לי 50 מטבעות. אני עושה Refresh..." [לחץ Refresh] "בום! המספר נשאר 50!"

"זה הרגע שבו הפרויקט שלכם הפך מ'סתם דף אינטרנט' לאפליקציה אמיתית שזוכרת את המשתמש."

הרגע הדרמטי של ה-Refresh הוא קריטי. עשו אותו בשני שלבים: 1) קודם ה-Refresh שמוחק הכל (כאב), 2) אחרי הפרומפט - ה-Refresh ששומר (הקלה). הקונטרסט הזה יוצר רגע למידה עוצמתי. ודאו שכל התלמידים עברו את שני השלבים.
10

סיכום ושיעורי בית

40:00-45:00
DOM - אלמנטים מוכנים של הדפדפן (כפתורים, טקסטים)
UI - ממשק משתמש, מה שהמשתמש רואה ולוחץ
State Management - ניהול המצב של המשחק (כמה קאפקייקס, כמה שדרוגים)
Game Balance - איזון המשחק כדי שישאר מאתגר
Exponential Cost - מחיר שעולה באחוז אחרי כל קנייה
LocalStorage - "כספת" של הדפדפן לשמירת נתונים
Persistence - שמירת מידע שנשאר גם אחרי סגירה
setInterval - טיימר שמריץ פעולה כל X שניות

עצור שיתוף מסך, חזור למצלמה "חברים, תראו מה הספקנו ב-45 דקות:"

"בנינו משחק עם ממשק משתמש אמיתי."
"יצרנו כלכלה חכמה שמעלה מחירים."
"וגרמנו למשחק לשמור את עצמו לנצח (או עד שתנקו קוקיז)."

"המשימה שלכם לבית: המשחק שלנו כרגע הוא על 'קאפקייקס' ו'מאפייה'. אני רוצה לראות את היצירתיות שלכם. עשו Reskinning - החלפת עור למשחק."

"תבקשו מהסוכן: 'Change the theme to a Space Factory. Change Cupcakes to Rockets and Mixing Bowl to Launch Pad.' או תשנו למפעל מכוניות, חנות חיות, למה שבא לכם."

"בשיעור הבא, אנחנו ניקח את הסנייק משיעור 1 ואת הקליקר משיעור 2, נבנה להם אתר פורטפוליו משותף, ונעלה אותו לאינטרנט כדי שתוכלו לשלוח לינק לחברים בווטסאפ."

"תודה רבה לכולם, נתראה בשיעור הבא!"

שלחו את הפרומפט ל-Reskinning בצ'אט הכללי כדי שהתלמידים יוכלו להעתיק. הטיזר לשיעור 3 (פורטפוליו + העלאה לאינטרנט) חשוב ליצירת ציפייה. אם תלמידים רוצים להוסיף עוד פריטים לחנות כשיעורי בית - עודדו אותם!
סוף הערות מרצה - שיעור 2