Connect Four Game

Веб-реализация классической игры "4 в ряд" (Connect Four) с использованием React и TypeScript.

Деплой

Приложение в актуальной версии всегда можно найти тут https://four-in-row-tochka.vercel.app/

Функциональность

Основные возможности:

• Игровое поле: 7 колонок × 6 рядов
• Два режима игры:
  • Игрок против игрока
  • Игрок против ИИ
• Отмена/возобновление ходов - полная история игры
• Автоматическое определение победителя по горизонтали, вертикали и диагонали
• Определение ничьи при заполнении поля

Дополнительные функции:

• Валидатор ходов для анализа игровой последовательности
• Анимации падения фишек
• Изменение размера поля

Запуск проекта

Предварительные требования:

• Node.js (версия 17 или выше)
• npm или yarn

Установка и запуск:

# Клонирование репозитория
git clone https://github.com/wswfws/four-in-row
cd four-in-row

# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run start

# Сборка для production
npm run build

Приложение будет доступно по адресу: http://localhost:3000/

Особенности реализации

Сильные стороны решения:

1. Чистая архитектура:

   • Разделение логики и UI компонентов
   • Типизированные интерфейсы
   • Чстый CSS
   • Имутабельные объкты с стиле React

2. Продвинутые возможности:

   • Полная система отмены/повтора ходов
   • Простой, но эффективный ИИ
   • Валидатор для анализа игровых последовательностей

3. Качество кода:

   • TypeScript для типобезопасности
   • Модульная структура
   • Переиспользуемые компоненты
   • Читаемость и поддерживаемость

4. Пользовательский опыт:

   • Интуитивный интерфейс
   • Визуальная обратная связь

Валидатор ходов

Реализована функция validate которая анализирует последовательность ходов и возвращает детальную информацию о состоянии игры на каждом шаге.

const default_size: PoleSize = {height: 6, width: 7};

export default function validate(moves: number[], size = default_size): { [p: string]: GameState } {
}

Структура проекта

src/
│   App.tsx                    # Главный компонент приложения
│   config.ts                  # Конфигурационные параметры
│   index.css                  # Глобальные стили
│   index.tsx                  # Точка входа
│
├───ConnectFour/               # Компоненты игры
│
├───logic/                     # Бизнес-логика игры
│   │   Bot.ts                 # Логика ИИ-ботa
│   │   CellByPlayer.ts        # Управление ячейками по игрокам
│   │   Game.ts                # Основная игровая логика
│   │   GamePole.ts            # Логика игрового поля
│   │
│   └───Stack/                 # Реализация стека
│           Stack.ts           # Структура данных стек
│           StackNode.ts       # Узел стека
│
├───tests/                     # Тесты
│       validate.test.ts       # Тесты валидатора ходов
│
└───types/                     # TypeScript типы