Partage
  • Partager sur Facebook
  • Partager sur Twitter

deplacer une image sur une autre

    9 décembre 2024 à 18:06:06

    Bonjour , j'ai une image que je voudrais deplacer dans le dom sur un element identifié , mais je souhaiterais que cette image se superpose à celle dans l'élément . (et pas à coté ou en dessous )

    je vous ai fais un jsfiddle

    https://jsfiddle.net/zjq381b4/ il faudrait que l'os se superpose au chien , éventuellement avec un déplacement lent genre animate ....

    Mes recherches avec animate ne me donnent que des déplacement en pixels mais je ne sais pas où est l'id n°5 où je dois envoyer l'os

    Merci par avance

    • Partager sur Facebook
    • Partager sur Twitter
      9 décembre 2024 à 19:58:45

      Bonjour, pour quelles raisons l'usage de jQuery ici?? Cela n'est pas nécessaire!!!

      >> je voudrais deplacer dans le dom sur un element identifié

      il y a une incohérence la. Si tu déplace l'élément dans le dom, il n'est plus au même endroit dans le dom mais peut toujours être visuellement au même endroit sur la page. 

      >> je souhaiterais que cette image se superpose

      Ce n'est pas le rôle du JS mais celui du CSS.

      >> avec un déplacement lent genre animate

      je te laisse regarder du coté des animations CSS pour ce faire.

      Je te propose ceci => https://jsfiddle.net/wrc412tz/1/

      Pour faire varier la position, c'est les class CSS de .pos1 à .pos6 qui s'en charge.

      -
      Edité par AbcAbc6 9 décembre 2024 à 19:59:48

      • Partager sur Facebook
      • Partager sur Twitter
        10 décembre 2024 à 11:58:01

        merci  pour ta réponse ,  l'idée c'est de déplacer un pion sur un plateau (l'os étant le pion , les chiens les cases du plateau) aprés un tirage de dé (que je n'ai pas mis là) que je récupère en js

        Donc j'ai du mal à voir comment faire interagir mon tirage de dé (c'est le 5 dans mon jsfiddle)  et le css

        • Partager sur Facebook
        • Partager sur Twitter
          10 décembre 2024 à 13:14:55

          ciocciu a écrit:

          Donc j'ai du mal à voir comment faire interagir mon tirage de dé (c'est le 5 dans mon jsfiddle)  et le css

          Bonjour, si tu déplaces l'os de 5 tu y ajoutes la class .pos5, si tu déplaces l'os de 3 tu ajoutes la class .pos3 etc...

          >> l'idée c'est de déplacer un pion sur un plateau

          Ce n'est pas du tout la même chose. Sur ton plateau il y a des cases. Le pion ce trouve dans une case ou ne s'y trouve pas. Pour le déplacement réalise des fonctions tu y gagnera en lisibilité de code, en découpage du programme et tu évitera de te répéter.

          Plusieurs solutions d'implémentation existes. Je ferais quelque chose comme :

          • Détecter le clique sur une case du plateau et récupérer cette case
          • Boucler sur toutes les cases du plateau pour supprimer le pion si il y est.
          • Placer le pion sur la case ou le clique à été détecté.

          C'est une implémentation, il en existe d'autre selon les règles de déplacement du pion sur le plateau de jeu.

          -
          Edité par AbcAbc6 10 décembre 2024 à 13:16:42

          • Partager sur Facebook
          • Partager sur Twitter
            10 décembre 2024 à 15:27:49

            ok merci

            en fait là en te relisant je suis parti sur l'idée de mettre le pion sur toutes les cases avec une classe boostrap d-none pour le rendre invisible

            ensuite en javascript je récupère le dé , et je  supprime la class d-none là où le pion tombe avec le dé  pour le faire apparaitre ... maintenant va falloir qd même que je fasse une animation pour qu'il se déplace un peu tout seul , que ce soit plus joli que simplement disparaitre d'une case  et apparaitre ailleurs

            Je creuse .....je creuse

            merci pour ton aide

            • Partager sur Facebook
            • Partager sur Twitter
              10 décembre 2024 à 18:07:26

              Bonjour,

              Je ne connais pas tes contraintes du plateau de jeu, ni des conditions dans lesquelles le jeu doit se dérouler.

              Je te propose ceci => https://jsfiddle.net/2a93x8z0/

              • Partager sur Facebook
              • Partager sur Twitter
                10 décembre 2024 à 18:50:51

                oula oui ça me parait super à vue de nez

                j'étudie ton code de près dès que j'ai le temps pour voir si j'arrive à l'adapter

                merci ... je reviendrai donner des news

                EDIT: alors je vois un premier problème c'est que mon plateau est responsive donc les cases ne font pas forcement toujours la même largeur en px...par contre les cases ont un id

                du coup je suis un peu coincé

                je te refais un fiddle plus précis...que voici

                https://jsfiddle.net/u8296haw/

                ça s'apparente plus à un jeu de l'oie mais comme il est responsive c'est pas tout le temps la même largeur de case donc je sais pas si utiliser les pixels pour l'animation est approprié. Ce serait pas possible d'animer d'un id à un autre ?

                -
                Edité par ciocciu 10 décembre 2024 à 19:31:08

                • Partager sur Facebook
                • Partager sur Twitter
                  10 décembre 2024 à 23:47:59

                  re, intéressant comme chalenge. :)

                  >> Ce serait pas possible d'animer d'un id à un autre ?

                  Oui, pour ce faire je récupère la position dans le document de l’élément de destination selon l'id. Ensuite je fais varier la position du pion. 

                  Je te propose => https://jsfiddle.net/osvg6n5u/

                  Pour l'animation même technique que précédemment, une transition CSS.  Pour l'animation en diagonale, dans certain cas, si cela ne te convient pas je te laisse modifier cela en priorisant les déplacements horizontal/vertical selon le cas.

                    Bonne continuation pour ce jeu.

                  • Partager sur Facebook
                  • Partager sur Twitter
                    11 décembre 2024 à 13:00:57

                    Wahou , ça semble génial

                    je regarde ça pour adapter

                    Merci bcp

                    • Partager sur Facebook
                    • Partager sur Twitter

                    deplacer une image sur une autre

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown