Я просто разрабатываю простую игру с двумя шайбами. Проблема в том, что я не могу вызвать функцию, когда два divs касаются друг друга.
Как определить, связаны ли два div с jquery?
Ответ 1
Вы ищете обнаружение столкновений с ограничивающей коробкой. Если вы хотите поднять событие, вам нужно многократно тестировать, но было бы лучше просто запустить функцию над всеми игровыми объектами из игрового цикла. Песочница находится в http://jsfiddle.net/nGRwt/7/
function collision($div1, $div2) {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
var h2 = $div2.outerHeight(true);
var w2 = $div2.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
Ответ 2
Вы можете попробовать jquery-collision плюс jquery-ui-draggable- столкновение. Полное раскрытие: я только что написал и выпустил их на sourceforge.
Первое позволяет это:
var hit_list = $("#collider").collision(".obstacle");
который является списком всех ".obstacle", которые перекрывают "#collider".
Вторая позволяет:
$("#collider").draggable( { obstacle: ".obstacle" } );
Что дает вам (между прочим) событие "столкновения" для привязки к:
$("#collider").bind( "collision", function(event,ui){...} );
И вы даже можете установить:
$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );
чтобы предотвратить "#collider" от когда-либо перекрывающегося ".obstacle" при перетаскивании.
Ответ 3
в родном Javascript
var is_colliding = function(div1, div2) {
var d1_height = div1.offsetHeight;
var d1_width = div1.offsetWidth;
var d1_distance_from_top = div1.offsetTop + d1_height;
var d1_distance_from_left = div1.offsetLeft + d1_width;
var d2_height = div2.offsetHeight;
var d2_width = div2.offsetWidth;
var d2_distance_from_top = div2.offsetTop + d2_height;
var d2_distance_from_left = div2.offsetLeft + d2_width;
var not_colliding =
d1_distance_from_top < div2.offsetTop ||
div1.offsetTop > d2_distance_from_top ||
d1_distance_from_left < div2.offsetTop ||
div1.offsetLeft > d2_distance_from_left;
return !not_colliding;
};