Как сделать пазл на js?

Здравствуйте, требуется реализовать что-то подобное, как на картинке, на js, то есть нужно выбранную букву резать на n'ое кол-во частей, причем желательно по рандомным линиям, после оставлять ее контур и собирать drag-n-drop'ом. Можете, пожалуйста, подсказать как реализовать или куда хотя бы копать, буду крайне благодарен)

5f31573a5664e849861782.jpeg
  • Вопрос задан
  • 412 просмотров
Решения вопроса 1
twobomb
@twobomb
Крч грубо сделал, разбивает на квадратные части и колизия тож по квадратам,а не по контуру. Количество частей разбивки можно переменной настроить. Зато без всяких библиотек
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Сначала нужно определиться, делать это растром или векторной графикой.
В перспективе, лучше делать это растром (то есть на canvas), и тут лучше выбрать библиотеку, которой это все будете рендерить.

Например, выберем Pixi.js

Создаем полотно, и добавляем на него спрайт с буквой N-е количество раз, и для каждой копии этого спрайта накладываем маску. Маску нужно предварительно сгенерировать на основе линий для разрезания (это уже отдельная тема обсуждения)
Ответ написан
dmc1989
@dmc1989
А как вам вариант пройтись по всех пикселях, сделать массив частей, определить для каждого компонента пазла центр и то, где примерно он должен стоять? Я в данном вопросе не шарю, и таким не занимался, просто интересно, может вам такое подойдёт.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы