À quoi sert cette page
C'est le menu de la collection. Il ne contient aucun jeu : il ne fait que
les lancer. Chaque jeu est un fichier autonome, que l'on peut aussi ouvrir
directement, mettre en favori ou placer en raccourci sur le bureau. Chaque
jeu comporte un bouton ✕ Quitter qui ramène ici.
Lancer un jeu
- Cliquez sur une tuile, ou tapez son numéro au clavier, de
1 à 8.
- Le nom du fichier lancé est écrit sous chaque description.
La case « Ouvrir dans un nouvel onglet »
Elle ne change rien à la façon de jouer : elle décide seulement si le jeu
remplace le menu dans le même onglet, ou s'ouvre à côté. Le réglage est
retenu d'une visite à l'autre. Dans un nouvel onglet, ✕ Quitter affiche
le menu à la place du jeu : il suffit ensuite de refermer cet onglet.
Les huit jeux
| N° | Jeu | En deux mots |
|---|
| 1 | Morpion | Aligner ses symboles, en 3×3 ou 4×4, avant l'adversaire. |
| 2 | Jeu de dames | Le damier classique, prises obligatoires et promotion en dame. |
| 3 | Awalé | Semer ses graines dans le sens antihoraire et capturer celles d'en face. Premier à 25 graines. |
| 4 | Tennis | Le tennis des années 80, en temps réel. Premier à dix points, terrain orientable. |
| 5 | Carrom | Le billard indien au doigt : empocher ses neuf pions et couvrir la reine. Plateau orientable. |
| 6 | Bataille navale | Grille en trois tailles, flotte composée par les joueurs, duel ou entraînement contre la machine. |
| 7 | Jeu de l'oie | Le plateau en spirale de 63 cases : oies, pont, auberge, puits, tête de mort. Deux pions, 1 à 3 dés, rythme du robot réglable. |
| 8 | Dominos | Le double-six classique : poser, piocher, bloquer. Duel, à deux sur un écran, ou entraînement. |
Boutons présents dans tous les jeux
| Bouton | Rôle |
|---|
| 💾 Sauvegarder / 📂 Reprendre |
La partie en cours part dans un fichier .json horodaté, que vous rangez où vous
voulez ; le rouvrir remet la partie dans l'état exact où vous l'aviez laissée. Rien n'est
conservé à votre insu. Seul l'hôte reprend une partie en ligne : il la transmet ensuite à
l'invité. Tant qu'une manche est en cours, le bouton de lancement devient
▶ Nouvelle manche et demande confirmation avant de l'effacer. |
| 📜 Historique | Ouvre le relevé de la partie dans une fenêtre, avec un bouton
🖨 Imprimer. Chaque ligne porte le nom du joueur, et l'en-tête rappelle les deux
adversaires. Le même relevé est proposé dans la fenêtre de fin de manche. |
| 🔊 Son / 🔇 Muet | Coupe ou rétablit les effets sonores. Le choix est mémorisé
et s'applique aux huit jeux. |
| ⛶ Plein écran | Agrandit le jeu à tout l'écran, ce qui écarte les info-bulles de la
barre des tâches. Rien n'est modifié durablement : Échap ou le même bouton rétablissent la fenêtre. |
| ❓ Aide | Les règles du jeu et le détail de son fonctionnement en réseau. |
| ⟲ Réinitialiser | Arrête la partie en cours et vide le plateau, sans quitter la page.
En ligne, seul l'hôte peut le faire. |
| ✕ Quitter | Referme la partie et revient à ce menu. |
Jouer seul
Cinq jeux proposent un choix 1 joueur dans leur bandeau, sans adversaire ni connexion.
| Jeu | Ce que fait le mode solo |
|---|
| Tennis |
Entraînement : la raquette d'en face est tenue par la machine, qui suit la balle à vitesse
limitée et revient au centre entre deux échanges. |
| Jeu de l'oie |
Vous tenez le pion bleu, la machine tient le rouge. Son temps de réflexion entre deux
lancers se règle, de 0,25 s à 3 s. |
| Dominos |
Entraînement : la machine pose son domino le plus fort parmi ceux qui conviennent. |
| Bataille navale |
Entraînement : la machine place sa flotte au hasard et tire en cherchant autour de ses
touches, comme le ferait un joueur humain. |
| Carrom |
Entraînement : rentrer ses neuf pions blancs en un minimum de coups. Un pion noir empoché
retourne au centre, et le meilleur total est gardé sur l'appareil. |
Orienter le terrain — Tennis et Carrom
Ces deux jeux laissent choisir, dans le bandeau, où se trouve votre matériel sur
votre écran : raquette à gauche, à droite, en bas ou en haut ; ligne de base du Carrom
en bas, à gauche, en haut ou à droite. Le terrain du Tennis bascule en portrait pour les deux
positions verticales.
Ce réglage est propre à chaque écran : la partie se déroule toujours dans le même
repère, seuls l'affichage et la saisie tournent. Les deux joueurs peuvent donc voir le terrain
différemment — pratique autour d'une tablette posée à plat — sans le moindre risque de
désaccord entre les deux postes.
Jouer à deux
Dans chaque jeu, le bouton 🌐 Connexion ouvre la même fenêtre, avec
trois possibilités.
| Choix | Ce qui se passe |
|---|
| Créer une partie |
Le jeu affiche un code de six caractères et un lien d'invitation. Vous êtes l'hôte :
c'est vous qui lancez les manches et, dans les jeux d'action, qui tirez la graine du parcours. |
| Rejoindre une partie |
Saisissez le code reçu, ou ouvrez directement le lien d'invitation : le code est alors
déjà rempli. |
| Jouer en local |
Aucun réseau : les deux joueurs se partagent l'écran. À la Bataille navale et aux
Dominos, un écran de passation masque le jeu de chacun entre les tours. |
La liaison est directe d'un navigateur à l'autre (WebRTC, via la
bibliothèque PeerJS) : aucune donnée de partie ne passe par un serveur, seul
un annuaire public sert à la mise en relation.
Ouvert par double-clic depuis le disque (file://), le jeu
en ligne fonctionne aussi : le schéma file est réputé digne
de confiance, au même titre que https. Le jeu demande alors
votre accord et rappelle les quatre contraintes — chacun doit posséder le
même fichier de jeu, le lien d'invitation ne mène nulle part (il est
d'ailleurs masqué, seul le code à 6 caractères circule), les records et le
réglage du son peuvent ne pas être conservés, et Safari refuse parfois la
connexion.
Publier le dossier sur une adresse https://… — GitHub Pages,
Netlify, Vercel, ou un simple serveur local — lève toutes ces limites et
permet d'envoyer un simple lien.
Pendant la partie
- Le bandeau bleu sous les boutons indique l'état de la liaison, le code de la salle
et la latence mesurée.
- La barre de statistiques rappelle en permanence à qui c'est le tour, le score et
l'avancement de la manche.
- Le panneau de gauche réunit les deux joueurs, une discussion avec réactions rapides,
et l'historique des coups ou des scores. Il disparaît sur les écrans étroits.
- Chaque jeu a son propre bouton ❓ Aide, avec ses règles détaillées.
🔧 Partie technique — publication et fonctionnement en réseau
Cette section ne sert que si vous publiez la
collection ou si vous voulez comprendre ce qui circule sur le réseau.
Elle n'est pas nécessaire pour jouer.
Publier la collection
Envoyez le contenu de ce dossier — et non le dossier lui-même —
sur un dépôt GitHub public, de sorte que index.html se
retrouve à la racine, à côté des huit fichiers de jeu. Puis, dans le
dépôt : Settings → Pages, source Deploy from a branch,
branche main, dossier / (root). Tous les chemins
sont relatifs : l'adresse du dépôt n'a aucune importance.
Essayer en local comme si c'était en ligne
Placez-vous dans ce dossier et lancez :
python3 -m http.server 8000
puis ouvrez localhost:8000. Attention : http://
sur localhost suffit pour tester à deux onglets sur la même
machine, mais deux machines différentes demandent une vraie adresse
https://….
Deux façons de synchroniser deux joueurs
| Famille | Ce qui circule |
|---|
| Morpion, Dames, Awalé, Carrom, Bataille navale, Dominos, Jeu de l'oie |
Le coup joué — la case, ou pour le Carrom la position et la vitesse du palet —
puis un état complet renvoyé par l'hôte. Les deux postes appliquent la même fonction de
règles, ou la même physique : l'état reste identique des deux côtés. À la Bataille navale,
chaque grille reste chez son propriétaire — seuls la case visée et le résultat circulent.
Aux Dominos, l'hôte fait autorité : il bat le jeu, tient la pioche et n'envoie à chacun que sa
propre main. Au jeu de l'oie, l'hôte seul lance les dés et diffuse le plateau. |
| Tennis |
Du temps réel : l'invité envoie la hauteur de sa raquette environ trente fois
par seconde, l'hôte — seul arbitre — simule la balle et diffuse sa position. L'invité
n'effectue aucune simulation : aucune divergence n'est possible. |
Sécurité et confidentialité
- Bibliothèque vérifiée : PeerJS est chargée depuis unpkg, jsDelivr ou cdnjs, et le
navigateur contrôle son empreinte (SRI). Une copie altérée est refusée ; si aucune copie
intègre n'est joignable, le jeu en ligne est indisponible et le mode local reste utilisable.
- Page verrouillée : chaque fichier, ce menu compris, déclare une politique de sécurité
(CSP) qui n'autorise que son propre script, identifié par son empreinte, et le seul serveur de
mise en relation PeerJS. Modifier son script sans recalculer cette empreinte l'empêche de fonctionner.
- Messages contrôlés : tout ce qui arrive de l'autre poste est vérifié — taille, forme,
légalité du coup selon les règles du jeu — et rejeté s'il est incohérent. Un adversaire qui
modifierait sa page ne peut ni jouer un coup interdit ni imposer un état truqué.
- Salle protégée : le code est tiré par un générateur aléatoire cryptographique. Une fois
l'invité accueilli, la salle est fermée aux autres, et toute reconnexion exige une
authentification mutuelle (défi-réponse HMAC). Un auto-test cryptographique au démarrage
désactive le jeu en ligne en cas d'anomalie.
- Confidentialité : la liaison est chiffrée. Comme lors d'un appel vidéo, l'adversaire
peut voir votre adresse IP. Serveurs tiers sollicités : mise en relation
0.peerjs.com,
découverte d'adresse STUN de Google, relais TURN PeerJS si le lien direct est impossible.
Si la connexion échoue
- Vérifiez que les deux joueurs ouvrent bien la même page — la même adresse
https://…, ou chacun sa copie du même fichier.
- Un réseau d'entreprise ou un VPN strict peut bloquer WebRTC : essayez en partage de
connexion mobile.
- Le code est valable tant que l'hôte garde sa page ouverte ; s'il la recharge, un nouveau
code est tiré.
- Console du navigateur (F12) : une erreur mentionnant
integrity ou
Content-Security-Policy signale un fichier modifié ou une bibliothèque altérée.
Reprenez le fichier d'origine.