Технологии
Реализация сборки пазла с использованием Drag'N'Drop (чистый JavaScript) - вопрос №3205055
Блок слайдера
Во всех блоках приложения пропорции изображения не должны быть изменены. Курсор в блоке сбора пазлов должен иметь вид «руки» (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, 2019 г.
-
Всего ответов: 0
Похожие вопросы
записал такой код: import requests from bs4 import BeautifulSoup Данный код я написал в программе PyCharm 2023.1 Все данные библиотеки вроде как скачал, но выдает ошибку: File
октябрь 3, 2023 г.
Как убрать подчеркивание и выделение красным и жирным? В Microsoft Word 10 надо откорректировать текст.
сентябрь 17, 2023 г.