JavaScript:Запустить функцию, когда два элемента div соприкасаются/перекрываются

Question

Название действительно это объясняет.Как это сделать?Оба div имеют разный размер.Оба элемента div движутся (я делаю небольшую игру на JQuery).Если одно столкнется с другим, я хочу, чтобы что-то произошло.

Спасибо

Answer 1

Для onOverlap нет события JavaScript, вам нужно самостоятельно выполнить расчет, перекрываются ли элементы div:

var valueInRange = function(value,min, max) { 
   return (value >= min) && (value <= max);
}

var overlap = function(x1,y1,w1,h1,x2,y2,w2,h2) {
   xOverlap = valueInRange(x1, x2, x2 + w2) || valueInRange(x2, x1, x1 + w1);
   yOverlap = valueInRange(y1, y2, y2 + h2) || valueInRange(y2, y1, y1 + h1);
   return xOverlap && yOverlap;
}

Answer 2

Как вы заставляете элементы двигаться?Одним из способов сделать это, конечно же, было бы написать простую логическую функцию, возвращающую значение, которая по двум элементам div определяет, перекрываются ли они (получите координаты углов и просто сравните их на пересечение).Затем в конце функции, которая заставляет элементы div перемещаться, вызовите эту функцию и, если это так, предпримите соответствующие действия.

Фактически, в зависимости от того, как вы перемещаетесь, у вас могут даже быть доступны координаты обоих элементов div, что делает это очень эффективным.

Помимо этого, мне не известно ни о каком событии «перекрытия» или подобном, поэтому периодическая проверка — единственный общеприменимый способ, который я могу придумать.В зависимости от структуры вашего кода может быть доступен более быстрый метод.