Construire un Snake sur React semble trivial au premier abord, mais synchroniser un moteur de jeu temps réel avec le cycle de vie de React et une gestion d'état stricte réserve quelques surprises d'architecture.

Le Problème & La Solution

L'objectif de ce projet était d'implémenter un Snake rétro complet (grille et vitesse configurables, persistance du high score, support mobile via gestures swipe) en traitant le moteur de jeu comme un système déterministe. Plutôt que d'éparpiller la logique dans des useEffect et des états React locaux, l'application s'appuie sur une séparation stricte entre le moteur d'état et le rendu visualiseur.

Sous le Capot (Stack & Archi)

• XState : Cœur de l'architecture. Toute la logique métier (transitions d'états, règles de collision, orientation, score) est centralisée dans une machine à états finis. React ne sert que de couche de rendu passive qui réagit aux changements d'état.
• React & Tailwind CSS : Rendu volontairement minimaliste basé sur une grille de div CSS (flex/grid). Aucun Canvas ici : le DOM est directement piloté par l'état distribué pour valider les performances d'un rendu "blocky" simple.
• Boucle de Jeu (setInterval) : Cadencement de la boucle de jeu par un intervalle régulier déclenchant les événements de déplacement (TICK) vers la machine à états.
• react-swipeable : Capture des événements tactiles sur mobile, mappés directement vers les transitions d'orientation de XState.

Le Challenge Technique

Le principal défi résidait dans le découplage entre le rythme de la boucle de jeu, la fréquence des entrées utilisateur (clavier ou swipe mobile) et le cycle de rendu React.

Pour résoudre cela, la machine XState isole le changement de direction dans un état intermédiaire ou valide la cohérence des vecteurs via des guards avant d'appliquer la mutation au tic suivant. Cela garantit un comportement prévisible sans fuite de mémoire ni dépendance aux re-rendus React.