Comment lier plusieurs documents html 5 ?

non.. pas sans un langage de programmation

Ok,
ça n'est donc pas 100 images à charger sur une page...
L'ensemble de ce que j'ai dit reste vrai et applicable à votre projet.
J'ai oublié - le message était déjà long - de parler des possibilités de préchargement mais aussi parce que dans le cas de 100 images aucune solution n'est adapté: il ne faut simplement pas charger 100 images.

Quand à faire un jeu(ou un site) il faut faire plus que souhaiter mais travailler/apprendre à le faire.
Ce que vous voulez faire est relativement simple( je suppose que CANVAS c'est pour rajouter de l'animation et des effets? parce que pour afficher des images il y a la balise IMG qui suffit largmement) et si vous voulez le faire de la mauvaise façon vous n'avez pas besoin de programmation mais bien de savoir comment fonctionne un LIEN vers une autre page.

<img src="imagedebut.jpg" alt="début du jeu" />
<p>Voulez vous commencer?</p>
<a href="pagedebutdujeu.html">oui</a>
<a href="autres.html">non</a>

Bien sûr avec la programmation on peut faire mieux et par exemple modifier texte et images ainsi que gérer l'interaction(programmation événementielle),
ceci change un texte quand non clique:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp

Comme JavaScript peut manipuler HTML et CSS il peut donc manipuler quel fichier est chargé par une image(balise img en HTML) de la même manière ainsi que n'importe quel élément d'une page.

Je vous suggère donc d'apprendre(travailler quoi ;) ) et de voir déjà ce qu'en quelques mois de cours vous arrivez à faire. Ca vous évitera de vous poser des questions qui n'ont pas lieu d'être.

C'est très basique ce que vous voulez donc facilement abordable(voir mon exemple en pur HTML). Vous avez aussi des outils dédiés à la création de jeu qui ont une autre approche(exemple: unity3D).


C'est bien souhaiter mais sans travail vous n'aurez rien. Vous devriez commencer par là histoire de vous confronter à la réalité plutôt que d'imaginer des choses qui n'ont pas lieu d'être et comme ça vous parlerez (ou aurez des questions) sur des sujets réels.

Si on change l'adresse d'une image avec JavaScript une seule image est chargée à la fois que vous le fassiez 100 fois ou mille. Si c'est lors d'un événement(en programmation) comme un clic sur un bouton(de là au choix interactif il n'y a qu'un pas) qui déclenche une fonction du programme qui va modifier l'image affichée l'image n'est téléchargée(download) que au moment du clic donc il n'y a pas à charger 100 images simultanément.
Après bien sûr il existe des techniques nettement plus avancées et des possibilités très large pour améliorer aussi bien ce qui est offert à l'utilisateur du programme que pour faciliter le développement et améliorer la qualité de celui ci; comme le préchargement d'image.
Mais bon avant d'aller vers des techniques plus avancées il faut passer par les trucs de bases, que vous n'avez pas.

document.write est ABSOLUMENT à ÉVITER pour des raisons bien connues.

https://developer.mozilla.org/en-US/docs/Web/API/Document/write

Il faut bien sûr utiliser la création d'éléments avec la méthode createElement et inclure les éléments avec appendChild sinon ça va foirer le DOM (effacer tout le contenu de la page avant d'écrire le nouveau) ou éventuellement innerHTML ou innerText selon que l'on doit ajouter/modifier un élément de la page ou du texte de la page.

Vous n'avez toujours pas compris que pour s'afficher une page HTML doit être lue par un navigateur...donc les pages HTML sont indépendante (2 pages affichée = 2 onglets du navigateur = 2 pages différentes).