Игра "Memory"

"Memory" — компьютерная версия одноимённой настольной игры для тренировки памяти.
Игра создавалась в процессе самостоятельного освоения курса "Введение в React" онлайн-школы HTML Academy.

Суть игры крайне проста. На игровое поле выкладываются карточки "рубашкой" вверх. У каждой карточки есть своя пара. Нажатие на карточку перевернёт её и покажет изображённый на ней рисунок. Если у двух последовательно открытых карточек одинаковые рисунки, пара считается найденной. Задача игрока: найти все пары карточек за как можно меньшее число попыток.

В качестве исходных данных для создания игры выступали:

• готовая вёрстка;
• графические изображения;
• ТЗ (ознакомиться с ним можно по ссылке).

🛠️ Использованные технологии

• HTML
• CSS
• JavaScript
• React
• Webpack

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

1. Клонируйте репозиторий на локальный компьютер.

2. В командной строке перейдите к папке со склонированным репозиторием.

3. Введите инструкцию:

   npm install

4. Введите:

   npm run start

Для остановки приложения нужно нажать в командной строке комбинацию клавиш CTRL + C, после чего нажать Y.

⚠️ Для запуска приложения должна быть установлена платформа Node.js.

💻 Руководство пользователя

Приложение состоит из трех экранов: начального экрана, экрана игры и экрана результатов.

• После загрузки страницы пользователь видит начальный экран. На начальном экране можно прочитать правила игры и выбрать тему изображений для карточек.
• Экран игры отображает поле с карточками и текущую статистику (количество открытых карточек и сделанное число ходов).
• Экран результатов отображает таблицу с результатами игроков.

Начальный экран

Перед началом игры следует ознакомиться с правилами, представленными в центральной части экрана.
Для старта игры нужно выбрать тему изображений для карточек. На выбор доступны три темы: "Котики", "Цветочки" и "Машины".
Чтобы выбрать тему, нужно кликнуть на кнопку с соответствующим названием.
Как только выбор будет сделан, произойдёт переход к экрану игры.

Экран игры

При попадании на экран игры Вы увидите перед собой игровое поле с выложенными на нём "рубашкой" вверх карточками и информационную панель с текущей статистикой.
Чтобы перевернуть карточку, нужно кликнуть по ней кнопкой мыши. Для завершения хода нужно открыть вторую карточку. Если изображения на карточках совпадают, то карточки считаются отгаданными. Они остаются на поле и далее в игре не участвуют. Если изображения на карточках различаются, обе карточки переворачиваются обратно "рубашкой" вверх.

На информационной панели в верхней части экрана отображается индикатор прогресса, заполняемый при отгадывании очередной пары карточек, а также текстовое поле, показывающее количество сделанных шагов (переворотов).

После того, как все пары будут найдены, появится модальное окно, сообщающее о победе в игре и предлагающее перейти к экрану результатов.

Экран результатов

На экране результатов Вы можете увидеть результат своей игры и сравнить его с результатами других игроков. Если достигнутый результат Вас не устроит, или Вы хотите установить новый рекорд, Вы можете начать новую игру, кликнув по кнопке с соответствующей надписью.