תכנתו משחק לילדים באמצעות Gemini ופרסמו אותו באמצעות Firebase!

1. מבוא

ב-25 במרץ 2025, Google השיקה את Gemini 2.5. אחד ההיבטים הבולטים בהשקה הזו היה שהיא אפשרה לכולם לנסות את התכונה 'קידוד מתקדם' [ סרטון]:

‫Gemini 2.5: יצירת משחק דינוזאורים משלכם מהנחיה של שורה אחת

ב-Codelab הזה תלמדו על 'תכנות בשיטת Vibe coding' באפליקציית ילדים פשוטה, החל מהנחיה נפוצה ולאחר מכן התאמה אישית לפי הטעם שלכם. נבדוק את האפליקציה ב-p5.js. לבסוף, נדחוף את השינויים האלה אל אירוח ב-Firebase.הדבר המדהים ביותר הוא שכל החבילה הזו חינמית כרגע!

מה תלמדו

שימוש ב-Gemini 2.5 כדי ליצור קוד למשחק.
בודקים את הקוד ב-p5js.org
איך משפרים את ההנחיה או את האפליקציה.
איך מארחים אפליקציה סטטית ב-Firebase

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

‫2. דרישות מוקדמות

ה-Codelab הזה מחולק לשני שלבים:

פיתוח לאינטרנט בלבד. כאן תוכלו ליהנות הכי הרבה, ולא נדרש ידע בתכנות. לשם כך, נשתמש בממשק המשתמש של Gemini ‏ ( gemini.google.com) וב-p5.js.
סביבת קידוד מקומית. כאן נדרשת מיומנות קלה בכתיבת קוד או סקריפט, בנוסף להתקנה ולשימוש ב-npm / npx ובכלי עריכה מקומי, כמו vscode או IntelliJ או כל כלי אחר. החלק השני הוא אופציונלי ונדרש רק אם רוצים שהאפליקציה תישאר זמינה כדי שחברים ובני משפחה יוכלו לשחק בה מהנייד או מהמחשב.

הדרישה היחידה לשלב 1 היא דפדפן ומחשב (מסך גדול יעזור). המשך המאמר מתייחס לשלב 2.

ממשק המשתמש של Gemini

‫gemini.google.com היא פלטפורמה מצוינת שבה אפשר לנסות את כל המודלים העדכניים של Gemini, וגם ליצור תמונות וסרטונים משלכם. הוא כולל שילובים עם Google, כמו מפות Google, מלונות, טיסות וביקורות, ולכן הוא הכלי המושלם לתכנון החופשה הבאה שלכם.

טיפ: אם אתם מתעניינים בקידוד, כדאי לכם לנסות גם את AI Studio, ממשק דומה שבו אתם יכולים ליצור אב טיפוס של אינטראקציה עם מודל שפה גדול (למשל, ליצור תמונה) ולקבל את קוד Python ישירות מהדף.

p5.js

‫p5.js היא ספריית JavaScript בקוד פתוח שזמינה בחינם, ומאפשרת לאומנים, למעצבים, לאנשי חינוך ולכל אחד אחר ליהנות מקידוד יצירתי נגיש ומכיל. הוא מבוסס על שפת Processing ומפשט את תהליך היצירה של תוכן אינטראקטיבי ויזואלי באמצעות קוד בדפדפן האינטרנט.

קידוד מקומי [אופציונלי]

אם רוצים שהאפליקציה תישאר, צריך לבצע הגדרה נוספת:

עורך קוד מקומי ( Visual Studio Code,‏ IntelliJ וכו')
חשבון Git‏ ( github / gitlab / bitbucket) שבו יישמר הקוד.
npm מותקן באופן מקומי, ועדיף במרחב המשתמש (באמצעות npx או טכנולוגיה מקבילה).

בנוסף, נגדיר חשבון Firebase בהמשך.

אנחנו דורשים גם מיומנויות תכנות מסוימות, כמו:

יכולת להתקין חבילת npm
יכולת ליצור אינטראקציה עם מערכת הקבצים (יצירת תיקיות וקבצים)
אפשרות ליצור אינטראקציה עם git (git add, git commit, git push).

אם משהו כאן נראה לכם מורכב, זכרו: מודלים של שפה גדולה (LLM) יכולים לעזור לכם. לדוגמה, אפשר להשתמש ב-"Gemini 2.0 flash" או במודל מקביל כדי לקבל הצעות. אם עדיין קשה לכם, אתם יכולים לדלג על שלב 2 לגמרי. שלב 1 אמור להיות מתגמל מספיק.

‫3. בואו ניצור את המשחק הראשון שלנו!

פותחים את gemini.google.com ובוחרים מודל שיכול לכתוב קוד, למשל Gemini 2.5. האפשרויות עשויות להשתנות בהתאם לזמינות, לעלות ולתאריך. בזמן כתיבת המאמר הזה, הבחירה הטובה ביותר היא:

‫Gemini ‎2.5 Flash (איטרציה מהירה יותר)
‫Gemini 2.5 Pro (פלט טוב יותר).

כאן אפשר לקרוא מידע נוסף על מודלי Gemini.

הנחיה ראשונה למשחק

כפי שאפשר לראות בסרטון הזה, הנחיה ראשונית יכולה להיות פשוטה כמו:

Make me a captivating endless runner game. Key instructions on the screen.
p5js scene, no HTML. I like pixelated dinosaurs and interesting backgrounds.

אפשר להתאים אישית את ההצעה הזו:

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

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

בסופו של דבר, אמור להיות לכם קוד JavaScript תקין.

עכשיו אפשר ללחוץ על לחצן ההעתקה בחלק העליון:

בדיקת המשחק ב-p5.js

עכשיו הגיע הזמן לבדוק את המשחק!

פותחים את העורך של p5.js בכתובת: https://editor.p5js.org/
בוחרים ומוחקים את הקוד הקיים של sketch.js.
הדבק את הקוד שלך

הדף אמור להיראות כך:

לבסוף, לוחצים על הלחצן הפעלה.

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

הקוד נכשל
הקוד שלך עובד בניסיון הראשון!

בפסקה הבאה נסביר איך לנהל את שני התנאים האלה.

(מקרה 1) הקוד שלי נכשל!

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

(מקרה 2) הקוד שלי עובד!

אם הקוד פועל, אמור להופיע משחק ויזואלי בקצה השמאלי של הדף.

‫👏 מזל טוב, הפעלת את משחק ה-AI הראשון שלך!

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

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

איטרציות נוספות

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

The game is great, thanks! Please allow for my character to double jump.

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

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

"Please give me the entire updated code, not just the changed function"

. כך יהיה לכם קל יותר לגזור ולהדביק.

נקודות שיש לשים לב אליהן:

אולי כדאי להוסיף את השיחה עם Gemini לסימניות. אולי תרצו לשנות את השם ל-p5js my first game, או לרשום את הקישור הקבוע ל-Gemini, כמו " https://gemini.google.com/app/abcdef123456789" לשימוש מאוחר יותר.

4. נריץ את הקוד הזה באופן מקומי

בשלב הזה, אתם אמורים להיות בעלי:

חלון פתוח בדפדפן Gemini עם קוד עובד.
חלון דפדפן פתוח של p5.js עם משחק פעיל
סביבת קידוד מקומית עם npm מותקן.

זה החלק הקשה יותר של ה-codelab. נדרש ניסיון בסיסי בתכנות.

התקנת יחסי תלות

אם חסרים לכם npm ו-node, מומלץ להתקין את npm באמצעות מנהל גרסאות, כמו nvm . פועלים לפי הוראות ההתקנה של מערכת ההפעלה שלכם.

אנחנו גם מניחים שאתם משתמשים ב-IDE לקידוד. בדוגמאות ובצילומי המסך שלנו נשתמש ב-Visual Studio Code, אבל אפשר להשתמש בכל כלי אחר.

הגדרת הסביבה המקומית

זה הרגע שבו אפשר ליצור מבנה קבצים משלכם.

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

# This works for Mac and Linux. For Windows, please use other tools.
mkdir my-first-vibecoding-project/
cd my-first-vibecoding-project/
git init 
touch README.md PROMPT.md 
mkdir public/
cd public/ 
touch index.html sketch.js style.css
git add .
# Skipping quotes which can be tricky
git commit -a -m committing_empty_skeleton

מבנה התיקיות הסופי צריך להיראות כך:

my-first-vibecoding-project/
├── PROMPT.md
├── README.md
└── public
    ├── index.html
    ├── sketch.js
    └── style.css

אפשר למצוא את זה גם כאן.

עכשיו פותחים את עורך הקוד המועדף (למשל code my-first-vibecoding-project/ ) ומתחילים להדביק את התוכן של editor.p5js.org ב-3 הקבצים שמופיעים בקטע public/:

README.md ← כאן אפשר להזין את הקישור הקבוע לשיחה עם Gemini, וכאן אפשר להזין את דף הנחיתה של האפליקציה כשהיא תהיה זמינה.
PROMPT.md ← כאן אפשר להוסיף את כל ההנחיות, מופרדות בפסקה ברמה 2. אם רוצים להסביר למה נתתם הנחיה מסוימת, אפשר להוסיף 3 תווי גרש הפוך (`) לפני ההנחיה ואחריה (לדוגמה).
‫**public/index.html** ← copy your HTML code here
‫**public/sketch.js** ← copy your JS code here
‫**public/style.css** ← כאן מעתיקים את קוד ה-CSS

יכול להיות שבתיקייה הציבורית יהיו נכסים נוספים, כמו קובץ PNG בהתאמה אישית.

5. הגדרה ופריסה ב-Firebase

הגדרת Firebase (בפעם הראשונה בלבד)

חשוב לוודא ש-npm מותקן במחשב.

במסוף, מקלידים אחת מהאפשרויות הבאות (שתיהן יעבדו):

# to install on the machine (requires privilege)
npm install -g firebase-tools
# to install locally (low privilege needed but might need to repeat a few times)
npm install firebase-tools

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

הפעלה ראשונית של Firebase

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

חשוב לוודא שאתם נמצאים בספרייה שמעל לספרייה public/ שמכילה את הקבצים. בכרטיס המוצר (ls -al או dir) צריך להופיע משהו כזה:

$ ls 
PROMPT.md
README.md
public/

‫[שלב 1] במסוף, מקלידים: firebase init

מנווטים עם מקשי החיצים למטה אל 'אירוח: ..', מקלידים רווח ואז Enter. (מדוע? זו שאלה עם כמה תשובות אפשריות, ולכן צריך לבחור תשובה ולעבור לדף הבא)
[שלב 2] עכשיו אפשר לבחור פרויקט קיים (אפשרות 1) או ליצור פרויקט חדש (אפשרות 2):

הערה: אם יש לכם פרויקט Cloud קיים, יכול להיות שהוא לא פרויקט Firebase. פרויקטים ב-Firebase הם קבוצת משנה של פרויקטים ב-GCP. כדי להפוך אותם לפרויקט Firebase, צריך לבצע פעולות נוספות, ולכן יש אפשרות שלישית.
אם אתם לא בטוחים, השתמשו באפשרות 'יצירת פרויקט חדש' והוסיפו שם כמו 'p5js-YOURNAME-YOURAPP' (למשל, 'p5js-riccardo-tetris').

[שלב 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
מקישים על ENTER.

[step 4] ? What do you want to use as your public directory? (public)
מקישים על ENTER (הגדרנו את public/ בכוונה)

[step 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
מקישים על ENTER (לא)

[שלב 6] ? Set up automatic builds and deploys with GitHub? No
מקישים על ENTER – לא

[שלב 7] ? File public/index.html already exists. Overwrite? (y/N)
מקישים על Enter (לא).
אזהרה יכול להיות שתהיה שגיאה; אם תכתבו על הקובץ, קובץ ה-index.html החדש לא יהיה תואם ל-p5js.

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

הפעולות האלה אמורות ליצור כמה קבצים:

.firebaserc
.gitignore
firebase.json
public/404.html

בפרט, .firebaserc צריך לכלול את מזהה הפרויקט. אפשר לשלוף אותו באופן פרוגרמטי באמצעות הפקודה הבאה: cat .firebaserc | jq .projects.default -r

אזהרה: צריך לבדוק את index.html. אם הוא ארוך מ-16 שורות, או אם הוא מכיל את המילה firebase, סימן שהחלפתם בטעות קבצי p5js. אין בעיה, רק חשוב לזכור להחזיר את הקובץ הישן index.html מ-git או מהעורך של p5js.

בדיקות מקומיות

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

כדי לעשות את זה, אפשר לנסות את חבילת ה-CLI העוצמתית של צוות Firebase. לדוגמה:

$ firebase emulators:start

צריך להפעיל שרת אינטרנט ביציאה 5000 ( http://127.0.0.1:5000/ ) כדי שתוכלו לבדוק באופן מקומי לפני שתעבירו את השינויים.

פריסה ב-Firebase

עכשיו הגיע הזמן לפקודה האחרונה:

$ firebase deploy

הפעולה הזו אמורה להפעיל מספר פעולות. השורות האחרונות צריכות להיראות בערך כך:

$ firebase deploy
[...]
✔  hosting[YOUR_PROJECT]: release complete 
✔  Deploy complete! 

Project Console: https://console.firebase.google.com/project/YOUR_PROJECT/overview
Hosting URL: https://YOUR_PROJECT.web.app

כתובת ה-URL של האירוח אמורה להופיע. כדאי לנסות!

אם הפריסה מצליחה, אבל אתם רואים דף ריק או פריסה פגומה, אתם יכולים לעשות כמה דברים:

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

I've deployed the script correctly with Firebase, but I now see a blank page with this error:

[ paste detailed JS console error ]

‫♾️ Iterate!

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

חשוב לזכור כמה דברים:

לולאת האיטרציה מהירה הרבה יותר בלולאה Gemini > p5.js > Gemini מאשר בלולאה Gemini > local host > deploy to cloud run > test app on browser (hit refresh).
משתמשים ב-git לניהול גרסאות של ההנחיה ושל הקוד. יכול להיות שתרצו לחזור להנחיה N ולקוד N. חשוב במיוחד לבצע git commit לכל sketch.js שאתם שולחים, כי יכול להיות שיש באגים שלא זוהו.

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

6. טיפים לכתיבת הנחיות

כמה טיפים מניסיון של יצירת משחקים רבים.

יצירת גרסאות של ההנחיה

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

אם אהבתם את התוצאה שקיבלתם ואתם רוצים לבצע איטרציה עם Gemini באמצעות הנחיות משנה נוספות, יכול להיות שיהיה לכם מעניין לעקוב אחרי כל ההנחיות (הנחיה 1,2,3 – דוגמה 1 עם 3 הנחיות – example2).
אם לא חשוב לכם לשמור את האפליקציה שנוצרה מההנחיה הראשונה, אתם יכולים לשפר את ההנחיה, למחוק את הקוד ולהתחיל מחדש עם הקוד ששונה (הנחיה 1 גרסה 1, הנחיה 1 גרסה 2, הנחיה 1 גרסה 3 וכו').

כמובן שאפשר לשלב בין שתי הגישות.

פונקציונליות לנייד

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

שליחת משוב על שגיאות JavaScript או צילומי מסך ישירות אל Gemini

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

7. מעולה!

🎉 כל הכבוד, סיימתם את ה-Codelab.

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

מה נכלל

יצירת משחק באמצעות Gemini 2.5.
פריסה ב-Firebase

עכשיו הגיע הזמן 👥 להתגאות בזה! למה לא לשתף את המשחק האחרון שלך (your-project.web.app) ב-LinkedIn או ב-X עם ההאשטאג #VibeCodeAGameWithGemini (ואולי לתייג את המחבר ב-LinkedIn)? כך נוכל לדעת עד כמה ה-codelab הזה מושך, ואולי נכתוב עוד codelabs כאלה!

אני רוצה עוד!

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

איך יוצרים 5 משחקים לילדים עם Gemini 2.5 ו-p5.js בסוף שבוע אחד! במאמר הזה נסביר את תהליך החשיבה שמאחורי תכנות בשיטת Vibe coding של משחק באמצעות 6 דוגמאות.
‫palladius/genai-googlecloud-scripts (מאגר GitHub עם כ-10 אפליקציות – קוד והנחיה): טטריס, פקמן, רביעייה ואפילו שיבוט של Rogue למי שמתגעגעים למשחקים של פעם! הוא מכיל את ההנחיות של כל המשחקים האלה. בוחרים את האהובים עליכם, משנים את ההנחיה ומתחילים ליהנות!

דוגמאות למשחקים שאפשר ליצור:

המשחק הסופי יכול להיראות כך:

טטריס בתלת-ממד
משחק ללימוד שפה
שיבוט לא מורשה
שיבוט של Pac-Man.

שוב, המגבלה היא באנגלית!

‫🎉 שיהיה בהצלחה!