Картинка в пазл

Реализуйте библиотеку для превращения картинок в пазлы.

Основные возможности проекта

• Библиотека для превращения картинок в пазлы.
• Настройка сложности (количество фрагментов по горизонтали и вертикали).
• Перемешивание фрагментов.
• Перетаскивание фрагментов мышью.
• Подсчет времени сборки.
• Публикация на GitHub с документацией.

Функциональность библиотеки

Библиотека должна предоставлять следующие возможности:

• Загрузка изображения и его отображение на canvas.
• Разбиение изображения на фрагменты по сетке (rows × cols).
• Перемешивание фрагментов (с возможностью сохранения одного фрагмента на месте).
• Перетаскивание фрагментов мышью (drag-and-drop).
• Подсчет времени сборки (секундомер).
• Подсчет количества ходов.

Параметры настройки

При создании пазла можно задавать параметры:

• image - ссылка на изображение или HTML-элемент.
• rows - количество строк фрагментов.
• cols - количество столбцов фрагментов.
• shuffle - процент перемешивания (0-100).
• onComplete - callback при завершении сборки.

Структура пазла

Пазл должен отображаться на canvas. При разбиении на фрагменты каждый фрагмент помещается в отдельную ячейку сетки. Фрагменты можно перетаскивать, меняя их местами. При правильной сборке все фрагменты становятся на свои места и отображается картинка целиком.

Интерактивность

Взаимодействие с пазлом через мышь:

• Клик по фрагменту - выделение.
• Клик по пустой ячейке - перемещение выделенного фрагмента.
• Drag-and-drop - перетаскивание фрагмента на другую ячейку.

Использование библиотеки

Пример использования библиотеки:

• Подключить CSS-файл со стилями пазла.
• Подключить JS-файл с библиотекой.
• Создать контейнер для пазла.
• Инициализировать пазл с настройками.

События

Библиотека должна генерировать события:

• onShuffle - после перемешивания фрагментов.
• onMove - при каждом перемещении фрагмента.
• onComplete - при завершении сборки пазла.

Публикация на GitHub

Библиотека должна быть выложена на GitHub с:

• README.md с описанием и инструкцией по установке.
• Демо-страницей с примерами использования.
• Исходным кодом библиотеки.

Тестирование

Библиотека должна быть протестирована на:

• Разных браузерах (Chrome, Firefox, Safari, Edge).
• Разных размерах изображений.
• Разной сложности (3x3, 4x4, 5x5).

Дополнительные возможности

• Автоматическая сборка пазла (кнопка "Собрать").
• Анимация перемещения фрагментов.
• Запись и воспроизведение ходов сборки.