IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Détecter collision div et les déplacer


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 82
    Par défaut Détecter collision div et les déplacer
    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

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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 ?

  3. #3
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    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
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 82
    Par défaut
    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é ;-)

  5. #5
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    Alors, tu as trouvé quelque chose ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 82
    Par défaut
    Non, j'ai essayé un bon paquet de lignes de code sans arriver au résultat souhaité. Je désespère

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 82
    Par défaut
    Et toi?

Discussions similaires

  1. [VB.NET] [newbie] Charger plusieurs .X et les déplacer
    Par tamagotchi dans le forum DirectX
    Réponses: 12
    Dernier message: 12/04/2006, 11h45
  2. [Javascript] Détecter collision de deux objets <img>
    Par Invité4 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 04/04/2006, 08h54
  3. [CSV] Détecter le séparateur pour les fichiers CSV
    Par JavaEli dans le forum Langage
    Réponses: 1
    Dernier message: 30/11/2005, 23h42
  4. bouger une div selon les coordonnées de la souris
    Par 10-nice dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 21/09/2005, 15h31
  5. [DIV] contenir les elements dans la balise div
    Par kemodo dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 11/10/2004, 20h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo