Страницы

Поиск по вопросам

суббота, 6 июля 2019 г.

Анимация маленьких блоков


Имеется вот такой вот блок, задача состоит в том чтобы бирюзовые блоки перемещались на пустое место(пустое голубое пространство). Посоветуйте пожалуйста какой-нибудь плагин или же можете подкинуть идейку.


Ответ

Поделим наше поле на квадраты и представим все это дело в виде матрицы (двумерного массива). 0 и 1 обозначают свободен или занят квадрат соответственно. По циклу проходим по массиву квадратов - содержит положение квадрата в матрице. Квадрат может двигаться в 4 направлениях. Генерируем рандомное число от 1 до 4. Запускаем js скрипт анимации квадрата (можно использовать jq animate и динамически менять свойства left и top), в матрице освобождаем занятую ранее клетку и занимаем новую. Картинка оживает.

Комментариев нет:

Отправить комментарий