Aller au contenu principal
sports_esports Lab Canvas 2D Logique d'état Zéro dépendance Clavier · tactile

2048 — le puzzle de fusion réécrit en Canvas 2D

Le jeu de tuiles culte, réimplémenté from scratch en Canvas 2D : une logique de slide/merge écrite pour une seule ligne et réutilisée dans les quatre sens par transposition, détection de fin de partie et apparition de tuile conditionnée au fait que le coup a réellement changé le plateau. Zéro dépendance.

Flèches ← ↑ → ↓ ou W A S D au clavier Balayage du doigt sur mobile Espace : rejouer une partie terminée

Une seule ligne, réutilisée quatre fois

Tout le 2048 tient dans une fonction : faire glisser une ligne de quatre cases vers son bord, en fusionnant deux tuiles égales adjacentes. Je l'écris une fois, proprement, pour la direction « gauche » — je filtre les cases vides, je fusionne les paires, je complète avec des zéros. Les trois autres sens ne dupliquent rien : je lis simplement la grille dans un autre ordre. « Droite » parcourt chaque ligne à l'envers, « haut » et « bas » la parcourent en colonnes par transposition des indices. Une seule logique, testée une seule fois, couvre les quatre mouvements.

Fusionner sans tricher

La règle qui fait tout le sel du jeu : une tuile ne peut fusionner qu'une fois par coup. Une rangée 2 2 2 2 doit donner 4 4, jamais 8. Je l'obtiens en avançant dans la ligne et en sautant la case suivante dès qu'une fusion a lieu — pas de ré-examen de la tuile déjà doublée. Ce genre de détail, invisible dans l'énoncé mais structurant dans le code, est exactement ce qui sépare une règle « à peu près juste » d'une règle correcte.

N'agir que si le plateau a changé

Une nouvelle tuile n'apparaît qu'après un coup qui a réellement modifié la grille. Je le sais parce que je compare chaque ligne avant et après le glissement : si rien n'a bougé, le coup est nul — pas de tuile ajoutée, pas de point marqué. Sans ce garde-fou, appuyer contre un mur ferait apparaître des tuiles gratuitement et saturerait le plateau. C'est un invariant simple, mais s'y tenir évite toute une classe de bugs subtils.

Savoir quand la partie est finie

La défaite ne se résume pas à « plus aucune case vide » : on peut avoir un plateau plein encore jouable si deux voisines égales peuvent fusionner. Je teste donc les deux conditions — une case libre, ou une paire adjacente identique en ligne comme en colonne. Tant que l'une est vraie, la partie continue. La victoire, elle, se déclenche au premier 2048 tout en laissant poursuivre : atteindre l'objectif ne doit pas interrompre le joueur qui veut aller plus loin.

La rigueur, là où ça compte

Un jeu de puzzle est un excellent révélateur : les règles paraissent triviales, mais la moindre approximation se voit immédiatement à l'écran. C'est l'état d'esprit que j'applique aux projets sérieux — isoler la logique métier dans une fonction claire, la réutiliser plutôt que la copier, et poser les invariants qui garantissent un comportement correct dans tous les cas. Du code compact, prévisible et facile à vérifier : voilà ce qui rend une application durable et sereine à faire évoluer.

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