Сделал для вас игру-рисовалку Drink&Draw. Игра в бете, но уже полностью играбельна ❤️
Дублирую ссылку: https://drinkdraw.app/
Это первый пост из серии о том, как я решил сделать игру-рисовалку для вечеринок.
Если лень читать, вот ссылка на игру: drinkdraw.app
А это для тех кому интересен процесс:
Я давно хотел что-нибудь такое навайбкодить, но не знал что именно. Как-то вечером вспомнил, как мы с друзьями играли в настолку: тебе выпадало слово, ты рисовал его у себя в блокноте, потом передавал блокнот по кругу - следующий игрок пытался угадать, что нарисовано, вписывал свою догадку и передавал дальше. В общем, сломанный телефон, только рисунками.
И тогда я подумал: а почему бы не переделать эту игру под мобилку? Тебе не нужен блокнот, не нужны маркеры - нужен только экран смартфона. К тому же рисование на экране открывает новые механики игры. Короче за три недели идея разрослась в полноценную игру с 9-ю разными режимами:
Классика: Испорченный телефон в рисунках: рисунок → догадка → рисунок, и так по кругу.
Мемология (мой любимый режим): Обводишь мем по картинке, остальные видят только линии и угадывают, что это за мем.
Вслепую: Рисуешь своё слово белым по белому, то есть не видя рисунка. Потом все угадывают.
Шлакоблокунь: Каждому выпадает слово шлакоблокунь. Каждый рисует свой шлокоблокунь, потом все угадывают, какое слово было загадано.
Хаос: 40 секунд на рисунок, но тебе будут мешать внезапное нло, нашествие жуков, и призраки.
Одна линия: Рисуешь одной непрерывной линией, не отрывая пальца.
Дуэль: Двое рисуют одно слово на время, остальные выбирают, у кого получилось лучше.
Шпион: У всех одно слово, у шпиона похожее, но другое. Рисуете на общем холсте, потом ищете шпиона.
Зеркало: Ведёшь палец влево, а линия идёт вправо. Самый хардкорный режим, который я скорее всего удалю
Мемология
После каждого раунда игроков ждут задания ✨ Игра предлагает как задания связанные с выпивкой, так и просто забавные задания. Вы сами можете выбрать алко-безалкогольные задания при создании комнаты.
Вайбкодить я решил с помощью Claude code. Почему claude, а не codex от gpt? Честный ответ - не знаю. Возможно, claude был на слуху, а может быть сыграло то, что я уже его использовал пару раз для работы, и он не плохо справлялся. Я решил сразу купить подписку на pro за 25$ месяц. т.к. понимал, что на беспланой версии я далеко не уеду. По началу этого хватало с запасом, но последние полторы недели я регулярно упирался в 4-х часовые лимиты. Пришлось менять тактику, об расскажу как-нибудь.
Начал я с того, что обсудил идею с ChatGPT - он позадавал вопросов, накидал пару идей и, самое главное, подготовил промпт для Claude Code. Затем я загрузил готовый промт в claude и начал решать, как будет выглядить будущее приложение. Мой первый косяк: Я сказал claude что хочу приложение под мобилки и веб одновременно. Зачем? Кто будет скачивать приложение в разгар вечеринки? Не знаю, но осознание этого пришло слишком поздно. По этому клиентская часть выполнена на flutter. Да, если я поеду крышей, я смогу легко создать мобильные приложения и под ios и под android, но я очень много раз пожалел об этом выборе, но об этом я расскажу отдельно, когда дойду до описания создания дизайн-проекта приложения.
База данный - supabase (в будущем планирую полностью избавиться) за нее я ничего не платил. Сейчас там хранятся только отзывы и аналитика ошибок.
Cloudflare - Хранилище картинок пользователей, организация игровых комнат через durable objects, воркеры - 5$ месяц
Домен покупал тут же на Cloudflare - 1$ на год за drinkdraw.app урвал!
Для генерации картинок с режимами игры, использовал gemini, самую дешевую подписку за 2$ по скидке. Ниже потрясающий образец рабоыт gemini, название раунда угадайте сами)
Дальше я продолжил косячить:
Я не указал четких целей в промте и не перепроверил архитектуру приложения, которую предложил claude.
Вместо того чтобы установить visual studio и подключить claude code, я начал руками выполнять его команды
Первая и самая большая моя ошибка - в промте полностью отсутствовала цель, было лишь сухое описание механики игры, и примерной архитектуры, поэтому claude решил что игру я делаю исключительно для своей компании. Это привело к тому, что в моменте уже полностью рабочая версия игры могла максимально поддерживать 30-40 игроков одновременно при беспланой версии supabase. Да claude решил, что это замечательная идея реализовать комнаты через realtime supabase connections. Для понимания, в бесплатной версии у вас всего 60 таких подключений, 6-10 из которых занято постоянно внутренними процессами. Когда я спросил у claude, сколько будет стоить в месяц поддерживать игру на текущей архитектуре но для 100-200 игроков, он ответил: "Не парься, речь идет о 5-ных суммах в $" Это слово в слово 🤡. Тогда я понял, как сильно облажался, и начал продумывать варианты.
1) Вариант первый - не париться и выпустить бету на текущей архитектуре.
2) Немного изменить текущую реализацию, пожертвовать производительностью, чтобы поддерживать хотя бы 70 -100 игроков. Опять же для бета версии должно быть норм.
3) Полностью переделать организацию комнат, через cloudflare
Я решил идти по 3-му пути. Да, я потратил больше времени, не факт что игра вообще кому-то зайдет, но если зайдет, то я уверен, что даже 100, 200, 300 игроков смогут нормально поиграть. Ну а первое впечатление - сами знаете...
2-я ошибка, о которой я писал выше, решилась намного проще и быстрее. Но я потратил кучу токенов на то, чтобы claude каждый раз мне расписывал по шагам, что и где я должен сделать. В моменте мне это надоело, я скачал VS, подключил cloude, нагенерел api токенов, где только можно. Больше руками я не делал практически ничего.
Детально всю архитектуру расписывать ленюсь, по этому вот вам картинка от claude. Я как-то попросил объяснить его архитектуру приложения детским языком) Если кому-то действительно это будет интересно, я сделаю отдельный пост.
Бред сумасшедшего
Уже как-то много букв набралось...
В следующей части, расскажу как я создавал дизайн проект и про claude скилы, которые помогли улучшить дизайн, в 3-й части про те места где я мог бы сохранить приличную часть токенов, 4-й - про полезные ресурсы, которые я нашел пока создавал игру. А пока, жду первых отзывов.. надеюсь игра добавит вашей вечеринке красок. Рисуй, угадывай, пей 🥂
