Partage
  • Partager sur Facebook
  • Partager sur Twitter

Centrer une image d'un tableau focus?

Sujet résolu
    2 octobre 2019 à 9:58:30

    Bonsoir à tous,
    Je sollicite votre aide pour un petit soucis de programmation que j'ai :
    J'ai construis un jeu avec du html et du php essentiellement, et sur ce jeu il y a une carte construite avec une balise <table> et une taille fixe sur la page internet, mais plus une competence vision est élevé et plus on peut voir de cases, ce qui fait que cette carte fini par avoir des barres de scroll.
    Sans barre de scroll, mon perso est bien au milieu de l'affichage de la carte, mais une fois qu'il y a des barres de scroll, l'image par défaut de l'affichage de la carte se fait en haut à gauche et mon perso n'est plus centré.
    Je voulais savoir si vous pouviez m'aider à centrer la carte une fois que ces barres de scroll existe?

    Je vous montre des images pour que vous vous fassiez une idée de ce que je vous dis/

    Carte 1 et 2 sont bien centré sur le perso.
    Carte 3 ne l'es plus mais ça passe encore.
    Carte 4 ça va plus du tout.

    Je précise que le fond de la carte est une image background d'une cellule de table et que le perso est une balise <img> dans une cellule <td>

    Merci beaucoup pour votre aide...

    http://www.noelshack.com/2019-39-4-1569531918-carte1.png

    http://www.noelshack.com/2019-39-4-1569532069-carte2.png

    http://www.noelshack.com/2019-39-4-1569532091-carte3.png

    http://www.noelshack.com/2019-39-4-1569532107-carte4.png

    -
    Edité par JeffreyBouaziz1 2 octobre 2019 à 9:59:59

    • Partager sur Facebook
    • Partager sur Twitter
      2 octobre 2019 à 13:06:03

      Bonjour,

      Lorsque ton tableau est créé (et pas avant), il possède une taille que tu peux récupérer via

      https://developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect

      Ensuite, tu peux utiliser la méthode

      https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll

      pour set le scroll à la moitié de sa valeur.

      • Partager sur Facebook
      • Partager sur Twitter
        2 octobre 2019 à 16:22:34

        Merci pour ta réponse.

        Du coup ça ressemblerait à ça?

        <script type="text/javascript">

        var rect = obj.getBoundingClientRect();

        element.scroll ( rec(x-Coord , y-Coord) )

        element.scroll ( set (x-Coord/2), (y-Coord/2))

        </script>

        juste en dessous mon tableau?

        Je suis désolé je suis vraiment nul en javascript (il est tout à fait possible que j'ai écris n'importe quoi...)

        Merci beaucoup pour votre aide...

        -
        Edité par JeffreyBouaziz1 2 octobre 2019 à 16:24:36

        • Partager sur Facebook
        • Partager sur Twitter
          2 octobre 2019 à 18:04:54

          Si tu t'attends à ce que je code à ta place, tu risques d'en mourir ;)

          De manière générale, en programmation, quand tu met des (), ça veut dire que tu appelle une fonction.

          Dans le développement web, ton meilleur ami c'est l'outil de développement (f12), dans l'onglet console, tu peux voir tes erreurs.

          • Partager sur Facebook
          • Partager sur Twitter
            2 octobre 2019 à 22:50:21

            C'est gentil merci pour tes conseils, je vais y arriver!

            Parce que ça fait tellement de temps que je cherchais la solution du côté HTML et que j'avais finalement compris qu'il fallait chercher du côté  javascript...

            • Partager sur Facebook
            • Partager sur Twitter
              6 octobre 2019 à 16:51:28

              Bonjour à tous,

              Je reviens demander de l'aide parce que je n'y arrive vraiment pas.

              Centrer une image d'un tableau avec des barres de scroll, je suis vraiment un novice en javascript, je comprends pas comment marche les fonctions.

              Je suis mauvais en javascript c'est pour cela que je viens demander de l'aide (je ne suis pas informaticien de base mais médecin, je n'ai jamais eu de formation en javascript).

              var rect = obj.getBoundingClientRect(); et

              element.scroll ();

              Mille mercis d'avance, c'est pour un jeu en ligne gratuit, vous en ferez bénéficier avant tout aux joueurs...

              -
              Edité par JeffreyBouaziz1 6 octobre 2019 à 17:00:58

              • Partager sur Facebook
              • Partager sur Twitter
                8 octobre 2019 à 12:25:06

                Et quand tu vas vouloir faire bouger ton personnage, tu vas aussi demander à quelqu'un de le faire ? Parce que dans ce cas on peut se demander si c'est toi qui a développé le jeu. Le mieux c'est quand même d'aller apprendre les bases du js. Au passage, il y a un bouton code (</>) pour poster du code.

                https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript

                https://jsfiddle.net/7w4gurkm/

                • Partager sur Facebook
                • Partager sur Twitter
                  8 octobre 2019 à 15:19:12

                  Non tout le reste est parfaitement fonctionnel, il y a que ceci que je n'ai jamais réussi à faire... (il y a très peu de javascript sinon).

                  Merci quand même pour ton aide...

                  PS : Si tu veux venir voir à quoi ça ressemble, n'hésites vraiment pas ...

                  http://www.dbadventure.fr/

                  -
                  Edité par JeffreyBouaziz1 8 octobre 2019 à 15:30:28

                  • Partager sur Facebook
                  • Partager sur Twitter
                    8 octobre 2019 à 16:31:44

                    Houlà, c'est un bond de 20 ans en arrière, et ça ne marche pas très bien tout ça. Pas d'https ?
                    • Partager sur Facebook
                    • Partager sur Twitter
                      8 octobre 2019 à 17:16:01

                      Non..

                      C'est assez rudimentaire je le sais, c'est basé sur des connaissances que j'ai acquerri il y a 13 ans .. -_-'

                      Le monde de l'informatique a beaucoup évolué je sais... (et pas moi.. encore une fois je ne suis pas informaticien...).

                      Mais on s'amuse vraiment beaucoup sur ce jeu, a en juger ses belles années il y a 7-8 ans...

                      Là je l'ai déterrer avec les moyens du bord...

                      • Partager sur Facebook
                      • Partager sur Twitter
                        8 octobre 2019 à 17:31:35

                        quelques petits conseils : si un lien n'est pas dispo, ne l'affiche pas, evite d'ouvrir un nouvel onglet (c'est casse pieds si tu as plein d'onglets a fermer) et annonce une version 0.xxx (au delas de 1 on s'attends a ce que tout marche)

                        quelques bugs : on peut aller sur une map qui n'existe pas (ca affiche undefined), pas de perte d' energie lors du deplacement (c'est un bug que j'apprecie ceci dit) et on ne peut pas ramasser les zenos par terre T_T

                        au niveau des ameliorations possible, je pense surtout a une direction au clavier. 

                        gg et bon courage ! 

                        • Partager sur Facebook
                        • Partager sur Twitter
                          9 octobre 2019 à 21:30:42

                          Ok merci pour les conseils!

                          Le pas de perte d'energie (PM) en cas de deplacement est volontaire pour la phase de test ^^

                          EDIT :

                          J'ai fini par réussir à centrer la map sur mon perso...

                          Merci encore pour ton aide (j'ai relu des tuto de javascript et tout..).

                          -
                          Edité par JeffreyBouaziz1 10 octobre 2019 à 18:51:30

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Centrer une image d'un tableau focus?

                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                          • Editeur
                          • Markdown