Je ne sais pas si je suis dans la bonne rubrique du forum (HTML5 ou JS)?
Dans le doute, je poste ici.
Je place des points dynamiquement sur une map. Certains points se superposent. (cf PJ (point 5, 6, 7 ,8))
Je cherche à détecter les collisions entre ces différentes div et déplacer les div jusqu'à ce qu'il n'y ait plus de collision.
J'utilise ceci pour le moment:
[javascript]
function collision_() {
if (arguments.length > 1) {
for (var x = 0; x < arguments.length; x++) {
for (var y = 1; y < arguments.length; y++) {
if (x == y) {
continue;
}
if (collision(arguments[x], arguments[y])) {
return true;
}
}
}
return false;
}
}
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;
//console.log($div1.id + ' w1: '+w1, $div1.id +' w2: '+w2, $div2.id +' h1: '+h1, $div2.id +' h2: '+h2);
return true;
}
collision_($("#pt_TCOLYMPE2-3_1_881"),$("#pt_TCOLYMPE2-3_2_604"),$("#pt_TCSAULIRE1_3_655"),$("#pt_BICHE_4_691"),$("#pt_MARMOTTE_5_687"),$("#pt_GEAI_6_686"),$("#pt_GEAI_7_2365"),$("#pt_BELETTE_8_677"),$("#pt_BLANCHOT__9_678"),$("#pt_BLANCHOT__10_2348"),$("#pt_BLANCHOT__11_2286"),$("#pt_LAPIN_12_672"),$("#pt_LAPIN_13_671"));
[/javascript]
Les collisions semblent parfaitement détecter mais je ne sais pas comment procéder pour les déplacer jusqu'à ce qu'il n'y ait plus de collision.
Si quelqu'un peut m'éclairer, je suis preneur
