Retour à l'accueil
24 janvier 2026Reactchess.jsStockfish.js

Jeu d'échecs & Stockfish

Un échiquier intégré au portfolio pour affronter Stockfish, directement dans le navigateur !

Jeu d'échecs & Stockfish
Web Workers

Après avoir passé pas mal de temps à décortiquer le fonctionnement de Stockfish pour mon projet d'analyseur de parties Chess.com, je me suis dit qu'il manquait une pièce au puzzle sur mon portfolio. Analyser, c'est bien, mais jouer, c'est mieux !

J'ai donc intégré un échiquier complet au site pour permettre de lancer une partie contre Stockfish, sans quitter le navigateur. Ce n'est probablement pas la fonctionnalité la plus indispensable d'un portfolio, mais c'est précisément le genre de détail que j'aime construire. Oui, je suis comme ça.

Stockfish dans le navigateur

Le principe est de faire tourner Stockfish 17 Lite localement dans le navigateur. Puisque le moteur s'exécute côté client, il n'est pas nécessaire d'envoyer les coups vers un serveur.

Pour ne pas bloquer l'interface pendant que le moteur calcule son coup, j'ai utilisé un Web Worker. Stockfish peut ainsi tourner en arrière-plan sans ralentir l'interface React.

Pour chaque coup, le processus est le suivant :

  1. Le plateau valide le coup du joueur avec chess.js et met à jour son état. chess.js est une bibliothèque qui gère la logique du jeu, comme la validation des coups, la détection des échecs et la fin de partie.
  2. L'application transmet le FEN (la notation de l'état du plateau) au moteur via le protocole UCI.
  3. Stockfish calcule son meilleur coup à profondeur limitée (sinon ce serait juste trop long, on reste dans un navigateur) puis renvoie un bestmove à l'interface React.

Une fois le coup du moteur reçu, l'interface met à jour le plateau et le joueur reprend la main.

Et en vrai, à quoi ça sert ?

Si vous êtes arrivé jusqu'ici, c'est que vous vous êtes déjà bien perdu sur mon site. Vous méritez donc la vraie réponse : ça ne sert à rien.

Même si le ratio temps passé à le construire / temps de jeu effectif n'est pas très raisonnable (on parle de dix parties tout au plus) ce petit jeu rend le portfolio plus vivant. C'est aussi une manière de rappeler qu'au-delà des projets « utiles », j'aime expérimenter et fabriquer des choses simplement parce qu'elles sont amusantes à faire.

Si, pour une raison ou une autre, vous souhaitez essayer le moteur seul ou l'intégrer à votre propre projet, le code de Stockfish 17 Lite est disponible ici.