דף זה תורגם על ידי Cloud Translation API.

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

1. מבוא

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

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

ב-codelab הזה תלמדו איך לכתוב קוד לאפליקציה פשוטה לילדים, תוך שימוש ב'קודינג לפי מצב רוח'. תתחילו בהנחיה נפוצה ותמשיכו בהתאמה אישית לפי הטעם שלכם. נבדוק את האפליקציה ב-p5.js. לבסוף, נשלוח את השינויים האלה ל-Firebase Hosting. הדבר המדהים ביותר הוא שהסטאק כולו חינמי כרגע.

מה תלמדו

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

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

אם נהניתם מהקודלאב הזה, כדאי לכם לבדוק את 🔥 Firebase Studio, שמציע חוויית קודיפיינג משולבת ומודרנית.

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

סדנת הקוד הזו מורכבת משני שלבים:

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

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

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

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

טיפ: אם אתם אוהבים לתכנת, כדאי לכם לנסות גם את AI Studio, ממשק דומה שבו אפשר ליצור אב טיפוס של אינטראקציה עם LLM (למשל, ליצור תמונה) ולקבל את קוד 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 ובוחרים מודל עם תמיכה בקוד, למשל 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 ומוחקים אותו.
הדבק את הקוד שלך

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

לבסוף, אפשר ללחוץ על הלחצן PLAY.

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

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

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

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

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

(case 2) My code works!

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

👏 מזל טוב, הפעלת את המשחק הראשון שלך עם 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 Chat לסימניות. אולי תרצו לשנות את השם שלו ל-'p5js my first game', או לכתוב את הקישור הקבוע ל-Gemini, כמו " https://gemini.google.com/app/abcdef123456789" לשימוש מאוחר יותר.

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

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

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

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

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

אם 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 Chat, וכאן יופיע דף הנחיתה של האפליקציה כשהיא תצא.
PROMPT.md ← כאן כדאי להוסיף את כל ההנחיות, עם פסקאות H2 שמפרידות ביניהן. אם רוצים להסביר למה נתתם הנחיה מסוימת, אפשר להקיף את ההנחיה ב-3 קווים נטויים ( דוגמה).
**public/index.html** ← העתקת קוד ה-HTML כאן
**public/sketch.js** ← מעתיקים את קוד ה-JS לכאן
**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. זהו תהליך פשוט מאוד, אבל יכול להיות שייקח לכם קצת זמן להתרגל אליו בפעם הראשונה.

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

$ ls 
PROMPT.md
README.md
public/

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

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

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

[step 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 (לא)

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

[step 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 ]

♾️ איטרציה!

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

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

לולאת החזרה (iteration) מהירה הרבה יותר בלולאת Gemini > p5.js > Gemini מאשר בלולאת Gemini > מארח מקומי > פריסה ל-Cloud Run > בדיקת האפליקציה בדפדפן (לחיצה על 'רענון').
שימוש ב-git לניהול גרסאות של ההנחיה ושל הקוד. יכול להיות שתרצו לחזור להנחיה N ולקוד N. חשוב במיוחד לבצע commit ב-Git לכל sketch.js שאתם דוחפים, כי יכול להיות שיש באגים שלא זוהו.

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

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

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

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

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

אם אתם אוהבים את מה שאתם רואים ואתם רוצים לבצע חזרה על התהליך ב-Gemini עם הנחיות משנה נוספות, כדאי לעקוב אחרי כולן במקום כלשהו (הנחיה 1,2,3 – 3-shot example1 – example2).
אם האפליקציה שנוצרה על ידי prompt1 לא חשובה לך, כדאי לשפר את ההנחיה, לזרוק את הקוד ולהתחיל מחדש עם הקוד המותאם (prompt 1 v1,‏ prompt1 v2,‏ prompt1 v3 וכו').

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

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

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

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

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

7. מעולה!

🎉 כל הכבוד על השלמת הקודלאב.

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

מה עסקנו בו

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

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

אני רוצה עוד!

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

איך כותבים קוד לחמישה משחקים לילדים באמצעות Gemini 2.5 ו-p5.js בסופ'ש אחד? במאמר הזה נסביר איך כותבים קוד של משחקים לפי תחושה באמצעות 6 דוגמאות.
palladius/genai-googlecloud-scripts (מאגר ב-github עם כ-10 אפליקציות – קוד והנחיה): Tetris, ‏ Pacman, ‏ Connect 4 ואפילו עותק של Rogue לחובבי נוסטלגיה! הוא מכיל את ההנחיות של כל המשחקים האלה. בוחרים את ההנחיה המועדפת, משנים אותה לפי הצורך ונהנים מהאווירה.

אם מה שעשיתם היום נשמע כמו מאמץ רב מדי, אתם יכולים גם לנסות את 🔥 Firebase Studio, שבו כל התהליך – מהרעיון ועד לאפליקציה – מתבצע בחלון דפדפן אחד.

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

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

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

שוב, אנגלית היא השפה היחידה.

🎉 שתהיה לכם תכנות מהנה!