В этой статье поговорим о теории перемещения объекта в JS. Статья будет полезна скажем тем, кто пытается сделать небольшие интерактивные программы... Например в техникуме или колледже вам задали задачу сделать небольшую игру, так вот эту статью как раз можно использовать как заготовку кода для этой игры.
Итак, вначале давайте определимся с определение объекта. В целом это может быть какой-либо тег (элемент HTML), которому присвоен определенный класс или id, то есть тот объект, к которому реально обращаться и понимать, где он находится сейчас, и соответственно возвращать ему значения, чтобы позиционировать его в нужное нам время в нужном месте!
На самом деле к перемещению объекта можно подойти двумя способами. Первый, когда бы берем и перемещаем один имеющийся объект с помощью стилей, двигаем его в нужном нам поле, меняя каждый раз стиль, то есть координаты объекта и тем самым двигаем объект.
Этот вариант имеет плюс в том, что объект один, перемещение его будет плавным, но есть и свои минусы. Весьма сложно будет прописывать интерактивные изменения в той или иной точке универсально, относительно окружающих элементов. Второй вариант такой, взять и разбить все наше поле на клетки, если хотите таким образом создать своеобразную сеть из аналогичных элементов. Поле - сеть будет иметь какое-то количество элементов по горизонтали и какое-то количество по вертикали. А вот далее просто исходя из иерархии столбиков и строк в столбике, определять класс отображения или отключать его.
В итоге, будет создаваться иллюзия того, что один из соседних элементов изменит стиль на исходный, а соседний станет отображать стиль объекта, нам покажется, что объект переместился. Это похоже на то, что происходит с "бегущими огнями" на гирлянде, когда лампа не меняет своего положения, а свет излучаемый ими, нам кажется что движется.
Я буду рассматривать второй вариант, так как с первым вариантом считаю все более менее понятно, можно сказать он рассмотрен в статье "Меняем стили с помощью JS (style)".
Перемещение объекта кнопками - курсорами на JavaScript
Наш же вариант уже описан выше. Осталось его реализовать. Сразу приведу пример, потом немного опишу как он работает.
Смотреть код
Можете поиграться с кнопками - стрелками. Как видите, наш фон (стиль) меняет положение в схожих элементах таблицы, что и создает эффект перемещения. В моем случае таблицу элементов я просто взял и сгенерировал в онлайн НТML редакторе. Далее прописал иерархическую зависимость для каждого столбца и строки, входящей в столбец. После к каждой кнопке привязал функция, которая как раз меняет положения для стиля в зависимости от столбика или строки, вот и все.
Ах, да, для того чтобы не "заливать фон", а именно перемещать его, каждый раз перед выполнением перемещения запускам функцию очистки всего поля от стилей, - функция cl. В итоге, поле вначале очищается, потом заполняется заново стилем в нужном элементе. В принципе функция cl тоже весьма показательна. Она учит нас работать с массивами по двум параметрам, перебирая весь массив. Переходя от столбика к столбику и в каждом столбике само собой меняет стиль для каждой строки. Используется оператор for () {}.