Мини-игра TRON для экрана загрузки в сервисе Lovable

План урока и выбор инструментов

Привет, друзья! Я очень люблю фильмы «Трон», особенно самый первый фильм 1982 года. А у вас, насколько я понимаю, горят сроки. Совсем скоро предзащита, ничего не готово, и нужно что-то показать. Поэтому сегодня у нас такой урок, который одновременно соединит и то, что я люблю, и то, что вам нужно. И самое главное: мне надоело всё монтировать, поэтому всё будет одним дублем, без монтажа. Поехали!

Сегодня мы снова используем сервис Lovable просто по той причине, что времени на настоящий вайб-кодинг руками с помощью IDE и свободных агентов у нас совсем нет. Сегодня всё делает за нас исключительно этот робот. Это даёт некоторые неудобства, конечно, но мы сейчас с этим разберёмся в процессе работы.

Постановка задачи: мини-игра для ожидания загрузки

Наша сегодняшняя задача — написать небольшую мини-игру, что-то вроде динозаврика из Chrome, который появляется, когда у вас не работает интернет. Предположим, что у вас есть некий прогресс-бар в вашей программе или приложении, и он заполняется довольно медленно. Нужно чем-то занять пользователя. Мы сегодня создадим малюсенькую игру, которая будет запускаться в то время, пока пользователь ждёт загрузки основного приложения.

Итак, поехали. Напиши мини-игру на время загрузки какого-нибудь приложения. Игра представляет собой гонки на светоциклах из вселенной фильмов «Трон». Пусть они будут вокруг прогресс-бара загрузки. Игровое поле ограничено краями окна приложения. Прогресс-бар должен находиться посередине окна и будет непреодолимым препятствием. Управление — стрелками влево-право. Каждое нажатие на стрелку изменяет направление движения на 90 градусов. Всё как в самом первом фильме.

Уточнение требований к реализации

Вот мы описали, какое должно быть приложение. Теперь, помня, как в прошлый раз это у нас было (а если вы не смотрели, обязательно посмотрите предыдущий ролик), вспоминаем, что Lovable очень любит громоздить большущие приложения с использованием TypeScript и фреймворка Vite. Поэтому давайте попробуем дать ему уточняющую задачу. Приложение должно запускаться без установки Vite или других дополнительных компонентов в систему. Оно должно нативно запускаться, скажем, в любом браузере. Окей, и нажмём сразу отправку. Подождём, пока он там что-то нам сочинит.

Светоциклы: оригинал против «Трона: Наследие»

Теперь давайте посмотрим. У нас есть фильм «Трон» 1982 года. Там у нас Light Cycles — светоциклы. Они не bikes, они light cycles. Выглядели они вот так в своё время. Это вершина просто 3D-графики, и они до сих пор мне кажутся потрясающими.

В «Троне: Наследие» они поворачивают как обычные мотоциклы. Давайте посмотрим. Я не помню, какой это год, но вот где бы тут посмотреть, как они поворачивают? У них есть эти непременные хвосты. Во-вторых, тут мотоциклы могут перепрыгивать друг друга, чего не было вообще в оригинальном фильме.

Видите сравнение? Слева у нас показаны светоциклы оригинала: они поворачивают строго на 90 градусов. А здесь, когда мотоциклы начинают разъезжаться в стороны, они поворачивают как обычные мотоциклы в реальной жизни. Это неправильно, мне так не нравится. Поэтому мы будем делать светоциклы, как полагается, как настоящие из оригинального фильма.

Игровая механика и первый результат

В фильме была игра изначально, а в реальном мире, где светоциклы гонялись, можно было гоняться с другом один на один, и светоциклы поворачивались строго на 90 градусов. Вот так выглядела эта самая игра. Я очень рад, что есть фанаты, которые до сих пор делают 3D-модельки, печатают и делают их с правильными длинными хвостами. Насколько я помню, хвосты у нас никуда не пропадают: они появляются, и сразу же байки начинают двигаться, и хвосты никогда не заканчиваются. Это очень хорошо.

Давайте посмотрим, что получилось. О! Гонка на светоциклах вокруг прогресс-бара. Один самодостаточный HTML-файл, открывается двойным кликом. Давайте сразу проверим. У нас здесь есть кнопочки. Посмотрим на коде: у вас есть TypeScript, у меня есть сервер, зато у нас есть лоудер. Хорошо, у нас есть всё, что нужно для загрузки. Нам не надо будет ничего изобретать или ставить дополнительные компоненты.

Итак, проверяем. Заехать в сетку — имеется в виду грид, как в фильме. Так, байк поворачивает налево и направо с помощью клавиш. Загрузка системы двигается. Программа показывает: «жёлтый байк проехал столько метров, игрок проехал столько метров».

Процесс загрузки и логика игры

Загрузка системы продолжается. Давайте попробуем разбиться. Деактивирован. Справедливо. Кнопка дает рестарт. Загрузка у нас симулирована, типа что она неравномерно загружается. Это хорошо, мне нравится. Так, попробуем поймать программу, если она не поймает нас раньше. И это, кстати, очень хорошо, что скорости одинаковые. То есть всё как полагается.

Я пытаюсь дождаться загрузки системы, посмотрим, что получится. По идее было бы хорошо, если бы загрузка закончилась, а игра продолжилась. То есть после 100% игра не должна оборваться, игрока не должно выбросить. Например, если 100% и игрок ещё жив, игра продолжается и заканчивается только тогда, когда 100% уже есть и игрок разбился.

Окей, тогда давайте допишем инструкции. Итак, что у нас? Игра не должна заканчиваться, когда загрузка достигает 100%. Игра продолжается, пока игрок не разобьётся.

Доработка механик и интерфейса

Давайте сразу ещё добавим увеличение скорости. Значит так, на старте должно появляться три оппонента. Все светоциклы появляются недалеко от прогресс-бара, а не у краев окна. Чтобы здесь не было проблем: если вдруг игрок что-нибудь не видит, что-то не влезает, а тут посерединке — будет сразу видно.

Так, паузу ещё надо добавить. Нет кнопки «Остановить». Добавь паузу по клавише «Пробел». Окей. Продолжаем.

Давайте посмотрим, есть ли у нас какая-нибудь Tron Light Cycle Online. Вот, смотрите-ка, есть DOS Zone, старые добрые игрушечки. Ока, ничего себе! Какое добро настоящее. Упс, что-то сломалось. Ну да, что-то сломалось. А здесь? Загрузка старой доброй досовской игрушечки. Вот она, классика на все времена.

Какие у нас там опции были? Ладно. Скорость побольше, наверное, всё-таки профессионал. Light Cycles. Выйти из меню. И поехали. Можно было бы цвет выбрать. Ничего себе. Левым, правым... Ну, левым. Не зарегистрированная версия, но переживём пять секунд как-нибудь. Окей, поехали!

Тестирование геймплея

Здесь у нас кнопочки вверх-вниз, влево-вправо. Выиграл! Сам себе загнал. Ну что, зелёный там сейчас убьётся. Да, всё отлично. Я ещё помню, как это делать. Ура! Сколько этой игре лет, я не помню.

Готово. Игра длится до крушения игрока. Стартуют три оппонента рядом с прогресс-баром. Пробел ставит игру на паузу и снимает. Действительно, так. Хорошо.

Усложнение и визуальные эффекты

Теперь нужно добавить увеличение сложности. Наверное, начнём сразу по пунктам. Добавь увеличение сложности: каждые 20% загрузки приложения дают плюс одного оппонента и плюс 15% скорости всех байков. Добавь отображение процентов у прогресс-бара, чтобы было красиво и было понятно, насколько далеко мы там приехали.

Давайте эффектиков добавим ещё каких-нибудь. Например, добавь экранные эффекты в стиле «Трона». Подсветку следов, например. Мерцание неона, частицы какие-нибудь при поворотах и столкновениях. Добавь небольшие взрывы при столкновениях. Добавь на заднем плане тоже немного частиц и эффектов, например, эффект мерцания CRT-монитора. Если кто не знает, имеется в виду вот эти гигантские мегамониторы, которые раньше стояли, по ним такие полоски пробегали время от времени. Это было заметно, как раз этот эффект обыгран в самом фильме «Трон».

Планы на развитие и оптимизация ресурсов

Ну, давайте посмотрим. Тут есть подсказочки. Какие у нас есть подсказочки? «Покажи столкновение ярче», «добавь управление касанием». Но мы тут делаем не Android-игру, поэтому нам это не нужно. «Добавь усиление препятствия». То есть, если у нас останется немного ресурсов, то есть токенов немножко останется, можно будет добавить что-нибудь ещё. Сделай перезапуск, добавь счёт и рекорд.

Так, ну счёт или рекорд нам не нужен. Можно было бы, но мы просто экономим ресурсы. А вот усиление препятствия можно было бы, например, добавить. И у меня есть идея с уровнем сложности: например, количество оппонентов, их скорость поворота и так далее, но тоже, наверное, не буду заморачиваться. Оно того не стоит. Это просто усложняет игроку вот это всё. Нам особо-то не надо, это же ему просто время скарабкать, поэтому неважно.

Такие быстрые повороты... Деактивируем. Надо запретить вот такие штуки делать. То есть здесь должна быть какая-то минимальная длина езды. Или не нужно? Хм. Ну ладно. Посмотрим, что он там сейчас наработал. Угу. То если он ударяется даже не об сам...

Анализ механики столкновений

Игроку вот это всё... То есть нам особо-то не надо, это же ему просто время скарабкать, поэтому неважно. Такие быстрые повороты — деактивируем. Надо запретить вот такие штуки делать. То здесь должна быть какая-то минимальная длина езды. Или не нужно? Хм. Ну ладно, посмотрим, что он там сейчас наработал.

Ага! То есть считается коллизией, то есть местом для удара, — считается весь белый кругляш. Не как бы точка в центре толщиной с хвост, а именно весь белый кругляш. Ну ладно, логично. Оставим так, здесь ничего не будем менять.

Тестирование гонки и CRT-эффект

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

О, эффектики! Ой, притормаживает всё. Вот он, этот CRT-эффект, отлично работает, мне нравится вот эта штука. Так, циферки прогресс-бара нужно убрать внутрь прогресс-бара. А, причём там же есть эти цифры-то? Господи, то есть они там всегда были? Я что-то не заметил до этого, наверное. Вот я глупый.

Ну ладно, тормозит. Тормозит, потому что эффектиков, частиц много, а работаю я на виртуальной машине. В виртуальной машинке просто не хватает видеопамяти на то, чтобы это всё обработать. Зачем виртуальная машина, спросите вы? А я отвечу, что нужно обязательно посмотреть предыдущий видеоролик, и тогда вы узнаете, зачем это нужно.

А нужно это ровно затем, потому что для настоящего вайб-кодинга с помощью настоящих агентов и сред разработки вам обязательно нужен какой-нибудь Linux, какая-нибудь Ubuntu, что-нибудь такое. Вот у меня как раз компьютер на Mac'е, на macOS, и мне приходится, чтобы заниматься вайб-кодингом, подключаться либо к моему другому компьютеру, на котором у меня стоит Ubuntu, либо использовать вот эту самую виртуальную машину.

Итоги заезда и планы по развитию

В общем, смотрите, 100%. Кажется, убился только один оппонент, розовый. Все остальные неплохо едут. Особенно красный, конечно, очень круто там строит змейку. Оранжевый убился. Мне нравится эффект сотрясания экрана. Это прикольно.

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

Отлично. Вот сколько проехали. Всё, разбился. То есть 100% и закончилось. Отлично. Теперь нужно сделать две вещи. Первое: разместим цифры процентов, просто проценты загрузки, внутрь бара. Убедись, что их видно при заполнении. То есть чтобы, когда они чёрные, они светились голубым, а когда всё заполнено голубым, они становились чёрными. Я надеюсь, что он поймёт, что я хочу.

Второе... Нет, не буду я добавлять режим для двух игроков. Всё-таки это загрузка во время ожидания. Нет, это будет переусложнение. Оставим как есть. Пусть будет. Всё-таки добавим звук и громкость. Не нужно. Меню: рестарт, счёт, рекорд. Добавь тач управления. Добавь... Таблицу рекордов? Нет. Счёт и рекорды. Добавлю счёт и рекорд. Ну, вдруг хватит токенов? Вот если хватит, добавлю ещё бонусы: всякие там временные ускорения и всякие штуки. Потом, конечно, можно извращаться, добавить прокачку там и всё такое. Нет, мы это делать не будем.

Вдохновение от «Трона»

Я помню, что к выходу фильма «Трон. Наследие» компании «Жилет», которая делает эти всякие гели для бритья, заколабилась с этими чуваками и сделала свою версию с гонками на светоциклах. Ну-ка. «Жилет Трон Легаси Коллаб». Можем посмотреть, что такое. Да, с двумя L, конечно. Наверное, не увидим. Или увидим? Мультиплеер Трон. Ну, ничего себе.

В общем, там была такая же гоночка на светоциклах с той разницей, что там были как раз участки, типа намазанные гелем для бритья, и по ним светоцикл двигался быстрее. То есть можно было реально обогнать противника. О, на Гитхабе есть проект пяти-семилетней давности. «Держи, пока можешь. Не задень стену, следуй программе в год». Ну, нормально.

Завершение проекта

Ага, вот. Уровень 1, скорость, игрок, программы в сетке. Сколько их там осталось? Я не знаю. Можно было бы, конечно, добавить опять же дополнительный спаун противников. То есть у нас как бы они идут по 20% появляются. Но это же всё равно метка как бы по времени. Не, не буду. Ладно. Всё-таки 4 оппонента — это каноничное количество. Вот. И сколько там заспаунится? Ну, кто-то ещё разобьётся. Нормально. Оставим как есть.

Всё. Я считаю, что мы закончили. Если сейчас всё будет в порядке и не нужно ничего доделывать, то прям запускаем, смотрим и сохраняем. После этого нужно будет загрузить всё на ком, проверить, что это работает без всякой Lovable-установки, всяких непонятных вид и прочих там каких-нибудь фронтенд-фреймворков и всякого такого.

Смотрим. Окей, поехали. Процентики есть? Нормально. Эть! Разбился. Так, новый рекорд — 14. Рекорд — 15. Прекрасно.

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

И сохраняем. После этого нужно будет загрузить всё на комп, проверить, что это работает без всякой Lovable-установки, всяких непонятных виджетов и прочих фронтенд-фреймворков. Смотрим. Окей, поехали.

Процентики есть? Нормально. Разбился. Так, новый рекорд — 14. Рекорд — 15. Прекрасно. Загрузка идёт. Частички есть. Экранчик CRT-шный. Красота. Да, появляются дополнительные штуки. Убился. Новый рекорд. Кстати, я ещё не убивался об стену.

Мне ещё нравится, что светоциклы появляются в разных местах при разных загрузках. Это очень круто. Куда он появляется? Направо. А ещё, по идее, там была такая приколюха, что можно было ехать вот так вот вдоль. То есть прямо вплотную, впритирочку к светоциклу противника.

Вот, видели, как он мне ловушку поставил? Отлично! Смотрите, как круто он мне поставил ловушку в углу. Потрясающе. Если ехать вот так вот впритирочку — вот как я не умею, конечно, — то вообще-то можно было вырваться вперёд, но мы так делать не будем. Всё. Я считаю, что проект готов.

Скачивание проекта

Переключаемся вот сюда, во вкладку «Код», и видим, что у нас всё готово. Нам нужен будет специальный способ всё скачать. Смотрите, у нас есть кнопочка Download в коде, но она работает на один файл. У нас здесь нет кнопочки «скачать всё сразу», поэтому нам понадобится специальный плагин, который называется Lovable Project Downloader.

Это специальное расширение, которое даёт нам возможность скачать весь проект целиком в формате... Так, нет, тот плагин не мой привычный. У меня есть плагины, которые мне прямо нравятся. Вот, вот этот — LovableDev Project Downloader. Я им пользуюсь уже какое-то время. И несмотря на то, что он имеет мало оценок, он мне как-то больше нравится. То есть он прямо работает. Все остальные я не проверял, поэтому не будем.

Итак, активируем плагин. Возвращаемся к нам сюда. Обновляем страничку, чтобы плагин прицепился. Кнопочка обновления, или Ctrl+R, или Cmd+R — в общем, что там у вас, какая горячая клавиша. Обновляем. Подождём немного. Вот такой у нас быстрый интернет или такой быстрый доступ к Lovable, не знаю уже точно.

Окей, переключаемся на вкладку «Код». Вот у нас есть все наши файлики. Активируем плагин. Нажимаем кнопочку, и ничего не работает. Окей, тогда вернёмся обратно в поиск и поищем другой плагин. Видимо, тот, который был первый, всё-таки лучше подходит. Но давайте попробуем этот. Это странно, потому что он мне непривычный. Ладно, попробуем.

Да, смотрите-ка, вот работает. Не работает. Надо... Ага! Нужно же обновить, конечно. Нужно обязательно обновить страницу. Обновляемся. Подождём, пока загрузится, и посмотрим, какие у нас ещё есть варианты. Lovable Downloader... Какие у нас есть ещё варианты? 4.3. Может быть, вот так. Окей. А может быть, это был вот этот? В общем, у них всех одинаковый логотип, я уже даже не знаю, какой из них правильный.

В любом случае, нажмём кнопочку. Так, посмотрим. Отлично! Вот, 75 файлов у нас готово. Вот они скачиваются в качестве zip-архива. Ура! Zip-архив. О, у нас ещё опция с прошлого раза сохранилась. Ну, прекрасно. Это мы предложили его сохранить. Хорошо. Это у нас будет называться «архив как Tron». Архив будет называться Tron.

Запуск локально

Откроем. Да, вот у нас есть Tron. Самое главное, что у нас здесь должна быть кнопочка index, да, или Tron Loader. Отлично, всё готово. Создадим новую папочку, которая называется Tron Bikes, и разархивируем всё в неё.

Разархивировали, открываем public и, для чистоты эксперимента, закроем вкладку Lovable и откроем вот этот файлик. Открываем. Он у нас открылся почему-то в Firefox, неважно. Проверяем. Пробел работает. Все едет. Очень сильно тормозит, опять же, потому что поле большое. Моя несчастная виртуальная машина с этим не справляется.

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

Завершение работы

Теперь что остается? Вам остается загрузить всё это — всё, что у вас есть, — загрузить тем нужным образом, как вас просят на конференции или где вам там всё это пригодится. Я бы просто загрузил это в GitHub и так сдал.

Всем спасибо, друзья! Вот такой экспериментальный мини-выпуск получился. Если есть вопросы, пишите в комментариях. Будем разбираться вместе. Всем спасибо и пока!