Пазл на HTML5

Question

[sindrom]

Существует необходимость сделать детскую игру-пазл на HTML5/JavaScript. Выглядит это так: есть фон в виде силуэта некоего животного, разделенного на фрагменты (иллюстрация на скриншоте). Т.е., грубо говоря, набор многоугольников, составляющих законченную фигуру. Есть также сами фрагменты изображения, которые должны накладываться на эту фигуру.

Суть проблемы: как определить, что выбранный фрагмент, который пользователь переместил на определенную позицию, находится на своем месте (с небольшой погрешностью)?
Интересует в первую очередь описание алгоритма действий, а не подробности технической реализации.

Answer 1

[Григорий Перетяка]

Второй вариант, пожалуй, проще — смещение точек.

Положение верхнего правого угла исходного участка = x, y;
Положение верхнего правого угла перемещаемого участка = x1, y1;

Ну и если расстояние между точек меньше «процента погрешности», то верно.

Comments

[Григорий Перетяка]

Забыл, формула:
l = √(x-x1)2 + (y-y1)2

Короче, квадрат гипотенузы равен сумме квадратов катетов, не очень получается здесь формулы писать

[Fastto]

хорошее решение, быстрое и простое, поддерживаю

Answer 2

[Макс Кузнецов]

Может быть, достаточно проверять положение мыши во время отпускания кусочка паззла? Смотрим, попадают ли координаты курсора мыши внутрь фигуры или нет. Потом сверяем id'шники у фигуры плейсхолдера и у перетаскиваемой фигуры (их нужно будет раздать заранее). Если id совпадают, то значит мы опустили нужный кусок на нужное место. Как вам такой вариант?

Comments

[sindrom]

Вариант хороший. Теперь размышляю как можно автоматизировать разметку силуэта по фрагментам.

[fishbone]

Ребята, вы чего? Как раз таки, если бы вы ознакомились с подробностями технический реализации, у вас бы даже не возникло идеи проверять совпадение по площади пересечения контуров. Да и как быть со стандартными пазлами, где у всех фигур, за исключением крайних, контур одинаковый? :)
Спрайт рисуется с левого-верхнего угла, эту точку и нужно проверять на совпадение.

Answer 3

[Григорий Перетяка]

Да элементарно — посчитать площадь пересечения и если она не больше чем на «процент погрешности» меньше участка, значит — правильно.

Comments

[Григорий Перетяка]

Я правда не знаю есть ли инструменты для подсчета площади пересечения в HTML5.

[sindrom]

Дело за малым — определить площадь пересечения, при условии, что у нас есть лишь неразмеченная графика, а сами фрагменты нельзя даже представить в виде многоугольников (они слишком сложные для этого, т.к. не состоят из одних лишь прямых отрезков).

[Григорий Перетяка]

Эээ, ну в тегах было canvas, вот я погуглил, но позволяет даже кривую Безье рисовать, не говоря уже о треугольниках и окружностях:
w3pro.ru/article/html-5-canvas-dlya-nachinayushchikh

Ну а площадь пересечения можно подсчитать, я думаю, что это позволяют делать библиотеки. Можно и самому написать, но если нет готовых библиотек — проще тогда взять второй вариант.