JavaScript: Пятнашки

Обновлено: 25 июля, 09:08
576
Студентов
67%
Завершения

Игра в 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

init position

Подсказки

  • Нажатие на клавиши генерирует код, по которому можно понять, что за клавиша была нажата
  • Коды для стрелок можно подсмотреть в тестах
  • Для получения нажатой клавиши из события используйте свойство key из объекта события
  • Используйте событие keyup

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Отзывы

Аватар пользователя Евгений Филиппов
Евгений Филиппов 01 февраля 2023

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