איך לבנות משחק דפדפן עם AI

מה צריך כדי להתחיל

• עוזר AI שכותב קוד. כלי שעובד ישירות על תיקיית הפרויקט, כמו Claude Code, חוסך את ההעתקה הידנית של קוד מהצ'אט לקבצים.
• Node.js מותקן במחשב, כדי להריץ שרת פיתוח מקומי.
• דפדפן עם כלי המפתחים פתוחים (F12). שם רואים שגיאות, ואותן מעתיקים ל-AI.
• רעיון קטן. משחק עם מכניקה אחת ברורה. את המשחק הגדול בונים אחר כך.

בחירת מנוע: למה Phaser

אפשר לכתוב משחק מאפס עם Canvas, אבל עדיף מנוע שכבר פותר ציור, אנימציה, קלט ומסכים. ל-Ironhold בחרתי ב-Phaser, מנוע קוד פתוח למשחקי דו-ממד בדפדפן.

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

אפיון של עמוד אחד

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

# Game: maze tower defense

## Core loop
- Grid 20x12. Enemies enter left, exit right.
- Enemies always take the shortest path (recalculate when grid changes).
- Player places towers on empty cells; a tower blocks its cell.
- Placing a tower that fully blocks the path is not allowed.

## Win / lose
- 20 lives. Each enemy that exits costs 1 life.
- Survive 15 waves to win.

## Out of scope (for now)
- Sound, upgrades, multiple maps.

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

לבנות בסבבים קטנים

כל סבב צריך להיגמר במשהו שאפשר להריץ ולראות בדפדפן. סדר שעובד טוב:

1. שלד: מסך ריק עם רשת, שרץ בשרת מקומי.
2. אויב אחד שהולך בקו ישר מהכניסה ליציאה.
3. הצבת מגדל בלחיצה על משבצת.
4. חישוב מסלול מחדש כשמגדל נוסף, וחסימה של הצבה שסוגרת את הדרך.
5. מגדלים יורים, אויבים מאבדים חיים.
6. גלים, חיים, מסך ניצחון והפסד.

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

לבדוק כמו שחקן

AI יכול לכתוב קוד שעובר בדיקות, אבל הוא לא יכול לדעת אם המשחק כיף. את זה בודקים רק במשחק עצמו:

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

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

להעלות לאוויר

משחק Phaser הוא בסוף קבצים סטטיים (HTML, JavaScript ותמונות). מריצים פקודת build, ומעלים את התיקייה שנוצרה לכל אחסון שמגיש קבצים סטטיים. אני מעלה את המשחקים לתת-דומיין נפרד, כך ש-Ironhold יושב ב-ironhold.with7eyes.biz.

טעויות נפוצות

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