1

שקף שער - המשחק הראשון שלכם עם פיזיקה

חלק 1: ~5 דק'
שיעור 4 מסמן קפיצה משמעותית: מעבר ממשחקים סטטיים (מספרים עולים בקליקר, תנועה במשבצות בסנייק) למשחק דינמי עם פיזיקה אמיתית. היום נבנה את Pong - משחק הווידאו הראשון שהשיג הצלחה מסחרית (1972), ואת אבא-סבא של כל משחקי הפעולה המודרניים.
Pong נוצר על ידי Atari ב-1972 והיה המשחק הראשון שהכניס את משחקי הווידאו לבתים. הוא גם המשחק הטוב ביותר כדי ללמוד על פיזיקה דיגיטלית: תנועה, מהירות, התנגשויות, וקפיצה.

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

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

"זה לא משחק של מספרים. זה לא משחק של משבצות. זה משחק של פיזיקה." [השהייה - תנו למילה לחלחל] "היום אנחנו בונים את Pong - אבא של כל משחקי המחשב בעולם. והפעם, אנחנו נעשה את זה בסגנון 2025: ניאון זוהר, פיצוצי חלקיקים, ויריב ממוחשב שמאתגר אותנו."

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

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

סטטי מול דינמי - סוגי משחקים

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

משחקים דינמיים: המסך משתנה כל הזמן, 60 פעמים בשנייה, גם אם לא לוחצים כלום. Pong - הכדור עף בעצמו, היריב זז בעצמו. המשחק "חי" ברצף.
המעבר מסטטי לדינמי הוא אחת הקפיצות הגדולות בפיתוח משחקים. זה הרגע שבו המשחק הופך ל"חי" - מרגיש כמו עולם אמיתי שממשיך לקרות גם בלי התערבות השחקן. זו גם הסיבה ש-Pong היה כל כך מהפכני ב-1972.

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

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

חתוך למשחק Pong - עזוב את העכבר "עכשיו תראו את זה. אני מניח את העכבר. הכדור ממשיך לזוז. היריב ממשיך לנוע. המשחק חי בלעדיי."

"זה ההבדל בין סטטי לדינמי. משחק סטטי - עובד על תורות. משחק דינמי - עובד בזמן אמיתי."

ההדגמה החזותית כאן היא הכל. תנו לתלמידים לראות את שני המשחקים זה ליד זה. ההשוואה מייצרת הבנה מיידית של מושג מרכזי בעיצוב משחקים. זה לא מושג טכני - זה מושג עיצובי.
3

Game Loop - הלב הפועם של המשחק

חלק 2: ~10 דק'
Game Loop - the heartbeat of every real-time game Game Loop הוא הרעיון שהמשחק חוזר על עצמו כל הזמן - 60 פעמים בשנייה (60 FPS).

כל "פעימה" של הלולאה: 1) עדכן את המיקומים (הזז את הכדור), 2) בדוק התנגשויות (האם פגע במשהו?), 3) צייר מחדש את המסך.

זה קורה כל כך מהר שהעין שלנו רואה תנועה חלקה, כמו בסרט קולנוע.
FPS (Frames Per Second) הוא הסטנדרט בתעשיית המשחקים. 60 FPS = 60 פעמים בשנייה המשחק מצייר את עצמו מחדש. זה אומר שיש רק 16.6 מילישניות לכל פריים - הסוכן שלנו יודע לכתוב קוד אופטימלי שעומד בזה.

"אז איך המחשב יוצר את האשליה הזו? Game Loop - לולאת משחק."

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

"במשחק שלנו, 60 פעמים בשנייה, המחשב עושה את התהליך הזה:"

"1. עדכן: תזיז את הכדור קצת. תזיז את היריב קצת.
2. בדוק: האם הכדור פגע במשהו?
3. צייר: מחק את המסך וצייר הכל מחדש במיקומים החדשים."

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

"וזה בדיוק מה שה-AI יכתוב עבורנו בכמה שניות."

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

Prototype - גרסת הניסיון הראשונה

Prototype - a rough first version to test the core idea Prototype הוא גרסה ראשונה פשוטה שבודקת את הרעיון המרכזי. לא יפה, לא מלוטש - רק עובד.

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

"לפני שנבנה משחק יפהפה עם ניאון וחלקיקים, צריך לדבר על Prototype - פרוטוטייפ, אב-טיפוס."

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

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

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

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

5

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

חלק 3: ~10 דק'
הפרומפט הראשון מבקש מה-AI לבנות את הליבה של המשחק: כדור שזז, שני מחבטים (אחד נשלט בעכבר, אחד אוטומטי), מערכת ניקוד, והכי חשוב - התנהגות פיזיקלית: הכדור קופץ מקירות ומחבטים.

אנחנו לא מבקשים עיצוב בשלב הזה - רק שהמשחק יעבוד.
Create a classic Pong game in a single HTML file. 1. Use HTML5 Canvas. 2. The player controls the left paddle with the mouse Y position. 3. The computer controls the right paddle automatically. 4. The ball should bounce off paddles and walls. 5. Display scores at the top for both players. 6. When someone reaches 5 points, show "Game Over" with winner name.

פתח פרויקט חדש ב-IDE "כולם יוצרים פרויקט חדש. תקראו לו Pong או NeonPong."

"הפרומפט הראשון שלנו יבנה את המנוע הבסיסי. אנחנו מבקשים:"

"1. משחק Pong קלאסי - כדור, שני מחבטים.
2. השחקן שולט במחבט השמאלי עם העכבר (לא מקלדת!).
3. המחשב שולט במחבט הימני אוטומטית.
4. הכדור קופץ מקירות ומחבטים.
5. יש מערכת ניקוד עד 5 נקודות."

הדבק את הפרומפט, לחץ Enter, חכה שהקוד ייכתב "תראו איך ה-AI חושב. הוא יודע שהוא צריך ליצור מנוע פיזיקלי. הוא כותב משתנים כמו ballX, ballY, velocityX, velocityY."

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

"אבל תסתכלו טוב: זה מכוער. שחור-לבן, ריבועים פשוטים. זה הפרוטוטייפ. והוא עובד. זה מה שחשוב בשלב הזה."

חשוב להדגיש שהמשחק בשלב הזה "מכוער אבל עובד". זה מלמד את התלמידים על תהליך - לא קופצים ישר לעיצוב מושלם. תנו להם לשחק 30 שניות עם הפרוטוטייפ לפני שממשיכים הלאה.
6

Assets vs Procedural - תמונות או קוד?

Assets vs Procedural - external images vs code-generated graphics Assets (נכסים): תמונות, סאונדים, וקבצים שמביאים מבחוץ. צריך להוריד, לערוך, לוודא שאין רקע לבן, לדאוג לגדלים.

Procedural Graphics (גרפיקה פרוצדורלית): הקוד מצייר הכל בעצמו. רוצים עיגול זוהר בציאן? הקוד מצייר. רוצים ניצוץ אדום? הקוד מצייר. אפס קבצים חיצוניים.
הבחירה בין Assets ל-Procedural היא החלטת מוצר חשובה: Assets יותר פוטוגניים אבל איטיים ומסובכים לניהול. Procedural מהיר, נקי, וגמיש - אבל צריך יכולת תכנות טובה. עם AI, יש לנו את היכולת לעשות Procedural ברמה גבוהה בקלות.

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

"דרך 1 - Assets (נכסים): נלך לגוגל תמונות, נחפש 'pong ball PNG', נוריד תמונה, נדאג שיהיה לה רקע שקוף, נשנה את הגודל, נייבא אותה לקוד. זה עובד, אבל זה מייגע."

"דרך 2 - Procedural Graphics (גרפיקה פרוצדורלית): נבקש מה-AI לצייר הכל בקוד. רוצים כדור עגול עם זוהר ציאן? שורה אחת של קוד. רוצים מחבטים עם אפקט ניאון? שורה אחת."

"איזו דרך נבחר? פרוצדורלי. למה?"

"1. זה מהיר - לא צריך לחפש תמונות.
2. זה נקי - אין רקעים לבנים מעצבנים.
3. זה גמיש - רוצים לשנות צבע? מילה אחת בפרומפט."

"בואו נהפוך את הפרוטוטייפ שלנו למשחק ניאון מטורף."

זוהי נקודת החלטה מרכזית בעיצוב מוצר. הדגישו שזו לא החלטה טכנית אלא החלטה עסקית/עיצובית. אם יש תלמידים שמתעקשים על תמונות - תנו להם לנסות בבית ותראו כמה זמן זה לוקח להם.
7

Collision Detection - איך המשחק "מרגיש" התנגשויות

חלק 4: ~10 דק'
Collision Detection - detecting when game objects touch Collision Detection הוא המנגנון שגורם למשחק להרגיש פיזיקלי. הקוד בודק בכל פריים: "האם הכדור נמצא באותו מקום כמו הקיר? כמו המחבט?"

אם כן - משהו קורה: הכדור קופץ, השחקן מקבל נקודה, או נשמע צליל.

בלי Collision Detection, הכדור היה עובר דרך הקירות כמו רוח. זה מה שהופך דברים דיגיטליים למורגשים.
Collision Detection הוא אחד האתגרים הגדולים בפיתוח משחקים מבחינה טכנית, אבל מבחינה קונספטואלית הוא פשוט: "שני דברים נמצאים באותו מקום? תגיב." ב-Pong זה קל - צורות פשוטות. במשחקים מורכבים (כמו GTA) זה מערכת שלמה.

שחק במשחק - הדגם את הרגע שהכדור פוגע במחבט "תראו מה קורה עכשיו. הכדור בא לכיוון המחבט שלי... פגע! והוא קפץ בחזרה."

"איך המחשב יודע שהכדור פגע? Collision Detection - זיהוי התנגשויות."

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

"זה לא קסם. זה מתמטיקה פשוטה: אם המיקום X של הכדור שווה למיקום X של המחבט, והמיקום Y חופף - יש התנגשות."

"והנה החלק המדהים: ה-AI כותב את כל החישובים האלה בשבילנו. אנחנו רק מבקשים 'תגרום לכדור לקפוץ מהמחבט', והוא יודע איך לעשות את זה."

Update the visual style to 'Cyberpunk Neon': 1. Set the background to dark black (#000). 2. Draw the paddles with bright Cyan (#00ffff) color. 3. Draw the ball with bright Magenta (#ff00ff) color. 4. Add a 'shadowBlur' glow effect to all game elements (paddles, ball) so they look like glowing neon lights. 5. Use a modern sans-serif font for the score with glow effect.

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

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

לחץ Preview "בום! תראו את זה. אותו משחק בדיוק, אבל עכשיו הוא נראה כמו שהוא יצא מ-Tron."

"וזה הכוח של Procedural Graphics. שנינו את ארבע מילים בפרומפט, והמשחק השתנה לגמרי."

8

Juice & Polish - "תחושת המשחק"

Juice & Polish - the feel, feedback, and satisfaction of gameplay Juice הוא כל מה שגורם למשחק להרגיש מספק: רעידות, זוהר, צלילים, חלקיקים. זה ההבדל בין "כפתור שעובד" לבין "כפתור שכיף ללחוץ עליו".

Polish הוא הליטוש הסופי - הפרטים הקטנים שהופכים משחק טוב למשחק מעולה.
יש סרטון מפורסם בקהילת פיתוח המשחקים בשם "Juice it or lose it" שמדגים איך אותו משחק פונג בסיסי הופך למשחק ממכר רק על ידי הוספת Juice. זה לא משנה את המכניקה - רק את ההרגשה.

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

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

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

"זה נקרא Juice - מיץ. זה מה שהופך משחק טכני למשחק כיפי."

"נוסיף למשחק שלנו שני דברים שייתנו לו Juice: רעידת מסך קלה בכל פגיעה, ומערכת חלקיקים שמתפוצצת."

9

Particle Systems - פיצוצי חלקיקים

חלק 5: ~10 דק'
Particle System - spawning many small objects for visual effects Particle System היא טכניקה ליצירת אפקטים ויזואליים מרשימים: כשהכדור פוגע, יוצרים 20-30 חלקיקים קטנים שמתפזרים לכל הכיוונים, מאטים, ונעלמים.

כל חלקיק הוא אובייקט קטן עם מיקום, כיוון, מהירות, וחיי-זמן. המנוע צריך לנהל את כולם במקביל - ולכן זה אתגר טכני, אבל עם AI זה פשוט.
מערכות חלקיקים משמשות בכל משחק מודרני: עשן, אש, גשם, שלג, פיצוצים, קסמים. זה אחד הכלים החזקים ביותר ליצירת "הרגשה" במשחק. והכי יפה? הכל נוצר בקוד - אפס תמונות.
Add a particle explosion effect: When the ball hits a paddle or wall, spawn 15-20 tiny colorful particles that: 1. Explode outward in random directions 2. Fade out gradually 3. Disappear after 0.5 seconds 4. Use the same neon colors (Cyan and Magenta)

"עכשיו אנחנו מגיעים לחלק המגניב ביותר: Particle System - מערכת חלקיקים."

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

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

"אבל בשביל ה-AI, זו שורת הוראה אחת."

הדבק את פרומפט החלקיקים, הרץ "אני מבקש: כשהכדור פוגע, תייצר 20 חלקיקים קטנים שמתפוצצים החוצה ונעלמים."

לחץ Preview ושחק - הדגם את הפיצוץ "תראו את זה! כל פגיעה עכשיו מלווה בפיצוץ קטן. זה לא משנה את החוקים של המשחק - אבל זה מרגיש פי 10 יותר טוב."

"זה בדיוק מה ש-Juice אומר: הוספנו תחושה, סיפוק, משוב ויזואלי. המשחק הפך ממשחק שעובד למשחק שמהנה לשחק בו."

זה רגע WOW שני בשיעור. תנו לתלמידים לשחק עם החלקיקים 1-2 דקות. ההבדל בין המשחק לפני ואחרי החלקיקים הוא דרמטי, והוא מלמד על חשיבות הפידבק הויזואלי בעיצוב משחקים.
10

AI Opponent - לימוד המחשב להיות יריב

AI Opponent - programming the computer to play against you AI Opponent הוא הקוד ששולט ביריב הממוחשב. בצורה הכי פשוטה, הוא פשוט "עוקב אחרי הכדור" - המחבט תמיד זז למיקום Y של הכדור.

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

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

"למה? כי המחשב רואה את המיקום המדויק של הכדור ופשוט זז אליו. זה לא הוגן - המחשב מושלם."

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

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

11

Game Balance - איזון הקושי

חלק 6: ~10 דק'
Game Balance - tuning difficulty to keep the game challenging but fair Game Balance הוא האומנות של ליצור משחק שמאתגר אבל לא מתסכל. קל מדי? משעמם תוך דקה. קשה מדי? מייאש ונוטשים.

איזון נכון אומר: השחקן מרגיש שהוא יכול לנצח אם הוא משחק טוב, אבל צריך להתאמץ.
Game Balance הוא תהליך איטרטיבי: בונים, בודקים עם שחקנים אמיתיים, מתאימים, בודקים שוב. חברות משחקים גדולות מעסיקות אנשים שכל תפקידם הוא לאזן משחקים. זה לא מדע מדויק - זו אומנות.
Make the enemy AI imperfect and beatable: 1. Add a reaction delay - the enemy should react 150ms after the ball changes direction, not instantly. 2. Limit the enemy paddle speed to 70% of the player's speed. 3. Occasionally (10% chance), make the enemy "miss" by moving to a slightly wrong position.

"אז איך נפתור את הבעיה? נוסיף למחשב חולשות מכוונות."

הדבק את פרומפט האיזון "אני מבקש מה-AI לעשות שלושה דברים:"

"1. עיכוב בתגובה: המחשב לא מגיב מיידית. יש לו 150 מילישניות של 'חשיבה'.
2. הגבלת מהירות: המחבט שלו זז ב-70% מהמהירות שלי.
3. טעויות אקראיות: ב-10% מהמקרים, הוא פשוט זז למקום הלא נכון."

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

"המשחק עכשיו מאוזן. אם אשחק טוב, אני אנצח. אם אשחק רע, המחשב ינצח. וזה בדיוק מה שאנחנו רוצים."

"זה Game Balance: לא קל מדי, לא קשה מדי, בדיוק נכון."

חשוב להדגיש שזו החלטה עיצובית, לא טכנית. אנחנו מלמדים את התלמידים לחשוב כמו מעצבי משחקים: "מה יגרום למשחק להיות כיף?" זה אחד המושגים החשובים ביותר בשיעור.
12

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

חלק 7: ~5 דק'
Game Loop - הלב הפועם של המשחק, 60 פעמים בשנייה
Prototype - גרסה ראשונה פשוטה, פונקציונלית לפני היופי
Assets vs Procedural - תמונות מבחוץ מול יצירה מקוד
Collision Detection - זיהוי התנגשויות בין אובייקטים
Juice & Polish - תחושת המשחק והסיפוק שלו
Particle Systems - אפקטים של חלקיקים מתפוצצים
AI Opponent - יריב ממוחשב שמשחק נגדך
Game Balance - איזון הקושי שהמשחק נשאר כיף
FPS - Frames Per Second, כמה פעמים בשנייה המסך מצטייר
Real-time - משחק שממשיך לרוץ גם בלי קלט שחקן

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

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

"למדנו להשתמש בגרפיקה פרוצדורלית במקום להוריד תמונות מהאינטרנט."

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

"שיעורי הבית שלכם: קחו את ה-Pong הזה ותשחקו עם הפרמטרים. נסו לשנות:"

"- את מהירות הכדור (יותר מהיר / יותר איטי)
- את גודל המחבטים (קשה יותר / קל יותר)
- את הצבעים (מה אם במקום ציאן ומג'נטה תשתמשו בירוק וזהב?)
- הוסיפו עוד אפקטים (רעידות מסך? צלילים?)"

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

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

שיעורי הבית חשובים - תעודדו את התלמידים לשחק עם הפרמטרים. זה הזמן שבו הם באמת לומדים. אם יש תלמידים שרוצים לנסות צלילים - הכוונו אותם לחפש "Web Audio API prompt" כדי לראות איך מוסיפים אפקטים קוליים.
סוף הערות מרצה - שיעור 4