Un démineur jouable au clavier

La grille n'est pas dessinée, elle est faite de vrais boutons. Le jeu se pilote donc à la souris, au doigt et entièrement au clavier, et un lecteur d'écran annonce chaque case sans qu'une seule ligne de code ait été écrite pour ça. C'est le contraire du choix fait pour le casse-briques, et cette page explique pourquoi.

  • Mines 10
  • Temps 0

Ce démonstrateur a besoin de JavaScript pour fonctionner. Le reste de la page reste lisible sans lui.

Flèches se déplacer Entrée fouiller F ou clic droit pour un drapeau Appui long ou bouton Mode pour un drapeau

Comment jouer au démineur

La grille cache des mines. Le but est d'ouvrir toutes les cases qui n'en contiennent pas. Le compteur en haut indique combien de mines restent à signaler.

Fouiller une case
Un clic, ou Entrée au clavier. Le premier coup ne peut jamais tomber sur une mine, il ouvre toujours une zone.
Poser un drapeau
Clic droit sur un ordinateur, appui long sur un écran tactile, ou bouton Mode pour basculer entre fouiller et marquer. Au clavier, la touche F.
Lire les chiffres
Le chiffre d'une case ouverte donne le nombre de mines parmi ses huit voisines. Une case vide n'en a aucune, et ses voisines s'ouvrent d'elles-mêmes en cascade.
L'accord, pour aller vite
Cliquer sur un chiffre déjà ouvert dont le nombre de drapeaux voisins correspond ouvre d'un coup toutes les voisines restantes. C'est le geste des joueurs habitués, et il divise à peu près par deux le nombre de clics nécessaires. Un drapeau mal placé fait perdre la partie.
Demander un indice
Le bouton Indice sous la grille désigne une case dont la valeur est certaine et dit d'où vient la déduction. Il ne l'ouvre pas, le geste reste le vôtre. Un second appui propose une autre déduction quand il en existe une, et une mine que vous avez déjà marquée n'est plus reproposée. Vos drapeaux ne comptent pas dans le raisonnement : ils sont une hypothèse, pas une information. Si l'un d'eux contredit la déduction, le message le signale.
Aucune devinette imposée
La grille servie a été vérifiée résoluble par déduction seule, du premier coup joué jusqu'à la dernière case. Sauf mention affichée sous la grille, aucune position ne demande de tenter sa chance. Perdre reste possible, en ouvrant une case dont rien ne prouvait qu'elle était sûre.
Se déplacer au clavier
Les flèches parcourent la grille case par case, Début et Fin vont aux extrémités de la ligne. Chaque case est annoncée par un lecteur d'écran avec sa position et son état.
Les trois niveaux
Facile, moyen et difficile, avec une proportion de mines croissante. Sur un écran étroit, la grille change de forme au lieu de rétrécir, à proportion de mines égale.

La partie est perdue si une mine est ouverte, gagnée quand toutes les cases sans mine le sont. Le chronomètre démarre au premier coup et s'arrête si vous quittez l'onglet.

Ce qu'il y a derrière

Le démineur a l'air plus simple que le casse-briques. Il n'a ni animation ni physique, et pourtant il concentre six décisions qui séparent une démonstration d'un exercice bâclé.

Des boutons plutôt qu'un canevas

Un canevas aurait été plus rapide à écrire, et complètement inutilisable au clavier : il aurait fallu réimplémenter le focus, la navigation entre cases et l'annonce vocale, pour un résultat toujours inférieur. Avec jusqu'à 256 vrais boutons, le navigateur fournit tout ça. La seule mécanique ajoutée est un tabindex glissant, un seul bouton restant atteignable par tabulation pour que les flèches servent à parcourir la grille au lieu de la traverser case par case.

Le premier coup ne peut pas perdre

Les mines ne sont posées qu'après le premier clic, et la case jouée comme ses huit voisines sont exclues du tirage. Sur une grille facile, une pose à l'avance ferait perdre au premier coup environ une partie sur dix, ce qui n'est pas un jeu mais une loterie. L'ouverture est donc toujours une zone, jamais un chiffre isolé.

Une grille où deviner n'est jamais nécessaire

Le démineur traîne un défaut que tout joueur régulier connaît. En fin de partie, il reste parfois deux cases indiscernables, une mine et une case sûre, sans rien dans la grille pour choisir entre elles, et vingt minutes d'attention se terminent sur un tirage au sort. Ici les mines ne sont pas seulement tirées, elles sont vérifiées. Un solveur qui ne sait que déduire rejoue la partie depuis le premier clic, et le tirage est jeté dès qu'une devinette devient nécessaire. Ce solveur travaille à trois niveaux, les règles locales sur chaque chiffre, la soustraction de deux chiffres dont les cases se recouvrent, puis l'énumération de toutes les répartitions de mines compatibles avec la frontière ouverte.

Le troisième niveau ne trouve presque jamais le coup suivant, deux à trois fois sur mille quand on joue une grille entière à l'indice, et il reste indispensable parce qu'il est le seul à pouvoir démontrer qu'aucune déduction n'existe, donc à justifier un rejet. Le coût a été mesuré sur les trois niveaux, une à deux tentatives suffisent et la génération demande de l'ordre du dixième de milliseconde sur un poste de bureau, la proportion de mines restant celle du niveau choisi. Un budget de 250 millisecondes borne la recherche, au-delà duquel la partie se joue sur une grille ordinaire et la page l'affiche, ce qui ne s'est produit sur aucune des cinq mille grilles de la dernière campagne de mesure. Le bouton Indice rend la propriété visible, puisqu'il désigne à tout moment une case certaine en nommant la règle qui la donne.

La cascade sans récursion

Ouvrir une case vide ouvre ses voisines, qui ouvrent les leurs. La version évidente est récursive, et elle fonctionne jusqu'au jour où la grille grandit et où la pile d'appels déborde. Ici la propagation utilise une pile explicite, ce qui coûte trois lignes de plus et ne dépend pas de la taille de la grille.

Trois façons de poser un drapeau

Clic droit sur un ordinateur, appui long sur mobile, et un bouton de bascule pour les deux. L'appui long seul est un piège classique : il exclut ceux qui ne peuvent pas maintenir un contact stable, et sur iOS il déclenche par défaut la sélection de texte et le menu du système, ce qui demande trois propriétés CSS pour être neutralisé.

L'aide est une modale native

La boîte « Comment jouer » est un élément dialog du navigateur, pas une superposition maison. Le piégeage du focus, la fermeture par la touche d'échappement, le retour du focus au bouton d'origine et l'arrière-plan rendu inerte sont fournis sans une ligne pour les obtenir. Une boîte modale improvisée oublie presque toujours au moins deux de ces quatre comportements, et elle transforme une aide en cul-de-sac pour qui navigue au clavier. Le bouton d'ouverture reste d'ailleurs masqué tant que le script n'a pas vérifié que la méthode existe, et l'aide s'affiche alors en bloc fixe sous la grille : une modale qui refuse de s'ouvrir est un mur, un paragraphe visible n'en est pas un.

Un détail invisible pour finir. Le chronomètre recalcule le temps écoulé à chaque seconde au lieu d'incrémenter un compteur, parce qu'un navigateur ralentit ses minuteurs dès que l'onglet passe en arrière-plan. Il accumule par tranches et met la sienne en pause quand la page se cache, donc le temps passé ailleurs n'est pas facturé au joueur. Le même raisonnement vaut pour une facturation à la durée ou une file de traitement. Notre façon de travailler est détaillée dans notre approche du développement sur mesure, les autres démonstrateurs sont regroupés dans la section jeux, et Le Mag revient sur ces arbitrages techniques.

Un projet qui demande ce niveau de soin

Plateformes métier, catalogues volumineux, interfaces utilisées toute la journée : nous concevons des outils sur mesure conçus pour durer, à Toulouse et partout en France.

Parlons de votre projet