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

1. Введение

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

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

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

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

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

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

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

Данная практическая работа состоит из двух этапов:

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

Для первого этапа необходимы только браузер и компьютер (большой экран не помешает). Для второго этапа читайте дальше.

Gemini UI

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

Совет: Если вы увлекаетесь программированием, попробуйте также AI Studio — интерфейс, похожий на 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 » или аналогичную модель, чтобы получить рекомендации. Если это все еще слишком сложно, вы можете полностью пропустить второй этап. Первый этап должен быть достаточно полезным.

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.

Вы можете немного изменить это по своему усмотрению:

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

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

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

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

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

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

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

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

Наконец, вы можете нажать кнопку ВОСПРОИЗВЕДЕНИЕ .

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

1. Ваш код не работает.
2. Ваш код работает с первого раза!

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

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

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

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

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

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

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

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

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

Теперь самое время сохранить свой код где-нибудь на случай, если вы его сломаете. При желании вы можете выполнить итерацию один раз. Например, автору очень нравится двойной прыжок в Super Mario, поэтому вы можете добавить что-то подобное:

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"

Это значительно упростит процесс копирования и вставки.

Предостережения

Предупреждение : игра может прекрасно работать на экране, но на устройстве без клавиатуры, например, на мобильном телефоне, она может оказаться неработоспособной. Мы это рассмотрим позже.

Внимание : https://editor.p5js.org/ имеет ограниченные возможности сохранения нескольких итераций вашего кода. Если вам нравится то, что придумал Gemini, и вы не хотите потерять *n-ю* итерацию, переходите к следующему шагу ( git вам в помощь).

Возможно, вам захочется добавить свой чат в Gemini в закладки. Может быть, вы захотите переименовать его в "p5js моя первая игра" или записать постоянную ссылку на 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, а здесь — целевую страницу приложения, когда оно будет доступно.
• 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 CLI требуется Node.js версии 18.0.0 или выше. Если у вас нет возможности обновить Node.js (например, нет прав администратора), рассмотрите возможность использования nvm для управления версиями Node.js и npm.

Инициализация Firebase

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

Убедитесь, что вы находитесь в директории, расположенной непосредственно над директорией public/ содержащей ваши файлы. В результате выполнения команды ( ls -al или dir ) должно отобразиться примерно следующее:

$ ls 
PROMPT.md
README.md
public/

• [Шаг 1] В консоли введите: firebase init

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

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

Внимание: идентификаторы проектов уникальны во всей сети Google Cloud! Выбирайте их с умом, так как изменить их впоследствии будет невозможно.

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

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

• [Шаг 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.

Локальное тестирование

Чтобы уменьшить задержку в контуре обратной связи, возможно, стоит сначала протестировать всё локально.

Для этого вы можете воспользоваться мощным набором инструментов командной строки от команды 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-адрес хостинга. Попробуйте!

Внимание: если развертывание завершается с ошибкой аутентификации («не удалось создать проект»), это может означать, что вы никогда не подключались к Firebase. Вам необходимо перейти в консоль Firebase и принять Условия использования. Это нужно сделать только один раз для каждого адреса электронной почты.

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

• Откройте в браузере «Инструменты разработчика», найдите ошибку и попросите Gemini помочь вам ее исправить, отправив примерно такое сообщение:

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

[ paste detailed JS console error ]

Примечание: сообщение об ошибке должно содержать строку JavaScript для файла sketch.js, которая хорошо известна Gemini. Это означает, что у Gemini есть весь необходимый контекст для исправления ошибки. Убедитесь, что используете тот же чат, что и тот, в котором был создан код!

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

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

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

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

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

6. Советы по подсказкам

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

Сформулируйте ваше приглашение

В исходном запросе вы, вероятно, найдете ошибки. У меня есть его версия из git . Здесь есть несколько вариантов кода:

1. Если вам понравилось увиденное, и вы хотите продолжить работу с Близнецами, используя последующие подсказки, возможно, будет интересно найти их все где-нибудь (подсказки 1, 2, 3 - пример 1 из 3 частей - пример 2 ).
2. Если вас не особо волнует приложение, созданное с помощью prompt1, то, возможно, вам стоит доработать 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 с хэштегом #VibeCodeAGameWithGemini (и, возможно, отметить автора в LinkedIn)? Это позволит нам узнать, насколько интересен этот код-лаборатория, и, возможно, написать больше подобных работ!

Я хочу ещё!

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

• За выходные напишите пять детских игр с помощью Gemini 2.5 и p5.js! В этой статье мы шаг за шагом рассмотрим процесс создания игры с помощью Vibe на 6 примерах.
• palladius/genai-googlecloud-scripts (репозиторий на GitHub с примерно 10 приложениями — код и подсказки): Tetris, Pacman, Connect 4 и даже клон Rogue для ностальгирующих! Здесь собраны подсказки для всех этих игр. Выберите свою любимую, адаптируйте подсказку и наслаждайтесь!

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

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

• Трехмерный тетрис
• Языковая игра
• Клон-изгой
• Клон Пакмана.

Опять же, возможности английского языка безграничны!

🎉 Удачного программирования!