UNO Online

Клиентское Single Page Application с детерминированной пошаговой логикой, анимациями на 60 FPS и автономными алгоритмами принятия решений для трех AI-соперников

[role: frontend-developer] [year: 2025] [type: game]
Собрано вот на этом
[package.json]
{
"stack": {
"frontend": [ "React", "Tailwind CSS" ],
"runtime": [ "TypeScript" ],
"devtools": [ "Vite", "GitHub Pages" ]
}
}

Вы думаете, что Uno — это просто карточная игра?

Попробуйте переложить её в код. Десятки условий на каждый ход, непредсказуемые спецкарты, три автономных соперника и строгое соблюдение таймингов анимаций. Без железной архитектуры такой проект моментально превращается в кашу из багов и бесконечных if-else.

[01_challenge]

Хаос сотен сценариев

В Uno сотни нелинейных развитий событий: сброс последней карты, цепочки штрафов, смена направления круга. Без строгой структуры логика быстро превращается в запутанный клубок багов.

[02_solution]

Конечный автомат и честный рандом

Архитектура на основе конечного автомата (FSM) на чистом React. Каждое действие — строго типизированный переход из одного состояния в другое. Это гарантирует 0 зависших партий.

[03_impact]

Мгновенный запуск без бэкенда

100% чистый клиентский код, захощенный на GitHub Pages. Никаких тяжелых игровых движков или задержек сервера — игра моментально открывается и работает со стабильными 60 FPS.

Архитектуру заложили. Раздаем карты!

Давайте посмотрим, как эта строгая машина состояний ощущается на игровом столе…

Что происходит под сукном стола?

Боты не дергают сервер и не выбирают карты наугад. Под капотом — взвешенная эвристика: бот анализирует вероятность победы соперников, держит спецкарты как щит и выбирает цвет по доминирующей масти в руке. А чтобы игра ощущалась живой, добавлена микрозадержка имитации «человеческого раздумья».

Эвристический AI без бэкенда
Эвристический AI без бэкендаОчередь событий и асинхронный пайплайнЗащита от мухлежа и валидация ходов

Для создания живой и плавной веб-игры не нужны тяжелые движки вроде Unity или Canvas. Достаточно чистого React, строгой машины состояний и грамотной работы с CSS-анимациями — всё запускается мгновенно на любом утюге прямо в браузере.

Сотни нелинейных правил. Ноль серверной нагрузки.

— Главный вывод проекта

*SPA-проект на чистом React. Готово к игре прямо в браузере. Desktop-only (оптимизировано под управление мышью и широкие экраны).

P.S. Попробуйте обыграть первого бота — он самый вредный…