Aller au contenu principal
sports_esports Lab Canvas 2D Machine à états Verrouillage des entrées Mélange de Fisher-Yates

Memory — le jeu des paires, une machine à états et le verrouillage des entrées en Canvas 2D

Le jeu de paires réimplémenté from scratch en Canvas 2D : une petite machine à états à trois positions (zéro, une ou deux cartes retournées), le verrouillage des entrées pendant l'animation de comparaison — pour ne jamais retourner une troisième carte — et un mélange équitable par Fisher-Yates. Animation de retournement en requestAnimationFrame, zéro dépendance.

Clic ou tap sur une carte pour la retourner Formez des paires : deux cartes identiques restent visibles Espace : nouvelle partie

Un petit jeu, une vraie machine à états

Memory tient en une règle : retourner deux cartes, les garder si elles forment une paire, les recacher sinon. Derrière cette simplicité se cache exactement le genre de logique que je soigne sur un projet sérieux — un état clair, des transitions explicites, et aucune place laissée à l'ambiguïté. Le tout en Canvas 2D, sans moteur de jeu ni dépendance, en quelques kilo-octets.

Trois états, des transitions nettes

À chaque instant, une partie se trouve dans un seul état : zéro carte retournée, une carte retournée, ou deux cartes retournées en attente de comparaison. Un clic ne fait qu'une chose : retourner une carte et faire avancer cet état. Quand la deuxième carte se retourne, je compte le coup et je déclenche la résolution — paire conservée ou non-paire recachée. Modéliser le jeu comme une petite machine à états, plutôt qu'en accumulant des drapeaux, rend le comportement prévisible et facile à faire évoluer.

Le verrouillage des entrées, le vrai détail qui compte

C'est le piège classique du Memory : pendant que deux cartes non identiques sont affichées avant de se retourner, rien n'empêche naïvement d'en cliquer une troisième. Le jeu se retrouve alors avec trois cartes visibles et un état incohérent. Je pose donc un verrou dès la deuxième carte retournée : tant que la comparaison et son animation ne sont pas terminées, toutes les entrées sont ignorées. Gérer proprement ces fenêtres où l'utilisateur ne doit pas pouvoir agir est une compétence qui dépasse largement le jeu — c'est la même rigueur qui évite les doubles soumissions d'un formulaire ou les actions concurrentes sur une commande.

Un mélange réellement équitable

Distribuer les paires au hasard mérite mieux qu'un tri approximatif. J'utilise l'algorithme de Fisher-Yates : en partant de la fin du paquet, chaque carte est échangée avec une position tirée uniformément parmi celles qui restent. C'est l'unique méthode de mélange qui garantit que toutes les permutations sont équiprobables, sans biais caché. Un « mélange maison » bricolé favorise presque toujours certaines dispositions — le genre de biais discret qui, transposé à un tirage au sort ou à une répartition de charge, finit par se voir.

La rigueur sur le détail, au service de vos projets

Un jeu de paires ne pèse rien, et pourtant il condense ce que j'apporte sur des applications critiques : un état maîtrisé, des entrées verrouillées au bon moment, et des algorithmes choisis pour leurs garanties, pas par habitude. Sur vos projets, c'est cette même attention aux transitions, aux cas limites et à la correction des fondations qui fait la différence entre un logiciel qui fonctionne « en général » et un logiciel sur lequel on peut réellement compter.

Photo d'Emmanuel BALLERY, fondateur de x10

À propos de l'auteur

Emmanuel BALLERY est le fondateur de x10 solutions. Ces petits jeux sont surtout un plaisir de développeur, codés le week-end — pas une vitrine de mes missions, qui sont bien plus exigeantes. J'y soigne quand même la performance et la lisibilité, par habitude.

Voir plus arrow_forward
rocket_launch

Un vrai projet en tête ?

Ce petit jeu m'amuse, mais il ne dit pas grand-chose de mon métier : mes missions sont bien plus complexes. Si vous avez une application à concevoir ou à fiabiliser, c'est là que je suis vraiment utile.

Discuter de mon projet arrow_forward