Skip to content

A memory game where you're challenged to find all pairs of cards.

Notifications You must be signed in to change notification settings

DarthEvgenius/pairs_memory_game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Игра в пары

Цель игры – найти и раскрыть все пары карт на поле за отведённое время.
Игра доступна по ссылке на 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.

В любой момент игры пользователь может вернуться к выбору настроек или перетасовать карты, при этом страница не перезагрузится, но все таймеры, счётчики и слушатели событий игрового поля сбросятся.

About

A memory game where you're challenged to find all pairs of cards.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published