Цель игры – найти и раскрыть все пары карт на поле за отведённое время.
Игра доступна по ссылке на github-Pages.
Перед началом игры можно включить или выключить таймер, а также выбрать уровень сложности:
- лёгкий: размеры поля 4х4;
- нормальный: размеры поля 4х5;
- сложный: размеры поля 5х5;
Во время игры можно:
- перетасовать все карты и перезапустить игру на выбранном уровне сложности – кнопка
Refresh cards
- вернуться к начальному меню выбора сложности – кнопка
Reset Game
Если таймер активирован, и время вышло, то игра автоматически закончится.
Игра написана на чистом Javascript, CSS и HTML, в подходе сочетаются принципы ООП и функционального программирования, адаптивно-респонсивная вёрстка. Задействованы DOM API, асинхронные глобальные функции setTimeout и setInterval, делегирование событий, ES6 модули. Для сборки используется таск-менеджер Gulp со встроенным модулем webpack.
├── docs
| ├── css
| ├── index.html
| ├── pairs.bundle.js
| ├── pairs.bundle.js.map
| └── pairs.css
├── gulpfile.js
├── package.json
├── README.md
├── src
| ├── css
| ├── index.html
| ├── js
| ├── pairs.css
| └── pairs.mjs
└── webpack.config.js
docs
и src
– основные папки проекта:
- В
src
находится исходный код. docs
содержит итоговую сборку.
Для сборки используется таск-менеджер Gulp. Установите его, а также необходимые зависимости с помощью команды npm install
, находясь в корневой папке проекта:
$ cd <pairs>
$ npm install
Далее команда gulp
автоматически пересобирёт проект в папке docs
на основе изменений в файлах папки src
, а также запустит live-server.
Игра выполнена в минималистичном дизайне, с простыми, но приятными анимациями.
Вёрстка полностью адаптивна, UI/UX удобен и понятен на экранах любого размера благодаря отзывчивому размеру шрифта, определённому с помощью функции clamp()
, и размерам элементов в em/rem
. Основное позиционирование сделано с помощью CSS Grid
.
В основной js-логике приложения есть два главных объекта и функция создания новой игры:
interfaceObject
храненит осноаные элементы интерфейса, в нём же предустановлено время таймера.gameConditions
отвечает за условия игры, победы, сложность и наличие (либо отсутствие) таймера.- функция
newGame()
передаёт выбранные пользователем настройки игры вgameConditions
, затем создаёт поле игрыgameField
и запускает главный скрипт игрыstartGame()
.
Для создания объектов interfaceObject
и gameConditions
используются функции-фабрики createInterfaceObject()
и createGameConditions()
соответственно.
Элементы интерфейса сохраняются в объект один раз, при первоначальной загрузке страницы, и потом почти все манипуляции производятся без поиска по DOM-дереву. Условия игры обновляются каждый раз при запуске новой игры.
Таймер может быть либо включен, либо отключен, перед началом партии. Скрипт игры проверяет его наличие и динамически создаёт DOM элемент при необходимости. Сам таймер реализован через инкапсуляцию заданного первоначального значения (количества секунд) в функции createTimer()
и последующего регулярного вызова обновляющей функции updateTimer()
через setInterval.
В любой момент игры пользователь может вернуться к выбору настроек или перетасовать карты, при этом страница не перезагрузится, но все таймеры, счётчики и слушатели событий игрового поля сбросятся.