RSS Gem Puzzle

Screenshot:

Deploy: https://funfordima.github.io/gem-puzzle/

Задание

Вам нужно реализовать классическую игру пятнашки

Правила игры

Игра представляет собой набор одинаковых квадратных костяшек с нанесёнными числами, заключённых в квадратную коробку. Длина стороны коробки в четыре раза больше длины стороны костяшек для набора из 15 элементов, соответственно в коробке остаётся незаполненным одно квадратное поле. Цель игры — перемещая костяшки по коробке, добиться упорядочивания их по номерам, желательно сделав как можно меньше перемещений.

You can see this project in action:

Основные функциональные требования

Базовые (обязательные):

1. дизайн на свое усмотрение, но должен быть адаптивный (декстоп, планшет, мобильный), при переходе между версиями все должно отображаться корректно, должен присутствовать весь функционал, ничего не должно пропадать, уезжать за пределы экрана. Допустимо изменить внешний вид для мобильной версии (например, спрятать кнопки в бургер-меню если они есть).
2. изначально body в файле index.html должен быть пустой, все необходимые элементы генерируются с использованием JS.
3. размер поля по умолчанию 4х4.
4. состояние игрового поля генерируется случайным образом забивается числами при запуске новой игры цифры перемешиваются (следует учитывать, что не все перемешивания случайным образом будут иметь решение).
5. при клике по фишке, стоящей рядом с пустой клеткой, фишка перемещается на место пустой клетки.
6. фишки можно перетягивать на пустое место при помощи мышки (drag & drop).
7. игру можно начать заново без перезагрузки страницы (для этого должна быть предусмотрена возможность,например по нажатию на кнопку или сочетанием клавиш клавиатуры).
8. реализовать отображение продолжительности игры в минутах и секундах "##:##" и количество ходов.
9. реализовать возможности сохранения игры (например, с помощью localStorage), чтобы при перезагрузке страницы иметь возможность продолжить с того же места где остановился.

Повышенной сложности (для получения дополнительных баллов):

1. реализовать возможность выбора размера поля: от 3х3 до 8х8.
2. реализовать анимацию перемещение пятнашек на поле.
3. при решении игры надо выводить сообщение «Ура! Вы решили головоломку за #:## и N ходов».
4. есть возможность включать/выключать звуковое сопровождение передвижение фишек (звук на ваш выбор)
5. лучших 10 результатов сохраняется в таблицу рекордов и их можно каким-либо образом посмотреть (например, по нажатию кнопки).

экстра (сложные):

1. вместо цифр на фишках отображаются части картинки и необходимо собрать картинку правильно, передвигая фишки.
2. добавить возможность анимированного завершения игры - в случае, если вы не знаете как дальше решать пазл, то по нажатию на кнопку фишки автоматически сложаться в нужном порядке и это будет происходить анимированно, то есть плавно с возможностью набледения за перемещениями фишек.
3. подключен и используется eslint (eslint-config-airbnb-base), webpack
4. приложение разбито на отдельные модули, используются фишки es6 и выше

Технические требования

1. работа приложения проверяется в браузере Google Chrome последней версии.
2. использование jQuery не допускается
3. нельзя использовать Angular/React/Vue.
4. можно использовать bootstrap, css фреймворки, html и css препроцессоры

Prepare and test

1. Install Node.js
2. Fork this repository: https://github.com/rolling-scopes-school/funfordima-JS2020Q3/tree/gem-puzzle/gem-puzzle
3. Clone your newly created repo: https://github.com/<%your_github_username%>/gem-puzzle/
4. Go to folder gem-puzzle
5. To install all dependencies use npm install
6. To run app in development mode use npm run dev in command line and use live server
7. To run app in production mode use npm run build in command line and use live server
8. To run server in development mode use npm run start in command line# gem-puzzle