Игра в 15 или пятнашки — популярная головоломка, придуманная в 1878 году Ноем Чепмэном. Представляет собой набор одинаковых квадратных костяшек с нанесёнными числами, заключённых в квадратную коробку. Длина стороны коробки в четыре раза больше длины стороны костяшек для набора из 15 элементов, соответственно в коробке остаётся незаполненным одно квадратное поле. Цель игры — перемещая костяшки по коробке, добиться упорядочивания их по номерам, желательно сделав как можно меньше перемещений.
| 9 | 2 | 12 | 7 |
|----|----|----|----|
| 6 | 15 | 10 | 1 |
|----|----|----|----|
| 13 | 14 | 5 | 3 |
|----|----|----|----|
| 11 | 8 | 4 | |
application.js
Реализуйте игру в соответствие со следующими требованиями:
- Размер поля должен быть 4x4
- В начальной позиции пустым всегда является правый нижний квадрат
- Элементы формируются случайным образом по следующему алгоритму: сначала они перемешиваются используя
randomize(values)
, а затем они наполняют таблицу. Таблица должна заполняться значениями сверху вниз, то есть пятый элемент, добавляемый в неё, находится по индексам [0, 1];
Перемещение костяшек происходит с помощью стрелок: при нажатии →, левая костяшка, относительно пустой области, сдвинется вправо.
Так как тесты завязаны на верстку (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
Для полного доступа к испытанию нужна профессиональная подписка
Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.