Игра «2048»

Проект - рефакторинг проекта стороннего разработчика.

Причина

Проект начался с того, что я наткнулся на видео, в котором демонстрировался процесс разработки игры «2048» (ссылка на youtube). Идея мне понравилась, но захотелось кое-что добавить и отрефакторить код проекта. Плюс ко всему мне хотелось применить знания, которые получил на курсе «JavaScript. Архитектура клиентских приложений». Я решил что это будет интересно и взялся за работу. 😊

Цель

• Инфраструктура

  ✅ Добавить Typescript

  ✅ Добавить линтер ESLint

• Архитектура

  ✅ Организовать код по шаблону проектирования MVP *️⃣

  ✅ Вынести код, отвечающий за игровую логику в отдельный сервис

  ✅ Вынести код, отвечающий за обработку событий в отдельный сервис

*️⃣ Отдельно хочется уточнить. Я не стремился к точной реализации шаблона проектирования MVP. Целью было взять общий принцип разделения кода и применить его к проекту.

Общее описание

Общая идея - разделить код проекта на основании его задач в проекте, и объединить в соответствующие сущности. Например, выделить код, который отвечает за управление в игре, и создать отдельный сервис. Таким образом, в проекте появились такие сущности, как:

• Компонент;
• Презентер;
• Модель;
• Сервис.

Работу приложения можно продемонстрировать на следующей схеме:

Получилась структура, где основным «звеном» стал BoardPresenter. В нем собираются и объединяются все компоненты и происходит их связывание между собой. Компонент Application является «точкой входа», в которой происходит инициализация сервисов, модели и презентеров.

*️⃣ Хочется сразу отметить, что некоторые сущности выглядят излишними. Так, может показаться излишним добавление модели. Однако, ее добавление обусловлено не практическим подходом, а скорее организационным. Хотелось видеть отдельную сущность, которая берет на себя определенные задачи. В данном случае — задачи хранения и сортировки коллекции координат ячеек игровой доски.

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

• Первоначальный шаблон проекта взят с учебного курса «JavaScript. Архитектура клиентских приложений»;
• Используется конфигурационный файл линтера ESLint от команды «JS авторов». Его можно найти в открытом доступе - ссылка на NPM;
• (может для кого-то окажется полезным) Функцию getRandomInt() взял из репозитория You don't (may not) need Lodash/Underscore;
• Используется логика игры автора оригинального проекта.

Задачи на будущее

Поскольку данный проект - это скорее эксперимент, то и результат, который вы можете наблюдать, тоже экспериментальный. Мне пока не понятно на сколько далеко я зайду в поставленных целях, но несмотря на это хочется сделать следующее:

🆕 Определиться с логикой в компонентах;

🆕 Интересно было бы добавить тесты;

🆕 Попробовать переписать с использованием других шаблонов проектирования.

Использование

Склонируйте проект и перейдите в директорию проекта:

git clone https://github.com/kam4atka/2048-ts.git
# or
git clone git@github.com:kam4atka/2048-ts.git

cd ./2048-ts

При работе с проектом доступны следующие команды:

• Установка зависимостей

  npm i

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

  npm start

• Сборка проекта

  npm run build

• Запуск линтинга кода

  npm run lint