Главная arrow icon Вопросы arrow icon Технологии arrow icon JavaScript,Ajax,HTML arrow icon Реализация сборки пазла с использованием Drag'N'Drop…

Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript) - вопрос №3205055

Блок слайдерапредназначен для выбора случайного изображения. Для получения другого изображения необходима кнопка «>» («Next»). Кнопка «Puzzlify», находящаяся под изображением, подтверждает выбор пользователем. В двух блоках сбора пазлов ниже отображается выбранное изображение. Правый блок представляет из себя подложку для сборки паззла –контейнер с «разрезанными», но не «перемешанными» частями выбранного изображения, прозрачность 50%. Левый блок представляет из себя контейнер с «разрезанными» и «перемешанными» частями выбранного изображения. Бэкграунд веб-приложения должен иметь линейный градиент.
Во всех блоках приложения пропорции изображения не должны быть изменены. Курсор в блоке сбора пазлов должен иметь вид «руки» (grab,grabbing). Изображение в блоке сборки пазла должно «разрезаться» на 25 частей (5 отрезков по вертикали и 5 –по горизонтали). Предусмотреть анимацию элементов управления.
Реализовать надо логику блока слайдера, воспользовавшись API сервера unsplash.com (https://unsplash.it/600/600/?random) для получения случайных изображений. При открытии в блоке слайдера отображается первое рандомное изображение, последующие генерации при нажатии кнопки «>» («Next»). При длительной загрузке вместо изображения должен отображаться лоадер (https://www.artmajeur.com/img/ajax-loader.gif). После успешной загрузки изображения должна стать активной кнопка «Puzzlify».
Надо реализовать функции «разрезания» на части изображения и «перемешивания» их для блока сбора пазлов. Создать обработчик кнопки «Puzzlify». По нажатию кнопки «Puzzlify» в двух блоках сбора пазлов ниже должно отображаться выбранное изображение, в правом только разрезанное, в левом –разрезанное и перемешанное.
Также необходимо реализовать функцию сборки пазла, включающую в себя:
− перетаскивание частей изображения с левого блока в правый;
− при верной локализации перетаскиваемой части реализация запрета дальнейшего движения;
− вывод сообщения в случае окончания сборки пазлов.
В целом функциональные возможности приложения следующими должны быть:
— предоставление выбора изображения в виде слайдера
— предоставление выбора изображения указанием ссылки
— задавать количество частей разбивки изображения
— разбивание выбранного или указанного изображения на заданное количество частей и генерация пазла
— предоставление возможности пользователю собирать сгенерированный пазл
— проверка статуса компоновки пазла, в случае если пазл собран, выдавать пользователю сообщение об успехе (и затраченном времени)
— реализация в приложении счетчика для хранения и отображения количества успешных сборов пазла
Пожалуйста, помогите срочно!!!
Перемешивание пазлов сделано, но я понятия не имею как реализовать перетаскивание частей пазла на другую прозрачную часть. Помогите вас, прошу вас, мне срочно нужно сделать.
И еще у меня проблема следующего характера. Дело в том что когда я нажимаю на кнопку Next, пазл не должен разбиваться на части, а картинка пазла должна сама обновляться. Кто-нибудь, кто разбирается в Drag'N'Drop на чистом JavaScript, помогите мне!!!!!!!
Вот ссылка на пазл на JavaScript: https://codepen.io/nightofpromises/pen/ZPXVva. Помогите мне, пожалуйста.
Помогите мне разобраться, как сделать так чтобы с блока пазла который разбивается на 25 частей можно было переносить на полупрозрачный блок как делается здесь: https://codepen.io/kiyutink/pen/NNrBxy, но с использованием чистого JavaScript, а не Ajax, Jquery. Как реализовать это?!
Анна Бадина ИвановнаСеребряный
12.03.19
Технологии / JavaScript,Ajax,HTML
0 ответов
чистый javascript
canvas
drag'n'drop
пазл
программирование
срочно помогите мне пожалуйста
javascript
Ответов пока нет
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Похожие вопросы
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store
  • карты visa
  • карты master card
  • карты maestro
  • карты МИР
Мы используем файлы cookie. Пользуясь сайтом, вы принимаете условия нашего соглашения. Принять Детальнее