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

Question

[ekinsdrow]

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

Comments

[Алексей Ярков]

Вы конечно пробовали гуглить js puzzle picture, но ничего не нашли? Да?

[WapSter]

Выучить js, поучиться работать с canvas. Твой вопрос звучит так: "Я ничего не знаю, но помогите мне построить коллайдер"

Answer 1

[twobomb]

Крч грубо сделал, разбивает на квадратные части и колизия тож по квадратам,а не по контуру. Количество частей разбивки можно переменной настроить. Зато без всяких библиотек

Comments

[kunjut19]

спасибо, что без библиотек!!

Answer 2

[Vitaliy]

Сначала нужно определиться, делать это растром или векторной графикой.
В перспективе, лучше делать это растром (то есть на canvas), и тут лучше выбрать библиотеку, которой это все будете рендерить.

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

Создаем полотно, и добавляем на него спрайт с буквой N-е количество раз, и для каждой копии этого спрайта накладываем маску. Маску нужно предварительно сгенерировать на основе линий для разрезания (это уже отдельная тема обсуждения)

Answer 3

[Wasya UK]

А как вам вариант пройтись по всех пикселях, сделать массив частей, определить для каждого компонента пазла центр и то, где примерно он должен стоять? Я в данном вопросе не шарю, и таким не занимался, просто интересно, может вам такое подойдёт.