Создайте Vibe код детской игры с помощью Gemini и опубликуйте его с помощью Firebase!, Vibe создайте код детской игры с помощью Gemini и опубликуйте с помощью Firebase!, Vibe создайте код детской игры с помощью Gemini и опубликуйте с помощью Firebase!, Vibe создайте код детской игры с помощью Gemini и опубликуйте с помощью Firebase!

Создайте Vibe-код для детской игры с помощью Gemini и опубликуйте ее с помощью Firebase!

О практической работе

subjectПоследнее обновление: мая 13, 2025
account_circleАвторы: Riccardo Carlesso

1. Введение

25 марта 2025 года Google выпустил Gemini 2.5 . Одним из самых запоминающихся аспектов этого запуска было то, что каждый мог опробовать функцию «Расширенное кодирование» [ видео ]:

a3d1de17f9fbf428.png

Gemini 2.5: создайте свою собственную игру о динозаврах, используя одну строку

В этой лаборатории вы узнаете, как «программировать Vibe» для простого детского приложения, начиная с обычного приглашения и затем настраивая его по своему вкусу. Мы протестируем приложение на p5.js. Наконец, мы внедрим эти изменения в хостинг Firebase . Самое замечательное в этом то, что весь стек в настоящее время бесплатен !

Что вы узнаете

  • Используйте Gemini 2.5 для написания Vibe-кода игрового приложения.
  • Проверьте код на p5js.org.
  • Как перебирать и совершенствовать ваше приглашение/приложение.
  • Как разместить статическое приложение в Firebase

af537073e37f086a.png

Обратите внимание , что в этой лаборатории кода используется код, сгенерированный искусственным интеллектом; это недетерминированный подход, поэтому эта кодовая лаборатория содержит рекомендации, поскольку ваш результат неизвестен автору. Также, пожалуйста, НЕ используйте этот код в производстве!

Если вам нравится эта лаборатория кода, обязательно попробуйте 🔥 Firebase Studio , которая предлагает удобный и интегрированный интерфейс кодирования!

2. Предварительные условия

Эта кодовая лаборатория состоит из двух этапов:

  1. Только веб-разработка. Здесь вам будет наиболее весело и никаких навыков программирования не потребуется. Для этого мы будем использовать наш пользовательский интерфейс Gemini ( gemini.google.com ) и p5.js.
  2. Локальная среда кодирования . Здесь необходимы небольшие навыки кодирования/сценариев, а также установка и использование npm / npx и локального редактора, такого как vscode или IntelliJ или что-то еще. Эта вторая часть является необязательной и необходима только в том случае, если вы хотите сохранить свое приложение, чтобы ваши друзья и члены семьи могли играть с ним с мобильных устройств или своих компьютеров.

Единственным необходимым условием для этапа 1 является наличие браузера и компьютера (большой экран поможет). Что касается фазы 2, читайте дальше.

Пользовательский интерфейс Близнецов

Gemini.google.com — отличная платформа, на которой вы можете опробовать все свои новейшие модели Gemini, а также создавать свои собственные изображения и видео! Он оснащен множеством интеграций с Google, такими как Карты Google и Отели/Авиабилеты/Отзывы, что делает его идеальным компаньоном для планирования вашего следующего отпуска!

8d174c7e462cfd11.png

Совет: Если вы увлекаетесь программированием, рассмотрите возможность использования AI Studio — аналогичного интерфейса, в котором вы можете создать прототип взаимодействия LLM (например, создать изображение) и получить код Python прямо со страницы!

p5.js

p5.js — это бесплатная библиотека JavaScript с открытым исходным кодом, которая делает творческое программирование доступным и инклюзивным для художников, дизайнеров, преподавателей и всех остальных. Он основан на языке обработки и упрощает процесс создания интерактивного визуального и интерактивного контента с использованием кода в веб-браузере.

ca1f12cbbedc76b9.png

Локальное кодирование [необязательно]

Если вы хотите сохранить свое приложение, потребуется дополнительная настройка:

  • Локальный редактор кода ( код Visual Studio , IntelliJ , ..)
  • Учетная запись git ( github / gitlab / bitbucket ), где будет храниться ваш код.
  • npm установлен локально, лучше, если он находится в пользовательском пространстве (через npx или аналогичную технологию).

Кроме того, позже мы настроим учетную запись Firebase .

Нам также потребуются некоторые навыки кодирования, например:

  • Возможность установки пакета npm
  • Возможность взаимодействия с файловой системой (создание папок и файлов)
  • Умение взаимодействовать с git ( git add , git commit , git push ).

Если что-то здесь пугает, помните: степень магистра права может вам здесь помочь. Например, для получения предложений можно использовать Gemini 2.0 flash или аналогичную модель. Если это все еще слишком сложно, вы можете полностью пропустить этап 2. Фаза 1 должна быть достаточно полезной.

3. Давайте создадим нашу первую игру!

Откройте сайт Gemini.google.com и выберите модель с поддержкой кода, например 2.5. Этот выбор может зависеть от доступности, стоимости и даты. На момент написания лучшим выбором будет:

  • Gemini 2.5 Flash (более быстрая версия)
  • Gemini 2.5 Pro (лучшая производительность).

Более подробную информацию о наших моделях Gemini можно найти здесь .

8d174c7e462cfd11.png

Наша первая подсказка к игре

Как вы можете видеть из этого видео , первоначальная подсказка может быть такой простой:

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

Не стесняйтесь немного настроить это:

  • Средневековый/футуристический/киберпанк сеттинг
  • Полно смайликов или один конкретный смайлик?
  • Вы любите желтый цвет или различные оттенки фиолетового.
  • Возможно, ваш ребенок любит единорогов, динозавров или покемонов.

После того, как вы вставите приглашение в свой браузер, вы должны наблюдать за мышлением Близнецов. Правильно, Близнецы 2.5 — это модель мышления, поэтому она запускает ряд задач, которые вы можете наблюдать за изменениями с течением времени. Вы можете нажать на изменяющийся раскрывающийся список, чтобы увидеть, что происходит, или просто дождаться результата:

1379f641db7b829d.png

В итоге у вас должен получиться работающий JavaScript.

Теперь вы можете нажать кнопку копирования вверху:

5b3750c38378acb8.png

Тестирование игры на p5.js

Теперь пришло время протестировать игру!

  • Откройте редактор p5.js здесь: https://editor.p5js.org/
  • Выберите и удалите существующий код Sketch.js .
  • Вставьте свой код

Ваша страница должна выглядеть так:

bcbd2cf1ea825ae6.png

Наконец, вы можете нажать кнопку PLAY .

Теперь могут произойти две вещи: либо ваш код работает, либо он дает сбой. Давайте следовать инструкциям в зависимости от обоих случаев:

  1. Ваш код не работает
  2. Ваш код работает с первой попытки!

Давайте посмотрим в следующих двух абзацах, как управлять обоими условиями.

(случай 1) Мой код не работает!

Если вы получили подобную ошибку, вы можете просто скопировать ее и вставить в Gemini. Позвольте ему исправить код для вас!

366759a4baacccc7.png

(случай 2) Мой код работает!

Если ваш код работает, вы должны увидеть визуальную игру в правом конце страницы.

👏 Поздравляем, вы запускаете свою первую игру с искусственным интеллектом!

da962547fd6dc5f9.png

Примечание. Пока у вас есть код, приложение работает только в вашем браузере. Если вы хотите показать приложение своей семье и друзьям, вам понадобится хостинг . К счастью, у нас есть для вас отличный вариант! Продолжайте читать.

Теперь вы готовы к следующей главе.

Дальнейшие итерации

Пришло время сохранить где-нибудь ваш код на случай, если вы его сломаете. Если хотите, можете повторить один раз. Например, автору очень нравится двойной прыжок в Супер Марио, поэтому можно добавить что-то вроде этого:

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 моя первая игра» или записать постоянную ссылку на Gemini, например « https://gemini.google.com/app/abcdef123456789 », чтобы использовать ее позже.

4. Давайте запустим этот код локально

На этом этапе у вас должно быть:

  • Открытое окно браузера Gemini с рабочим кодом.
  • Открытое окно браузера p5.js с работающей игрой.
  • Локальная среда программирования с установленным npm .

Это самая сложная часть кодовой лаборатории. Требуется некоторый базовый опыт программирования.

Установить зависимости

Если вам не хватает npm и node , лучше всего установить npm через какой-нибудь менеджер версий, например nvm . Следуйте инструкциям по установке для вашей операционной системы.

Мы также предполагаем, что вы используете IDE для кодирования. В наших скриншотах и ​​примерах мы будем использовать код Visual Studio, но все работает.

Настройка локальной среды

Это момент, когда вы можете создать свою собственную файловую структуру.

Сценарий настройки приведен для иллюстрации. Вы можете сделать это вручную, создав папки и файлы:

# 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 в три файла в папке public/:

  • README.md ← Здесь вы можете разместить постоянную ссылку на чат Gemini, а также целевую страницу приложения, когда оно появится.
  • PROMPT.md ← Здесь вы можете добавить все свои подсказки, разделенные абзацем H2. Если вы хотите объяснить, почему вы дали определенное приглашение, вы можете заключить его в три обратных кавычки ( пример ).
  • ** 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

dc4baa436d63efac.png

  • Перейдите курсорами вниз к «Хостинг: ..», введите ПРОБЕЛ , а затем ВВОД . (Почему? Поскольку это множественный выбор, вам нужно выбрать и перейти на следующую страницу)
  • [шаг 2] Теперь вы можете выбрать существующий проект (вариант 1) или создать новый (вариант 2):

955ab96f94b97b28.png

  • Примечание. Если у вас есть существующий облачный проект, возможно, это не проект Firebase. Проекты Firebase — это подмножество проектов GCP. Вам потребуется дополнительная работа, чтобы сделать их проектом Firebase, для чего и нужен (вариант 3).
  • Если вы не определились, используйте «Создать новый проект» и добавьте какое-нибудь имя, например «p5js-ВАШЕИМЯ-ВАШЕ ПРИЛОЖЕНИЕ» (например, «p5js-riccardo-tetris»).

9fb1e7c9f7d68f25.png

  • [шаг 3] What would you like to call your project? (defaults to your project ID) (p5js-riccardo-tetris)
  • Нажмите ВВОД .

30d2cda68c45befc.png

  • [шаг 4] ? What do you want to use as your public directory? (public)
  • Нажимаем ENTER (мы настраиваем public/ специально)

54bcc6fe2dd0e14e.png

  • [шаг 5] ? Configure as a single-page app (rewrite all urls to /index.html)? No
  • нажмите ENTER (нет)

af930401d3775c.png

  • [шаг 6] ? Set up automatic builds and deploys with GitHub? No
  • Нажмите ВВОД - НЕТ

81e017d4e3a5f7e6.png

  • [шаг 7] ? File public/index.html already exists. Overwrite? (y/N)
  • Нажмите ВВОД (нет).
  • ПРЕДУПРЕЖДЕНИЕ. Это может привести к ошибкам; если вы перезапишете его, новый index.html будет несовместим с p5js!

Если все работает нормально, вы должны увидеть это:

98ff444361607aae.png

Эти действия должны были создать несколько файлов:

.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

be5c455df84ac20.png

Это должно вызвать ряд действий. Последние несколько строк должны выглядеть примерно так:

$ 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 ]

♾️ Повторяйте!

Вы можете повторять эти шаги столько раз, сколько захотите. Вы можете продолжать задавать запросы, пока не будете удовлетворены результатами.

99420f90bf14d04d.png

Важно отметить несколько вещей:

  1. Цикл итерации выполняется намного быстрее в цикле Gemini > p5.js > Gemini, чем в цикле Gemini > локальный хост > развертывание в облаке, запуск > тестирование приложения в браузере (нажмите "Обновить").
  2. Используйте git для управления версиями как приглашения, так и кода. Возможно, вам захочется вернуться к приглашению N и коду N. В частности, вы хотите git commit каждый раз, когда вы отправляете sketch.js , поскольку ошибки могут скрываться там незамеченными.

Обратите внимание, что некоторые игры хорошо работают с клавиатурой, но не работают с мышью или тапом на мобильном телефоне. Это отличный момент для улучшения кода.

6. Полезные советы

Несколько советов от тех, кто уже создал немало игр.

Версия вашего приглашения

Скорее всего, вы обнаружите ошибки в исходном приглашении. Имея git версию. Здесь есть несколько путей кода:

  1. Если вам нравится то, что вы видите, и вы хотите перебирать Gemini с последующими дополнительными подсказками, возможно, будет интересно отследить их все где-нибудь (подсказка 1,2,3 — пример из 3 кадров1 — пример2 ).
  2. Если вам не очень важно приложение, созданное подсказкой1, вместо этого вы можете усовершенствовать подсказку, выбросить код и перезапустить ее с измененным кодом (подсказка 1 v1, подсказка1 v2, подсказка1, v3, ..)

Конечно, вы можете комбинировать два подхода.

Мобильная функциональность

В зависимости от создаваемой вами игры вам может потребоваться некоторое взаимодействие с пользователем. Нужна ли для этого взаимодействия клавиатура? Или его можно использовать, просто тапнув по экрану (например, на мобильном телефоне)? Обязательно укажите это в подсказке. Возможно, вам придется создать несколько кнопок на клавиатуре (см. мой пример Tetris 3D ). См. также «dungemoji хлопоты» для совместимости с мобильными устройствами.

Отправляйте отзывы об ошибках Javascript и скриншотах прямо в Gemini.

Поскольку Gemini не видит вашего взаимодействия с p5js, обязательно вставьте в Gemini все ошибки Javascript. Обратите внимание, что Gemini является мультимодальным, поэтому, если у вас есть изменения в пользовательском интерфейсе (например, уменьшите заголовок или уменьшите счет), вы также можете прикрепить скриншоты игры! Обзор обратной связи по кодированию еще никогда не был таким увлекательным!

b0bacf73c058c4e5.png

7. Поздравляем!

🎉 Поздравляем с завершением работы над кодом.

Мы увидели, как легко создать игру с помощью Gemini и как Firebase предоставляет простое решение для хостинга, позволяющее сохранять вашу игру и делиться ею с другими.

b730ed7192ac3d1c.png

Что мы рассмотрели

  • Создайте игру через Gemini 2.5.
  • Развертывание в Firebase

Пришло время 👥 похвастаться этим! Почему бы вам не поделиться своей последней игрой ( your-project.web.app ) в Linkedin или Twitter с хэштегом #VibeCodeAGameWithGemini (и, возможно, отметить автора в Linkedin)? Это позволит нам узнать, насколько запоминающейся является эта кодовая лаборатория, и, возможно, написать больше такого рода!

Я хочу большего!

Если вы ищете дополнительные ресурсы, проверьте эти игры и подсказки:

Если то, что вы сделали сегодня, кажется слишком сложным, вы также можете попробовать 🔥 Firebase Studio , где идея > подсказка > код > цикл приложения содержится в одном окне браузера.

Некоторые примеры игр, которые вы можете создать:

Финальная игра может выглядеть так:

  • 3D тетрис
  • Языковая игра
  • Мошеннический клон
  • Клон Пакмана.

Опять же, английский – это предел!

🎉 Приятного кодирования!

bug_report Сообщить об ошибке