Мой первый опыт вайбкодинга: как я за месяц сделал HTML-игру.

Привет! Меня зовут Михаил, я инженер-конструктор с 10+ годами опыта. В свободное время увлекаюсь разработкой HTML-игр и экспериментами с AI-инструментами. Еще веду Telegram-канал про стартапы из-за границы.

А недавно я завершил свой первый серьезный эксперимент с вайбкодингом — создал образовательную браузерную игру для детей, практически не написав ни строчки кода самостоятельно. Хочу поделиться этим опытом: что получилось, где AI оказался молодцом, а где я проклинал всё на свете по 15 раз подряд.

Если коротко — это когда вы описываете AI на человеческом языке, что хотите получить, а он пишет код за вас. Термин придумал Андрей Карпатый, сооснователь OpenAI, в начале 2025 года.

Вот как он сам это описывает: "Я просто вижу что-то, говорю что-то, запускаю что-то и копирую-вставляю что-то, и это в основном работает".

Звучит как магия? Спойлер: не совсем. Но давайте по порядку.

Изначально я хотел сделать простую игру под рабочим названием "НЕ АГУ". Идея была такая: дети учатся писать буквы, обводя их пальцем на экране или мышкой на компьютере. Просто, понятно, полезно.

В процессе разработки название трансформировалось в более осмысленное — "Учим буквы: весёлая азбука". Звучит уже как настоящий образовательный продукт, правда?

Механика игры:

Почему Perplexity?

Технологический стек:

Мой уровень на старте: знаю основы HTML/JS, но Canvas API для меня был тёмным лесом. Про touch events на мобильных я вообще только слышал краем уха.

Первый промпт был примерно таким:

"Создай HTML-страницу с canvas, где можно рисовать мышкой. Когда пользователь нажимает мышку и двигает её, на canvas должна рисоваться линия."

AI выдал рабочий код буквально за секунды. Я скопировал, открыл в браузере — работает! Эйфория! 🎉

Но потом начались проблемы:

Я снова шёл к AI:

"Линия рисуется со смещением от курсора. Вот мой код: [вставка кода]. Исправь."

И так по кругу. Раз 7-8. Пока не заработало как надо. (Почти как надо)

Когда я открыл игру на телефоне — ничего не работало. Вообще. Touch events — это совсем не то же самое, что mouse events.

Типичный диалог с AI выглядел так:

Я: "Добавь поддержку тачскрина. Должно работать как с мышкой."

AI: [выдаёт код с touchstart, touchmove, touchend]

Я: [копирую, проверяю] "Не работает. Рисование начинается не там, где я касаюсь."

AI: [исправляет код]

Я: [проверяю] "Теперь рисуется, но при скролле страница тоже скроллится."

AI: [добавляет preventDefault()]

Я: [проверяю] "Работает, но линия дёргается."

И так более 30 итераций. Не шучу. У меня в истории запросов к Perplexity целая сага про touch events.

Система валидации — отдельная история

Мало просто нарисовать букву. Нужно проверить, правильно ли ребёнок её написал. Для этого я придумал систему контрольных точек:

AI помог реализовать это, но логику пришлось уточнять раз 10-15. То слишком строго, то слишком мягко.

Главный урок недели 2-3: На нестандартные задачи AI выдаёт решения, но они требуют многократной доработки. Терпение — ключ к успеху. В итоги переписал код, и проверку сделал по заполнению буквы.

К четвёртой неделе основная механика работала, но оставались мелочи:

Анимированная демонстрация букв. Хотелось, чтобы перед тем как ребёнок начнёт обводить, показывалась анимация правильного написания. Тут воспользовался photoshop (не очень затея но работает).

Почему-то после нескольких попыток canvas переставал очищаться корректно. Старые линии оставались на фоне. Это оказалось из-за неправильного сброса состояния контекста. AI помог найти решение на 5-й итерации.

Кнопки "Начать заново", "Следующая буква" иногда переставали реагировать. Оказалось, проблема была в обработчиках событий, которые навешивались повторно.

Главный урок недели 4: Даже когда кажется, что "ещё чуть-чуть" — это может занять столько же времени, сколько и основная разработка.

После месяца экспериментов у меня сложилось чёткое мнение:

Вы всё равно должны понимать, что делает код. Иначе отладка превратится в гадание на кофейной гуще. Слепо копипастить всё, что выдаёт AI — путь к страданиям.

Вы должны хотя бы примерно знать, где искать проблему. Что такое функция, переменная, цикл. Иначе диалог с AI будет похож на разговор слепого с глухим.

Генерация кода — быстрая. А вот заставить его работать во всех случаях — долго. Особенно для нестандартных задач.

Создать форму, обработать клик, нарисовать линию — это AI делает на отлично. Готовые паттерны выдаёт быстро и качественно.

Комбинация touch events + canvas + валидация — это уже не типовая задача. Здесь начинается челночная работа: ты описываешь проблему → AI предлагает решение → ты проверяешь → не работает → уточняешь → AI корректирует. И так по кругу.

После месяца работы (в основном по вечерам) у меня есть:

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

✅ 33 буквы русского алфавита с контурами и анимацией

✅ Система валидации написания

✅ Адаптивный дизайн — работает на разных разрешениях

По цифрам:

Выводы и советы

Это отличный инструмент для:

Процесс публикации оказался довольно простым: загрузил ZIP-архив с игрой через консоль разработчика, заполнил описание, добавил скриншоты и отправил на модерацию (но прохождение модерации не очень 😃)

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

Ссылка на игру тут.

А вы пробовали вайбкодинг? Делитесь опытом в комментариях! Интересно узнать, что у вас получилось создать и с какими трудностями столкнулись.

📱 Кстати, я веду Telegram-канал про стартапы из-за границы. Рассказываю о новых проектах, разборах бизнес-моделей и трендах. Подписывайтесь, если интересна эта тема!

P.S. Если статья была полезна — не забудьте поставить лайк и поделиться с друзьями, которые тоже хотят попробовать создать что-то с помощью AI! 🚀