Как узнать, находится ли элемент1 в области элемента2?

Question

[Илларион]

Здравствуйте, я новичок в JavaScript и столкнулся с данной проблемой. В результате анимации два элемента могут пересечься, и мне нужно зафиксировать этот момент. Я пробовал вот так:

var timer3 = setInterval(function(){elem()}, 50);
function elem(){
x=$('#create').offset();
y=$('#fly').offset();
if (x.left == y.left && x.top == y.top) {
var foo = jQuery(img);
foo.detach();
return;
}

Но не работает. Элемент1 я создаю с помощью скрипта:

var pay = document.createElement('img');
pay.src='trap.jpg'
pay.id='create'
document.documentElement.appendChild(pay);

Многое перепробовал уже, но не получается. Надеюсь разъяснил свою проблему понятно. Подскажите, пожалуйста, в чем проблема и как ее решить.

Answer 1

[barkalov]

Способ адски неправильный, но по идее работать должен (разве что проверять стоит не x.left == y.left, а Math.abs(x.left - y.left) < delta). Если не работает, смотрите в дебагер, что там у вас в оффсетах?

Правильный способ: делать проверку на пересечение в том-же "потоке", что и анимация. Если анимируете с jquery - используйте коллбэк step. И кешируйте координаты в переменных (когда анимируете), не надо каждый раз вызывать .offset.

Comments

[Илларион]

А что у вас подразумевается под 'delta'?

[barkalov]

@Jovli delta подбирается по обстоятельствам. Это минимум 1, чтобы исключить проблемы с нецелыми координатами в процессе анимации. Так же, delta может быть равна средней от размеров проверяемых объектов - тогда коллизия будет считаться не только при пересечении центров объектов, но и при их частичном пересечении.
Кроме того, delta должна быть увеличена на шаг анимации. Если анимация быстрая, то, скажем, в предыдущем кадре первый объект имел х=100, а в текущем уже х=200. Второй объект наоборот был x=200, стал x=100. По логике должна была бы произойти коллизия. Но из-за грубого шага анимации они "пролетели" сквозь друг-друга. Чтобы такого не происходило, нужно поднимать значение delta до 100. Но важно не переборщить. Это стандартная борьба бобра с ослом: точность в пространстве vs скорость движения.

[Илларион]

@barkalov не могли бы вы подсказать как с помощью step сделать нужное? Я никак не могу понять как он устроен. Примеров мало и все не понятно. Честно, не могу, у меня на ум приходит сделать это точно так же, как и в обычной функции, то есть условием, тем способом, что вы предложили в начале. Кстати и он не работает, после нескольких срабатываний мне пишет, что переменная не работает. Эх, ну ничего у меня не работает. Подскажите, если не сложно, пожалуйста=)

[barkalov]

@Jovli Опишите подробно, что именно должно происходить. Что за движение у обоих элементов, кто им управляет? Для чего вы отлавливаете пересечение?

[Илларион]

Элемент1 с id='fly' при клике по экрану браузера движется только по оси 'y', координаты которому задаются при клике. Вот кусок кода для этого элемента:
$(document).on('click', function (evt){
var pos2=(evt.clientY-document.getElementById('fly').offsetTop)
var durat=pos2*5

if ( durat < 0) {
durat=durat*-1;
}

$('#fly').stop();
$('#fly').animate({ top: evt.clientY },{ queue:false, duration:durat, easing:"linear"});
Элемент2 с id='create' каждые 5 секунд с начала загрузки страницы создается с случайной позицией по оси 'y', и с заранее заданной позицией по оси 'x' в правой части экрана (x=1200) и движется влево. Вот кусок кода:
var timer2 = setInterval(function(){create()}, 5000);
function create() {
for (i = 0;i<=0;i++) {
var pay = document.createElement('img');
pay.src='paytina.jpg'
pay.id='create'
document.documentElement.appendChild(pay);
top2=Math.floor(Math.random()*(500-1+1));
$(pay).offset({top:top2, left:1200});
$(pay).animate({ left:0 }, { duration: 5000, queue: false, easing:"linear" }

При их пересечении должно выводиться сообщение.

[barkalov]

@Jovli Вот кодепен, смотрите, спрашивайте чего непонятно: codepen.io/barkalov/pen/rfyeE

Вообще, если вы делаете игру, jQuery анимации - плохой выбор. Пилите свой цикл с помощью requestAnimationFrame(), пересчитывайте и меняйте все координаты всех объектов в нем. У вас будет полный контроль. jQuery хорош для "офисных" анимаций типа "запустил и забыл".

[Илларион]

Спасибо, сейчас буду разбираться в вашем коде. А так я просто сейчас учусь писать на JavaScript и где-то прочитал, что лучший способ его изучить-это сделать свою мини-игру, по типу змейки или тетриса. Вот и перешел к практике.

[Илларион]

@barkalov Спасибо большое, заработало! Только я не очень понял что делает эта строка:
webCoordsCache.x = now; А именно что делает это 'now'.

[barkalov]

@Jovli now - аргумент callback-функции step. Функция step срабатывает на каждом шаге анимации (каждого свойства). Так как вы анимируете css-свойство left, то step будет каждый раз выстреливать с параметром now, равным свежему значению left. И мы это значение кладем (кешируем) в переменную webCoordsCache.x, чтобы при проверки коллизии брать его оттуда, а не вызывать "дорогой" .offset(), чтобы узнать текущее значение left.

[barkalov]

$('#some').animate({ left: 100 }, { duration: 1000, /* other options here */ step: runMeEachStep });
function runMeEachStep(now) {
    console.log(now);
    // 0
    // 0.4346184465247094
    // 0.7717832735398056
    // 1.2041619030626283
    // ...
    // 100
    // by step
}

Ок? ;)

Вообще, в том кодепене важно не упустить одно: все *fly* -объекты созданы в одном экземпляре, а *web* -объекты (и переменные, и даже функции) создаются для каждого срабатывания webCreate() (или, иначе, для каждого запущенного в полет div.web) свои собственные, отдельные. Именно по этому их может быть много на экране.

То есть, одновременно может работать несколько независимых webStep()'ов.

В этом одно из коренных неудобств jQuery-анимаций для игр и всего такого.

Правильный путь - ручная анимация (и физика, и рождение объектов, и whaterer) в одном глобальном игровом цикле. requestAnimationFrame().

Или, если хотите поизучать jQuery-анимации, лучше выберите другой "плацдарм". ;)

[Илларион]

@barkalov Спасибо за все ваши советы еще раз, очень помогло=)

Answer 2

[sasha]

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

Comments

[Илларион]

У меня почему-то не реагирует на простое сравнение координат элементов. Даже банально: if( x.left == 10). Может это просто я как-то не так разобрался?

Answer 3

[Юрий Лобанов]

Если элемент движется только по оси Y, то Вы можете для начала проверять координату по X, и если они не совпадают — проверять координату по Y уже не надо.
А так, Вам хороший совет дал @barkalov. Вы относитесь к анимации так, как будто не Вы задаете ей такое поведение.

Comments

[barkalov]

@iiil Кстати, проверять вторые координаты (если первые не совпадают) не нужно в случае любого движения, не только строго вертикального. ;) Но оно так и работает по идее - ленивый && в условии не будет проверять второй операнд, если первый false.

[Юрий Лобанов]

@barkalov ага, это я затупил ) А что касается "не будет проверять" — мне надо было написать — не надо получать вторые координаты. Я правда не знаю, что тут будет лучше:
Вот мы берем x1=$('#create').offset().left; и x2=$('#fly').offset().left; , сравниваем, если совпадаем — только в этом случае получаем то же самое, но уже top. Так будет быстрее, или все равно мы получаем offset() и наоборот теряем время, потому что не заносим его в переменную?

[barkalov]

@iiil .offset() за раз получает из DOM значения top и left и пишет их в объект типа {top: 12, left: 34}. Потом обращаться к свойствам этого объекта дешево.

[Юрий Лобанов]

@barkalov ну то есть я ошибся, спасибо.