GAME DEVELOPMENT WITH AI - PHYSICS

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

שיעור 4 - בונים Pong עם ניאון וחלקיקים

סטטי מול דינמי

משחקים סטטיים

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

משחקים דינמיים

Pong: הכדור עף בעצמו
תנועה חלקה, 60 פעמים בשנייה
המשחק "חי" ברצף
פיזיקה אמיתית

משחק דינמי ממשיך לרוץ גם כשלא נוגעים בכלום

מושג ראשון: Game Loop

GAME LOOP

לולאת המשחק - הלב הפועם

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

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

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

מושג שני: Prototype

PROTOTYPE

אב-טיפוס - הגרסה הראשונה הפשוטה

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

קודם פרוטוטייפ (כדור זז, מחבט מגיב) ← אחר כך עיצוב וצבעים.

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

הפרומפט הראשון

                // Role + Task

                Create a classic Pong game in a single HTML file.

                1. Use HTML5 Canvas.

                2. Player controls left paddle with mouse Y position.

                3. Computer controls right paddle automatically.

                4. Ball bounces off paddles and walls.

                5. Display scores at the top.

                6. Game Over when someone reaches 5 points.

התוצאה: משחק שחור-לבן פשוט - אבל עובד!

Assets מול Procedural

ASSETS

תמונות מבחוץ

להוריד מגוגל, לערוך, להסיר רקע, לשנות גודל, לייבא

PROCEDURAL

יצירה מקוד

הקוד מצייר הכל - מהיר, נקי, גמיש, אפס קבצים

אנחנו נשתמש ב-Procedural Graphics!

מושג שלישי: Collision Detection

COLLISION DETECTION

זיהוי התנגשויות

המנגנון שגורם למשחק להרגיש פיזיקלי.

בכל פריים (60 פעמים בשנייה), הקוד בודק:
"האם הכדור נמצא באותו מקום כמו הקיר? כמו המחבט?"

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

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

הפרומפט השני: עיצוב ניאון

                // Visual upgrade

                Update the visual style to 'Cyberpunk Neon':

                1. Set background to dark black (#000).

                2. Draw paddles with Cyan (#00ffff).

                3. Draw ball with Magenta (#ff00ff).

                4. Add shadowBlur glow effect to all elements.

                5. Use modern font with glow for score.

שינינו 4 מילים בפרומפט ← המשחק השתנה לגמרי!

מושג רביעי: Juice & Polish

JUICE & POLISH

מיץ ופוליש - תחושת המשחק

Juice: מה שגורם למשחק להרגיש מספק - רעידות, זוהר, חלקיקים, צלילים.

Polish: הליטוש הסופי - הפרטים הקטנים שהופכים משחק טוב למעולה.

זה ההבדל בין "עובד" לבין "כיף לשחק".

כפתור שעובד ← לעומת ← כפתור שכיף ללחוץ עליו. אותה פונקציה, תחושה שונה לגמרי.

מושג חמישי: Particle System

PARTICLE SYSTEM

מערכת חלקיקים

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

כל חלקיק = אובייקט עם מיקום, כיוון, מהירות, וזמן חיים.

משמש בכל משחק: עשן, אש, גשם, פיצוצים, קסמים.

AI Opponent ו-Game Balance

01 AI Opponent - יריב ממוחשב שמשחק נגדך
02 יריב מושלם = משעמם (לא יכול לנצח)
03 Game Balance - לגרום ליריב לטעות בכוונה
04 עיכוב בתגובה + הגבלת מהירות + טעויות אקראיות
05 מאתגר אבל לא מתסכל = איזון מושלם

מה למדנו היום?

🔄

Game Loop

הלב הפועם - 60 פעמים בשנייה

🎨

Prototype

גרסה ראשונה - פונקציה לפני יופי

✨

Procedural

יצירה מקוד - בלי תמונות

💥

Collision

זיהוי התנגשויות - פיזיקה אמיתית

🎮

Juice

תחושת המשחק - מה שעושה כיף

🔮

Particles

פיצוצים ואפקטים מדהימים

🤖

AI Opponent

יריב ממוחשב שמאתגר

⚖️

Balance

איזון - לא קל מדי, לא קשה מדי

⚡

FPS

60 פריימים לשנייה = חלק

בניתם משחק עם פיזיקה אמיתית!