Игра «Паззлы» основана на принципе «пятнашки». Если кто помнить, смысл игры собрать в ряд цифры от 1-го до 15-ти. Игровое поле состоит из клеток 4 на 4, что в общем дает 16 клеток на игровом поле. Последняя 16-я клетка — пустая, так как ячейки должны передвигаться. Вот такая вот не затейливая игра, но она имеет довольно большой потенциал, так как ее процесс может понравиться многим людям. Игровой процесс затягивает и способствует развитию логического мышления.
Вместо цифр — картинки
Вместо цифр, так как это может показаться скучноватым и не привлекательным, я использовал десять картинок из красочных мультфильмов. Вы можете выбрать любую из них, нажать кнопку «перемешать» и собственно начинать складывать. В верхнем слайдере всегда можно посмотреть на образец, чтобы понимать на каком месте должен оказаться любой из фрагментов изображения.
Умное перемешивание
В данной версии игры исключена вероятность невозможности складывания изображения. Скрипт перемешивает фрагменты по умному алгоритму с изначально собранной картинки. Если производить перетасовку фрагментов стандартной функцией перемешивания массива, то появляется вероятность подмены местами 1-го и 9-го фрагмента, что делает сборку невозможной. Что касается сборки изображения при нажатии кнопки, то здесь все иначе. Фрагменты изображения выстраиваются в ряд согласно своему ID, которое назначено каждому из них. Так что увидеть решение сборки от «компьютера» — не получится, так как данный алгоритм не реализован.
Пару слов о коде
Какое-то конкретное изображение не привязано ни к скрипту, ни к стилям. Ссылка на него берется из атрибута SRC тега IMG верхнего слайдера. Таким образом если добавить в слайдер еще слайдов, то с ними также можно будет поиграться. Это является результатом универсальности скрипта и стилей.
Мобильная версия игры «Паззлы» на JavaScript
Мобильная версия игры работает отлично. Адаптивность в норме. Функция для определения направления смахивания сенсора в данной игре не использована, так как я посчитал, что будет достаточно простого «тапа» по фрагменту, для взаимодействия с ним. Как показала практика — это действительно так. Минимальный набор эффектов и звуковых сопровождений, перекрывается яркой мультяшной картинкой.
Ссылки
Ознакомиться с кодом данной программы вы можете на странице GitHub репозитория https://github.com/Webpolka/puzzles-sass
Чтобы поиграть и приятно провести несколько минут за игровым процессом перейдите по данной ссылке.