JS Carte de jeu - Ajouter de nouveaux objets

[Guimbot]

Bonjour à tous !

Le développement de mon jeu Jack The Runner avance bon train depuis 2 ans même si je me suis fais discret.
Il est temps pour moi de me confronter à une des partie costaude du développement : la carte.

C'est actuellement trop gros pour moi.
J'en appelle donc à votre aide, dans l'espoir que cette merveilleuse communauté accepte de me donner des conseils

Le concept: Mon joueur se déplace en ligne droite dans un labyrinthe binaire (en forme d'arbre).
De jonction en jonction il choisis d'aller à droite ou à gauche et découvre le labyrinthe en cours de route.
Un menu carte permet d'afficher le labyrinthe découvert et seulement les jonctions qui ont été visitées (et du coup les chemins qui partent vers on ne sait pas encore où).

Rien de très sophistiqué, juste des traits et des boites d'objets sur fond uni. Quelque-chose qu'on retrouve dans les logiciels de carte mentale vous voyez ?
Le labyrinthe est vraiment grand donc je souhaite que ma carte soit zoomable au "scroll", et deplacable au curseur au "drag"(une version simpliste de google map).
Le jeu est en pure Javascript / HTML / CSS (oui oui c'est old-fashioned )

Là ou j'ai besoin d'aide c'est l'ajout des objets sur cette map. Comme je peux faire pour afficher les chemins, les jonctions et les impasses au fur et à mesure que le joueur avance dans son aventure ?
Je sais que je pourrais passer par l'option: "brouillard qui découvre la carte" mais ça ne me séduit pas
Aussi, je pense que le truc sera un peu illisible si les objets sont posés sur une grille.

J'en appelle à votre expérience et infinie sagesse !
Merci d'avance

[Xenos]

Hello

Je serai tenté de me diriger vers graphviz & toute sa clique (dot, gphiz ou autre lib qu'il y aura dans ton langage/stack)
Vu le sujet, je dirai qu'une sortie en SVG de ton graph serait adaptée: tu pourras placer l'image dans la page HTML, et laisser les scrollbars gérer le reste (en revanche, ca ne se déplacera pas nativement au "drag & drop": ce n'est pas un truc natif de PC ça, c'est un rajout)
Suivant le niveau d'acceptation de "triche", tu peux alors soit donner tout le SVG au client, et masquer/afficher/modifier les couleurs via du CSS, soit n'envoyer que les branches découvertes, et pousser les nouveautés vers le client qui les ajoutera à son SVG. AU besoin, tu pourra aussi virer les scrollbar et implémenter ton mécanisme de déplacement/changement de la vue en modifiant simplement le viewBox du SVG (un peu dans cette idée là https://blog.reinom.com/demos/#zoomer-sur-un-l-ment )

A noter que si le SVG peut devenir "lourd" (ramer) si trop de noeuds sont sur le même parent (ie un <svg> contenant 10.000 <circle> a tendance à ramer). Pour éviter cela, il te faudra "juste" les regrouper dans des <g> en fonction de leur position dans la carte (ie un <svg> contenant 100 <g> formant "à peu près" un genre de grille 10x10 et contenant chacun 100 <circle> ne ramera pas). Ce comportement a peut-etre changé depuis sur Firefox/Chromium (je ne sais plus lequel ramait), donc, c'est une optimisation en fin de chaîne, uniquement si nécessaire

Ca reste une méthode artisanale, efficace pour un petit projet sans stack déjà "toute prête" (si t'es parti dans du Unity par exemple, ca serait sans doute pas adapté x) )

[Guimbot]

Merci beaucoup Xenos d'avoir pris le temps de m'aider !
Ta réponse est très complète, ça va me donner pleins de cordes à mon arc (Ou en tout cas des idées de où aller chercher des cordes)

Tu as surement raison, je vais être obligé de regrouper les nœuds dans des groupes plus petits avant de les afficher. T'as pas idée à quelle point la map est vaste en terme de quantité de nœuds.
Je l'ai jamais moi-même affichée en entier. Tout est intégralement codé en binaire (1 quand tu pars à gauche, 0 quand tu pars à droite) dans un JSON type arbre généalogique. Le seul visuel que j'ai c'est un site de mindmap ou j'ai designé la carte pour la premiere fois.

L'objectif ultime de cette map c'est de pouvoir cliquer sur les nœuds et y afficher des petits infobulles. Mais c'est déjà super si j'arrive à afficher quelque-chose au fur et à mesure de l'exploration du joueur.
Chaque chose en son temps (c'est une leçon importante que j'ai appris sur ce forum et que je continue d'appliquer religieusement).
Je vais bucher un peu le SVG, j'ai beaucoup à apprendre là dessus.

Merci Merci !