Détecter collision div et les déplacer

**flo73** · 04/10/2013, 07h53

Bonjour,

Je rencontre une impasse. J'espère que quelqu'un saura me donner un coup de pouce.

Je place des points dynamiquement sur une map. Certains points se superposent. (cf PJ (points 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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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"));

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

Merci par avance

**SylvainPV** · 04/10/2013, 14h52

Et comment veux-tu les déplacer exactement ? Je veux dire, ce sont des coordonnées d'une carte, si on les bouge ça perd un peu de son sens non ?

**Watilin** · 04/10/2013, 14h59

Salut,

je pense à un système de répulsion comme sur Music Map

C'est une sorte de simulation physique. Je pense qu'on peut faire ça simplement avec une fonction récursive qui calcule des « forces » sur chaque div. À chaque étape, on traite chaque div et on regarde avec combien d'autres divs elle est en collision. On lui assigne une force dans la direction qui va bien (on fait la somme des directions vers les autres divs et on inverse). À l'étape suivante, on commence par appliquer les forces en déplaçant légèrement les divs. Et on regarde s'il y a encore des collisions, et on recommence tant que c'est nécessaire.

Ça a l'air compliqué comme ça mais en fait il n'y a rien de plus méchant que des calculs de distance (théorème de Pythagore).

Je vais prendre quelques moments pour écrire un code qui marche à peu près. Je te laisse chercher en même temps

**flo73** · 04/10/2013, 16h19

Yes merci, c'est exactement cela.
J'avais déjà codé ça en AS3 il y a 2 ou 3ans et je dois maintenant faire l'évolution en HTML5 mais je suis beaucoup moins à l'aise.

C'est plus où moins ce que je faisais en AS3 en ajoutant un trait de liaison (shape, moveto lineto) entre le point déplacé et le point d'origine pour conserver une cohérence de lecture.

Merci encore, je cherche aussi de mon côté ;-)