Позиционный z-индекс для спрайтов

Question

У меня есть абсолютно позиционированные объекты / спрайты, которые перемещаются в области 1000px x 1000px. Я хочу, чтобы у этих спрайтов были z-индексы относительно их положения: - чем дальше влево, тем выше z-индекс. - чем дальше вниз, тем выше z-индекс (включая высоту объекта). Таким образом, объекты в нижнем левом углу области будут иметь гораздо более высокий z-индекс, чем объекты в верхнем правом углу, что должно создавать прохладную иллюзию, когда объекты проходят близко друг к другу.

Я пробовал это, но не получилось:

object.style.zIndex = ( 1000 - parseInt(object.style.left) ) + 
                      parseInt(object.style.top) + object.clientHeight

Answer 1

Это довольно легко сделать, используя математику

Делайте это, когда движется спрайт, поэтому добавьте его в метод или функцию, которые их перемещают

spritePos = {
             'x':1000 - parseInt(object.style.top.replace("px")),
             'y':parseInt(object.style.left.replace("px")) - 1000 
}; 

zIndex = spritePos.x + spritePos.y;
object.style.zIndex = zIndex;

Answer 2

алгоритмическом:

1. Чтение всех спрайтов внутри массива;
2. Перебирать все объекты массива, читать левый атрибут позиции каждого из них, сохранять в одном массиве;
3. Сортировать массив численно по значению (то есть атрибуту левой позиции);
4. Перебирать все массивные объекты, устанавливать z-index по индексу элементов массива.

Использование jQuery сделает этот код короче. Если вы дадите нам пример кода ваших спрайтов и этой области, мы можем попробовать eaven создать некоторый JS-код, который «выполняет свою работу» ...