Сокобан — японская головоломка, задача игрока заключается в том, чтобы передвинуть все тележки по местам. Все эти места отмечены крестиками. На первый взгляд игра может показаться простой, но это не так. Простым может оказать уровень с множеством контейнеров и комнат, а уровень с тремя — четырьмя контейнерами может быть очень сложным, так как алгоритм решения содержит в себе глубокую вложенность действий. Такие уровни требуют не абы какой смекалки и аналитического мышления от игрока, так как имеют всего одно неочевидное решение. Подобная ситуация может привести играющего к мысли, что данной уровень не проходим, но это не так. Все уровни в данной игре протестированы, и если у вас не получается, значит вы где-то не правильно ходите.
Абсолютное позиционирование и медиа-запросы.
Все ячейки игрового поля представляют собой контейнеры с абсолютным позиционированием. Для каждого медиа-запроса значение CSS переменной (—cells-size) имеет свое значение. Переменная нужна для того, чтобы считывать ее значение средствами JavaScript и производить все необходимые расчеты для создания игрового процесса. Таким образом происходит связка «адаптивных» стилей со скриптом.
Игровое поле — это массив !
Изначально, игровое поле — это двумерный массив с цифрами, каждая из которых далее превратится то ли в стенку, то ли в тележку, то ли в человечка… С помощью цикла, в зависимости от того какая цифра в массиве, в DOM создаются контейнеры с позиционированием и классом. В зависимости от того какой класс, происходит отрисовка изображения для ячейки(контейнера).
Далее мы создаем два пустых массива. Нужны они для того, чтобы заполнить их объектами со значениями X и Y. Для тележек — первый массив, для мест, куда нужно поставить тележки — второй массив. Делаем мы это, опять же, перебирая циклом двумерный массив игрового поля. С помощью условного оператора if, делаем выборку по искомой цифре. Заполнение данных массивов происходит объектами, в которых значение Y соответствует значению внешнего цикла, а X — значению внутреннего цикла. Теперь, по мере написания скрипта, мы сможем с ними взаимодействовать. В данном контексте имеется ввиду — сравнивать их по X, Y, индексу, а также двигать. Для человечка также, мы создаем объект, в который помещаем значения по иксу и по игреку, аналогичным способом.
Управление и событие Keydown
Что касается управления человечком на игровом поле, то есть два способа. Первый — управление с помощью клавиш, второй — посредством сенсора. Сенсорный джойстик появляется на мобильных устройствах и планшетах, в нижней области экрана. Игровой цикл организован с помощью функции setInterval(). Данный способ позволяет программно управлять скоростью движения человечка и реализовать адекватное управление для него. Это означает, что мы можем обойти влияние дефолтной задержки браузера, длинной в 1 секунду, на игровой процесс. Данная задержка происходит при повторном отрабатывании события keydown, когда клавиша удерживается.
Код мини-игры «Сокобан» на JavaScript и ссылки.
Код данной мини-игры имеет осмысленные имена функций и переменных. Также код имеет многочисленные комментарии и написан в доступной, легко читаемой форме. Это дает возможность начинающим кодерам изучать его, и постигать азы кодирования. Ознакомиться с содержанием кода вы можете на странице https://github.com/Webpolka/sokoban-sass
Чтобы поиграть в мини-игру «Сокобан» на JavaScript, перейдите по следующей ссылке.