Почему первым проектом стоит брать игру
Не потому, что это весело (хотя да). Потому что у игры есть три свойства, которых нет у «сервиса для записи клиентов» — а именно на нём обычно и застревает первый заход.
Игра, а не демка
Обычно результат вайбкодинга выглядит как «кубик ездит по экрану». Здесь получилась вещь, в которую играют: двенадцать настоящих сборных, реальные составы с номерами, ауты, угловые, офсайд и два тайма на табло.
Можно потрогать прямо сейчас
Игра открыта, ссылка живая — это, собственно, и есть результат вечера.
Промпт: четыре вещи, без которых будет мусор
«Сделай игру про футбол» даёт квадрат, который двигается по зелёному фону. Разница между этим и работающей игрой — не в длине запроса, а в четырёх местах, которые ИИ не додумает за тебя. Технологии в их число не входят: их он выберет сам, если сказать про ограничения.
Что решал ИИ, а что осталось человеку
Полезно посмотреть, куда на самом деле ушли решения. Технических среди человеческих нет ни одного — и это не фигура речи, это видно по репозиторию.
| Решение | Кто | Как это выглядело |
|---|---|---|
| Что за игра и зачем | человек | «Хочу запоминать составы сборных, играя» — единственная мысль, которую нельзя делегировать. |
| Язык, файлы, устройство движка | ИИ | Canvas и чистый JS без библиотек — прямое следствие «открывается двойным кликом». |
| Данные турнира и составы | ИИ | Сходил в интернет за состоянием ЧМ-2026: кто кого выбил, кто сколько забил, — и вывел из этого рейтинги команд. |
| «Скучно / нечестно / не то» | человек | Сыграл, почувствовал, сказал словами. Единственный источник этой информации — тот, кто играет. |
| Как именно чинить баланс | ИИ | Сам заметил на скриншотах, что забивает слишком легко, и сам переписал логику вратаря. |
| Что выкладывать и когда хватит | человек | Решение «это уже игра, публикуем» — тоже не техническое. |
Отсюда практический вывод: если разговор с ИИ забуксовал, почти всегда виновата строка из левой колонки, а не из правой. Не «он не умеет писать код» — а «ему не сказали, что должно получиться».
Три места, где всё сломалось
Мы не застревали нигде — застревал ИИ. Показательно, что все три поломки относятся к вещам, которых нет в описании задачи: их не сформулируешь заранее, они вылезают, когда начинаешь пользоваться.
Поломка 1. Соперник забивал как из пулемёта
Два гола за десять минут — по футбольным меркам разгром. ИИ увидел это сам: он тестировал игру в браузере скриншотами и сравнил счёт с реальными матчами. Причина оказалась не в нападающих, а во вратаре. Тот играл позиционно: смещался вдоль линии туда, где мяч сейчас, и смещался спокойным шагом. При ударе в угол этого не хватает — пока он доходит, мяч уже в сетке.
Починка состояла из двух частей сразу, и работают они только вместе: вратарь стал считать, где мяч пересечёт линию ворот, — и срываться туда рывком. Переключи логику и посмотри на счёт: удары в обоих режимах одинаковые, скорость мяча тоже.
Бьют в угол створа — по центру мяч берут обе версии. Числа условные: врезка показывает принцип, а не считает боевой движок.
В коде игры это четыре строки: время до линии ворот, высота мяча в этот момент — и рывок туда.
Последний аргумент true и есть «бежать, а не идти»: без него вратарь так же спокойно
опаздывает, только уже в правильную точку.
// сколько секунд мячу лететь до линии ворот
const tToLine = (ownX - ball.x) / ball.vx;
// на какой высоте он её пересечёт
const crossY = ball.y + ball.vy * tToLine;
moveTo(gk, ownX, clamp(crossY, GOAL_Y1, GOAL_Y2), dt, true);Отсюда полезная привычка: когда просишь ИИ починить поведение, проси проверить, что именно из правки даёт эффект. Здесь «считать точку» без «бежать» почти ничего не меняет — и легко было бы решить, что помогло предсказание, хотя половина эффекта в скорости реакции.
Поломка 2. Правки есть, а в браузере ничего не меняется
Классика, на которой теряют часы. Добавили мобильное управление — кнопки не появились. Код правильный, файл сохранён, а браузер показывает вчерашнюю версию: он бережно держит скрипты и стили в кеше, потому что адрес не изменился.
<link href="css/style.css?v=2">. Адрес стал другим — браузер качает
заново.Поломка 3. Обе команды в красном
Бельгия против Марокко: обе играют в красной форме, и на поле не разобрать, где свои. В настоящем футболе это решают запасным комплектом — и ровно так же сделали в игре. Правило простое: если цвета слишком близки, гости переодеваются.
if (colorDist(kit0.p, kit1.p) < 130) {
// цвета слишком похожи — гостей переодеваем в запасную форму
for (const p of players[1]) p.kitUse = teams[1].kit2;
}Мелочь на четыре строки, но именно из таких мелочей складывается ощущение «сделано по-настоящему». И заметить её может только тот, кто сел играть.
Цикл вместо технического задания
Ни одна из трёх поломок не была бы найдена «планированием». Все три вылезли, когда результат посмотрели глазами. Поэтому работа устроена не как «написал ТЗ — получил продукт», а как короткий круг, который проходится десятки раз за вечер.
Из этого следует пара неочевидных привычек:
Телефон, которого нет, и ссылка, которая есть
Половина заброшенных проектов умирает на этом шаге: работает локально, а показать нечего. Здесь оба препятствия снялись довольно скучно.
Проверить мобильную версию, не беря телефон в руки
Мобильное управление — джойстик слева, кнопки справа — обычно включается по признаку «на устройстве
есть касания». Проверять такое, перекладывая телефон, мучительно. Поэтому в игру добавлен флаг:
открываешь адрес с ?touch — и мобильный интерфейс появляется в обычном браузере.
Выложить
Игра — набор файлов без сервера, поэтому публикация заняла минуты: репозиторий, включённые GitHub Pages, ссылка. Пошагово это у нас разобрано отдельно.
Как выложить проект в интернет
Инструкция на 15–20 минут: аккаунт, репозиторий, Pages, ссылка, которую можно отправлять кому угодно.
Как повторить это не с футболом
Разбор бесполезен, если из него нельзя сделать своё. Порядок ниже воспроизводит тот же путь на любой замкнутой идее — игре, тренажёре, генераторе, калькуляторе.
- Сформулируй, зачем это тебе. Не «приложение для изучения языков», а «хочу запоминать неправильные глаголы, пока еду в метро». Личная причина — источник всех деталей.
- Назови ограничение, а не технологию. «Открывается по ссылке с телефона, ничего не устанавливать, работает без интернета» — этого достаточно, чтобы стек выбрался сам.
- Скажи, когда считать готовым. Один-два признака, проверяемых глазами: «десять слов подряд без подсказки», «соперник иногда выигрывает».
- Попробуй сам, прежде чем просить правки. Пять минут пользования дают больше, чем час размышлений о том, что улучшить.
- Проси по одному изменению. Круг «описал → посмотрел» должен занимать минуты. Список из десяти правок гарантированно вернётся сломанным где-то посередине.
- Выложи раньше, чем будет идеально. Ссылка, которую можно отправить, меняет отношение к проекту сильнее, чем ещё один вечер правок.
Что в этой истории не так
Разбор, в котором всё получилось, — плохой разбор. Вот границы, за которые этот опыт не переносится.
Один вечер — свойство задачи, а не метода
Игра ничего не хранит и никого не пускает по логину. Как только появляются база, аккаунты и деньги, сроки перестают измеряться вечерами: добавляются правила доступа, проверки и всё, что с ними связано. Ждать той же скорости от «маркетплейса» — верный способ разочароваться в вайбкодинге.
Проверял тоже ИИ
Дисбаланс нашёл он сам, скриншотами. Это удобно — и это же слепое пятно: он проверяет то, что ему пришло в голову проверить. Всё, что человек не сел и не потрогал руками, остаётся непроверенным, каким бы уверенным ни был ответ в чате.
Данные турнира устаревают
Составы и рейтинги — срез момента: ИИ сходил в интернет один раз, и с тех пор они не менялись. Для игры это неважно, для справочника было бы фатально. Полезная привычка — сразу спрашивать себя, что в проекте протухнет и кто это будет обновлять.
Чужие имена и бренды
В игре настоящие фамилии игроков и названия сборных. Для некоммерческого фанатского проекта это обычная практика, и в самой игре это указано. Но как только на таком проекте появляется реклама или оплата, вопрос перестаёт быть теоретическим — и решать его лучше до, а не после.
Что спрашивают чаще всего
Разбор собран по репозиторию, а не по воспоминаниям
Игра появилась на съёмках видео про сравнение четырёх нейросетей — ChatGPT, Claude, DeepSeek и Алисы от Яндекса. Разбирали версию победителя, Claude Fable 5. Строки, файлы, время между коммитами и куски кода посчитаны по её репозиторию, а не по памяти: код в тексте упрощён, но логика в нём настоящая. Скриншоты снимает скрипт, который сам открывает игру, выбирает Бельгию и Марокко и доводит матч до нужного момента, — изменится игра, пересоберутся и кадры.
Хочешь увидеть, как с той же задачей справились остальные три нейросети — это в видео. Разница местами неприличная.
Собрал что-то похожим способом и знаешь приём, которого здесь нет? Напиши в чат сообщества — дополним разбор.
У тебя тоже что-то лежит недоделанным
Почти у каждого есть идея, которая не пережила «а как это вообще делается». Принеси её в чат — там сидят люди, которые уже прошли этот круг на своих проектах и скажут, с чего начать именно в твоём случае. А когда соберёшь — покажи: витрина для этого и существует.