Tic-Tac-Toe

Современная реализация классической игры "Крестики-нолики", разработанная как Single Page Application (SPA). Проект демонстрирует применение объектно-ориентированного подхода и архитектурного паттерна MVC на чистом JavaScript, а также интеграцию с нейросетью Google Gemini для создания умного противника.

📺 Демо

Посмотреть проект можно здесь: (https://antonlushchay.github.io/tic-tac-toe/)

📋 О проекте

Данный репозиторий — учебный проект, созданный для углубленной практики JavaScript и архитектурного проектирования.

Ключевые цели разработки:

• Реализация архитектуры MVC (Model-View-Controller) без использования фреймворков.
• Создание SPA (Single Page Application) с роутингом на основе хешей.
• Практика ООП в JavaScript.
• Настройка полного цикла сборки и линтинга проекта.
• Интеграция с внешним API (Google Gemini) для реализации логики ИИ.

🛠 Технологический стек

• HTML5 (Семантическая верстка)
• SCSS (Модульные стили, переменные, вложенность)
• JavaScript (ES6+, классы, асинхронность, модули)
• Webpack (Сборка ресурсов, dev-server, оптимизация)
• Babel (Транспиляция для поддержки старых браузеров)
• PostCSS (Autoprefixer для кроссбраузерности)
• ESLint / Prettier / Stylelint (Контроль качества кода и форматирование)
• Google Gemini API (Искусственный интеллект для игры против компьютера)

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

• Режимы игры:
  • 1 vs 1: Игра с другом на одном устройстве.
  • 1 vs AI: Игра против искусственного интеллекта.
• Умный ИИ: Три уровня сложности, реализованные через запросы к разным моделям Google Gemini:
  • Easy (gemini-2.5-flash-lite-preview)
  • Medium (gemini-2.5-flash)
  • Hard (gemini-2.5-pro)
• Настройки:
  • Выбор языка интерфейса (English, Español, Русский).
  • Выбор первого игрока (X или O).
  • Выбор сложности ИИ.
• SPA навигация: Плавные переходы между экранами (Главная, Игра, Настройки) без перезагрузки страницы.
• Анимации: Визуальные эффекты ходов и переходов.

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

Чтобы запустить проект локально на своем компьютере:

1. Клонируйте репозиторий:

   git clone https://github.com/AntonLushchay/tic-tac-toe.git
   

2. Перейдите в папку проекта:

   cd tic-tac-toe
   

3. Установите зависимости:

   npm install
   

4. Настройка окружения: Создайте файл .env в корне проекта и добавьте ваш API ключ для Google Gemini (необходимо для работы режима против ИИ):

   GEMINI_API_KEY=ваш_ключ_здесь
   

5. Запустите проект в режиме разработки:

   npm start
   

   Проект откроется автоматически в браузере (обычно http://localhost:8080/).

6. Сборка проекта (Production):

   npm run build
   

---

Автор: AntonLushchay