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.
Ce démonstrateur a besoin de JavaScript pour fonctionner. Le reste de la page reste lisible sans lui.
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