Я выпустил карточную игру за одни выходные
Я создал браузерную версию Prší. Это чешская карточная игра. Это игра 1 на 1 против простого ИИ. В неё можно играть с помощью мыши или сенсорного экрана.
Играть здесь: https://czsoftcode.github.io/prsi/
Большинство называет это «vibe coding» (вайб-кодингом). Я не согласен. Вайб-кодинг часто означает, что вы просто описываете приложение и принимаете всё, что выдает ИИ. Я использовал другой метод.
Я использовал Claude Code, чтобы провести разработку через 10 четких этапов. У каждого этапа была конкретная цель и проверяемый результат.
Этапы включали:
- Настройку каркаса Vite и TypeScript
- Создание модели данных игрового движка
- Добавление базовых ходов и специальных карт
- Создание логики ИИ-противника
- Разработку пользовательского интерфейса и цикла взаимодействия
- Запуск 200 сквозных (end-to-end) симуляций ИИ
- Деплой сайта
Я планировал и проверял каждый этап, прежде чем переходить к следующему. Это позволило сохранить чистоту кода. Я написал около 300 юнит-тестов. Когда ИИ ошибался, мои тесты сразу это обнаруживали.
Самым сложным был не код, а правила игры.
- Наслоение семерок: игроки могут выкладывать до четырех семерок подряд, заставляя противника взять 8 карт.
- Дамы — джокеры: дама меняет требуемую масть. Мне нужно было убедиться, что движок обрабатывает это корректно.
Я также столкнулся с техническими трудностями:
- Деплой: мои изображения перестали отображаться на GitHub Pages из-за ошибок в путях. Я исправил это, используя base URL в Vite.
- Версионирование: я забыл обновить
package.jsonпосле создания тега релиза.
Я не усложнял ИИ. Он делает только допустимые ходы. Целью был корректный ИИ, а не умный. Я провел 200 симуляций игр, чтобы доказать, что игра всегда заканчивается либо победой, либо ничьей.
Поэтапная разработка вместо того, чтобы полагаться на «вайб», позволила мне выпустить продукт, в котором я действительно разбираюсь.
Источник: https://dev.to/stkremen/i-shipped-a-card-game-in-a-weekend-but-i-didnt-really-vibe-code-it-34g9
Дополнительное сообщество для обучения: https://github.com/czsoftcode/prsi
