Игра в 15 или пятнашки — популярная головоломка, придуманная в 1878 году Ноем Чепмэном.
Это набор одинаковых квадратных костяшек с нанесенными числами, заключенных в квадратную коробку. Длина стороны коробки в четыре раза больше длины костяшек (для набора из 15 элементов). Соответственно, в коробке остается незаполненным одно квадратное поле. Цель игры — перемещая костяшки по коробке, добиться упорядочивания их по номерам, желательно сделав как можно меньше перемещений.
application.js
Реализуйте игру в соответствии со следующими требованиями:
- Размер поля должен быть 4x4
- В начальной позиции пустым всегда является правый нижний квадрат
- Элементы формируются случайным образом по следующему алгоритму: сначала они перемешиваются с помощью
randomize(values)
, а затем наполняют таблицу Таблица должна заполняться значениями сверху вниз, то есть таким образом:
| 1 | 5 | 9 | 13 | |----|----|----|----| | 2 | 6 | 10 | 14 | |----|----|----|----| | 3 | 7 | 11 | 15 | |----|----|----|----| | 4 | 8 | 12 | |
Перемещение костяшек происходит с помощью стрелок: при нажатии → левая костяшка сдвинется вправо, в пустую область.
Тесты завязаны на верстку (Bootstrap), поэтому к ней предъявляются особые требования. Вот как выглядит начальная позиция:
<div class="gem-puzzle">
<table class="table-bordered">
<tbody>
<tr>
<td class="p-3">10</td>
<td class="p-3">11</td>
<td class="p-3">6</td>
<td class="p-3">4</td>
</tr>
<tr>
<td class="p-3">14</td>
<td class="p-3">2</td>
<td class="p-3">12</td>
<td class="p-3">1</td>
</tr>
<tr>
<td class="p-3">3</td>
<td class="p-3">13</td>
<td class="p-3">9</td>
<td class="p-3">8</td>
</tr>
<tr>
<td class="p-3">5</td>
<td class="p-3">7</td>
<td class="p-3">15</td>
<td class="p-3 table-active"></td>
</tr>
</tbody>
</table>
</div>
- Класс таблицы постоянен
- У каждой ячейки проставлен класс p-3
- Пустая ячейка не содержит текста
- У пустой ячейки добавляется класс table-active
Подсказки
- Нажатие на клавиши генерирует код, по которому можно понять, что за клавиша была нажата
- Коды для стрелок можно подсмотреть в тестах
- Для получения нажатой клавиши из события используйте свойство key из объекта события
- Используйте событие keyup
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Отзывы

Шикарное испытание! Продумал логику игры, прокачал навыки использования методов DOM, разобрался с тестами. Спасибо большое, очень ценный опыт.