Aller au contenu principal
Lab

Lab — jeux et expériences, pour le plaisir de coder

Mon terrain de jeu : je réimplémente des classiques du jeu vidéo et des simulations from scratch, le week-end, pour le plaisir. Ce ne sont que des exercices de style — mes missions sont autrement plus complexes — mais chacun est jouable directement dans le navigateur, sans dépendance.

// jeux

Jeux

Des classiques réimplémentés from scratch, chacun avec un objectif : un score à battre, une IA à vaincre, un puzzle à résoudre.

Écran de jeu Match-3 : une grille de gemmes arrondies ambre, indigo, rose, émeraude, ciel et violet sur fond sombre, avec un alignement de trois gemmes ambre mis en évidence.
Canvas 2D Détection d'alignements Cascades

Match-3

Alignez trois gemmes ou plus : elles disparaissent, celles du dessus tombent, de nouvelles apparaissent — et les cascades s'enchaînent.

Écran de jeu Lunar Lander : un module lunaire ambre à la flamme de poussée descend vers une plateforme indigo posée sur un terrain slate accidenté, sur fond étoilé.
Canvas 2D Physique Atterrissage

Lunar Lander

Le classique de 1979 : contrez la gravité avec une poussée limitée et posez le module sur la plateforme, à faible vitesse et bien droit.

Écran de jeu Tron : une arène en grille sombre parcourue par deux traînées à angle droit, l'une ambre et l'autre indigo.
Canvas 2D Logique sur grille IA flood-fill

Tron

Deux motos foncent et laissent une traînée solide : coincez l'IA indigo sans percuter un mur, votre traînée ou la sienne. Elle fuit les culs-de-sac en comptant l'espace libre atteignable.

Écran de pierre-feuille-ciseaux : un cercle ambre (pierre), un carré indigo (feuille) et des ciseaux slate, avec le score en haut.
Canvas 2D Chaîne de Markov IA prédictive

Pierre-feuille-ciseaux

Le classique pierre-feuille-ciseaux contre une IA qui apprend vos habitudes et anticipe votre prochain coup. Pour la battre durablement, il faut renoncer à toute régularité.

Écran de jeu Sudoku : une grille 9×9 aux blocs 3×3 marqués d'un trait épais, avec des chiffres donnés en ambre sur fond sombre.
Canvas 2D Backtracking Solution unique

Sudoku

Le casse-tête des chiffres : chaque grille proposée est mathématiquement garantie à solution unique. Sélectionnez une case, saisissez au clavier ou au pavé, les conflits se surlignent tout seuls.

Écran de bataille navale : deux grilles 10×10 sombres, des impacts ambre, des tirs manqués indigo et un navire slate visible.
Canvas 2D IA probabiliste Heatmap

Bataille navale

Affrontez une IA qui vous traque par le calcul : en chasse elle vise les cases les plus probables selon une carte de probabilité, en cible elle aligne ses tirs autour d'un impact jusqu'à couler votre navire.

Écran de jeu Memory : une grille 4×4 de cartes au dos slate, quelques-unes retournées montrant des symboles ambre et indigo.
Canvas 2D Machine à états Verrouillage des entrées

Memory

Le jeu de mémoire classique : retournez les cartes deux par deux pour reconstituer les huit paires. La grille est mélangée équitablement à chaque partie ; comptez vos coups et votre temps.

Écran de jeu Motus : une grille de mots de cinq lettres avec des cases ambre, indigo et slate, façon Wordle.
Canvas 2D Logique de feedback Gestion des doublons

Motus

Le mot du jour : trouvez le mot de cinq lettres en six essais. Chaque essai se colore — bien placé, présent ailleurs, absent — avec la gestion fine des lettres qui se répètent.

Écran de jeu Nim : quatre rangées d'allumettes ambre (1, 3, 5, 7) à tête plus claire sur fond bleu nuit.
Canvas 2D Théorie des jeux Nim-sum (XOR)

Nim

Le jeu des allumettes face à une IA fondée sur la théorie des jeux : retirez des allumettes d'une seule rangée et prenez la dernière pour gagner. Imbattable dès qu'elle a l'avantage.

Écran de jeu Othello : un plateau 8×8 vert-slate avec des pions ambre et indigo qui s'encadrent.
Canvas 2D Négamax alpha-bêta Heuristique positionnelle

Othello

Le classique de l'encadrement face à une IA qui anticipe : posez un pion pour retourner les lignes adverses prises en tenaille. Négamax alpha-bêta, poids des coins et mobilité — à vous d'avoir la majorité.

Coureur ambre en plein saut au-dessus d'obstacles indigo et slate alignés sur une ligne de sol, sur fond bleu nuit.
Canvas 2D Un seul bouton Spawn procédural

Runner

Un coureur, un bouton, la gravité : sautez par-dessus les obstacles qui défilent de plus en plus vite. Le score suit la distance.

Écran de jeu Sokoban : un entrepôt en grille avec des murs slate, des caisses ambre, des cibles indigo et un personnage.
Canvas 2D Niveaux en données Undo

Sokoban

Poussez chaque caisse sur sa cible dans l'entrepôt : on ne peut que pousser, jamais tirer, et jamais deux caisses à la fois. Trois niveaux s'enchaînent, et « u » annule le dernier coup.

Écran de jeu Lights Out : une grille 5×5 de cellules arrondies, certaines allumées en ambre, d'autres éteintes en slate sombre.
Canvas 2D Algèbre GF(2) Élimination de Gauss

Lights Out

Éteignez toute la grille : chaque clic bascule une cellule et ses quatre voisines. Un indice, calculé par élimination de Gauss sur GF(2), résout la grille à votre place.

Écran de jeu Taquin : une grille 4×4 de tuiles numérotées de 1 à 15 avec une case vide, quelques tuiles en ambre.
Canvas 2D Parité / solvabilité Zéro dépendance

Taquin

Le casse-tête coulissant : remettez les tuiles 1 à 15 dans l'ordre. Chaque mélange proposé est mathématiquement garanti résoluble.

Écran de jeu Astéroïdes : un vaisseau triangulaire ambre, des astéroïdes en polygones slate et indigo et une salve de tirs sur fond bleu nuit.
Canvas 2D Physique vectorielle Wrapping torique

Astéroïdes

Le classique de 1979 : pilotez un vaisseau à inertie, découpez les astéroïdes qui dérivent dans un espace sans bords et survivez le plus longtemps possible.

Écran de jeu Puissance 4 : une grille 7×6 bleu foncé avec des jetons ambre et indigo empilés.
Canvas 2D Alpha-bêta Évaluation heuristique

Puissance 4

Le classique de l'alignement face à une IA qui anticipe : élagage alpha-bêta, évaluation heuristique et jeu au centre. Alignez quatre jetons avant elle.

Écran de jeu Tetris : un puits sombre avec des tétrominos colorés empilés et une pièce en cours de chute.
Canvas 2D Sac de 7 Wall-kick

Tetris

Le puzzle culte : emboîtez les sept tétrominos, complétez des lignes pour les effacer et tenez le rythme d'une chute qui accélère à chaque niveau.

Écran de jeu Morpion : une grille 3×3 avec des croix ambre, des ronds indigo et une ligne gagnante mise en évidence.
Canvas 2D Minimax IA imbattable

Morpion

Le tic-tac-toe classique face à une IA minimax qui explore toutes les parties possibles : impossible à battre, au mieux match nul.

Écran de jeu Simon : un disque divisé en quatre quadrants colorés, l'un d'eux illuminé.
Canvas 2D Web Audio API Son synthétisé

Simon

Le jeu de mémoire culte : observez la séquence de couleurs, puis reproduisez-la. Elle s'allonge d'un pas à chaque manche.

Oiseau ambre franchissant des tuyaux indigo sur fond bleu nuit.
Canvas 2D Un seul bouton Object pooling

Flappy

Un oiseau, une touche, la gravité : Flappy en Canvas 2D pur.

Écran de jeu Démineur : une grille sombre avec des cases révélées numérotées, des drapeaux ambre et une mine.
Canvas 2D Flood-fill Premier coup sûr

Démineur

Le classique de Windows : déminez la grille de 144 cases sans faire exploser l'une des 24 mines. Le premier coup est toujours sûr.

Écran de jeu 2048 : une grille 4×4 sombre avec des tuiles numérotées 2, 4, 8, 16, 32 et 128.
Canvas 2D Logique d'état Zéro dépendance

2048

Faites glisser les tuiles, fusionnez les nombres égaux et visez 2048. Un coup ne fait apparaître une nouvelle tuile que s'il a bougé quelque chose.

Casse-briques : mur de briques ambre, indigo et slate en haut, balle blanche et raquette ambre en bas sur fond sombre.
Canvas 2D Collision AABB 3 vies

Casse-briques

Un mur de briques, une raquette ambre, et toute la finesse d'une collision AABB propre.

Écran de jeu Snake : un serpent ambre sur une grille sombre et un fruit à attraper.
Canvas 2D Logique sur grille Zéro dépendance

Snake

Le serpent culte des Nokia : mangez les fruits, allongez-vous, évitez les murs et votre propre queue. Le tout accélère à chaque bouchée.

Écran de jeu Pong : deux raquettes, une balle et un filet pointillé au centre.
Canvas 2D 60 fps Zéro dépendance

Pong

Le grand classique de 1972 : affrontez une IA imparfaite à la souris, au doigt ou au clavier. Premier à 7 points.

// expériences

Expériences

Rien à gagner ici : des simulations physiques, de l'art génératif et des visualiseurs d'algorithmes où l'on regarde un principe se déployer sous ses yeux.

Champ de lucioles : un amas central synchronisé en ambre parmi des oscillateurs éteints en slate, avec un cercle de phase et son paramètre d'ordre.
Canvas 2D Synchronisation Oscillateurs couplés

Kuramoto

Des « lucioles » aux cadences différentes qui finissent par clignoter ensemble : montez le couplage et franchissez le seuil de synchronisation.

Un carré subdivisé en quadtree, aux cases plus fines là où les points sont denses, avec une zone de requête indigo et les points trouvés en ambre sur fond bleu nuit.
Canvas 2D Partitionnement spatial Requête de zone

Quadtree

Pas un jeu à gagner mais une structure de données en action : un quadtree se subdivise là où les points s'agglutinent, et une requête de zone n'explore que les nœuds concernés au lieu de tester tous les points.

Structure fractale dendritique de l'agrégation limitée par diffusion : de fines ramifications rayonnent d'un centre ambre vers des pointes indigo sur fond bleu nuit.
Canvas 2D Marche aléatoire Croissance fractale

DLA

Pas un jeu à gagner mais une croissance fractale : des particules en marche aléatoire se collent à un amas central et font émerger des ramifications dendritiques. Cliquez pour ajouter une graine.

Nuage de points slate entouré d'un polygone convexe ambre sur fond bleu nuit.
Canvas 2D Parcours de Graham Géométrie

Enveloppe convexe

Regardez l'enveloppe convexe d'un nuage de points se construire par le parcours de Graham : tri par angle polaire, puis une pile qui rejette chaque tournant à droite jusqu'au polygone final.

Simulation gravitationnelle à N corps : des corps ambre et indigo en orbite autour d'une masse centrale, avec leurs traînées.
Canvas 2D Gravitation Leapfrog

N-corps

Des corps s'attirent par gravitation et tournent en orbite : lancez-en de nouveaux au clic-glissé, remettez la scène à zéro et regardez les trajectoires se tisser.

Motif d'interférences à deux sources : des anneaux concentriques indigo et ambre se croisent en franges sur fond sombre.
Canvas 2D Superposition d'ondes Grille échantillonnée · ImageData

Interférences

Deux sources ou plus émettent des ondes qui se superposent : franges claires là où elles s'additionnent, sombres là où elles s'annulent. Déplacez une source, ajoutez-en d'un clic.

Arbre fractal symétrique : un tronc ambre à la base se ramifiant en branches de plus en plus fines virant à l'indigo, centré sur fond bleu nuit.
Canvas 2D Récursivité L-système

Arbre fractal

Un arbre né d'une seule règle récursive : la souris règle l'angle de branchement et la profondeur, et une brise anime le feuillage. Pas un jeu à gagner, une leçon de récursivité.

Falling Sand : un talus de sable ambre empilé et une flaque d'eau indigo posés sur une base slate, sur une grille sombre.
Canvas 2D Automate à éléments ImageData

Falling Sand

Pas un jeu à gagner mais un automate à éléments : peignez du sable qui s'empile en talus, de l'eau qui s'étale en flaque et des murs fixes. Tout émerge de règles locales simples.

Vue pseudo-3D d'un couloir en Raycaster : des tranches verticales de murs ambre et indigo assombries par la distance convergent vers un point de fuite, sol et plafond sombres.
Canvas 2D Lancer de rayons DDA Pseudo-3D

Raycaster

Un moteur pseudo-3D façon Wolfenstein : parcourez un labyrinthe rendu par lancer de rayons, une tranche verticale de mur par colonne d'écran. Minimap en coin.

Épicycles de Fourier : une chaîne de cercles décroissants reliés par des rayons retrace une courbe ambre en forme de cœur sur fond bleu nuit.
Canvas 2D DFT Épicycles

Épicycles de Fourier

Dessinez une courbe fermée à la souris : une chaîne de cercles tournant à leurs fréquences la redessine sous vos yeux. La transformée de Fourier, rendue visible.

Motif de Turing organique : des taches et structures coralliennes ambre sur un fond bleu nuit.
Canvas 2D Gray-Scott Motifs de Turing

Réaction-diffusion

Pas un jeu à gagner mais une simulation de chimie : deux substances diffusent et réagissent, des motifs de Turing émergent. Peignez à la souris pour les perturber.

Ensemble de Mandelbrot stylisé : la silhouette sombre de la fractale cerclée d'un halo ambre puis bleu sur fond bleu nuit.
Canvas 2D Fractale Plan complexe

Mandelbrot

Plongez dans la fractale de Mandelbrot : cliquez ou utilisez la molette pour zoomer vers un point, clic droit pour dézoomer, glissez pour recadrer. Le rendu s'affine à l'arrêt.

Metaballs : deux blobs organiques, un ambre et un indigo, en train de fusionner sur fond bleu nuit.
Canvas 2D Surfaces implicites Marching squares

Metaballs

Des gouttes ambre et indigo qui se rejoignent et se séparent : l'iso-surface d'un champ scalaire, extraite par marching squares sur une grille échantillonnée.

Labyrinthe aux murs slate sur fond sombre, traversé par un chemin de solution ambre serpentant de l'entrée à la sortie.
Canvas 2D Backtracking BFS / A*

Labyrinthe

Deux gestes fondateurs de l'algorithmique : construire un espace par backtracking, puis le parcourir en BFS pour en extraire le plus court chemin.

Histogramme de barres ambre de hauteurs variées, partiellement trié, avec deux barres surlignées en indigo sur fond sombre.
Canvas 2D Algorithmes de tri File d'opérations

Tri visualisé

Cinq algorithmes de tri animés barre par barre : comparez O(n²) et O(n log n) à l'œil nu, comparaisons et échanges surlignés en temps réel.

Simulation de tissu Verlet : un maillage de points ambre relié par des segments, épinglé et légèrement drapé sur fond sombre.
Canvas 2D Intégration de Verlet Contraintes

Tissu Verlet

Un tissu qui pend et se déforme, tenu par l'intégration de Verlet et des contraintes de distance relâchées à chaque image. Attrapez un point, coupez des segments, réinitialisez.

Double pendule chaotique : deux bras et deux masses ambre et indigo suspendus à un pivot, avec la traînée courbe laissée par la pointe.
Canvas 2D Chaos · RK4 Zéro dépendance

Double pendule

Deux bras, la gravité, et un mouvement imprévisible : un double pendule chaotique intégré en RK4, où un jumeau quasi identique finit toujours par diverger.

Champ de flux génératif : des courbes fluides ambre et indigo évoquant des lignes de champ sur un fond bleu nuit.
Canvas 2D Bruit de Perlin Champ de vecteurs

Flow field

De l'art génératif en Canvas 2D : des milliers de particules suivent un champ de bruit de Perlin fait maison et peignent des traînées ambre et indigo.

Une nuée de petites flèches ambre et indigo orientées dans des directions cohérentes, formant un banc sur fond bleu nuit.
Canvas 2D Multi-agents Comportement émergent

Boids

Pas un jeu à gagner mais une nuée vivante : chaque agent ne suit que trois règles locales, et le banc — que personne n'a programmé — émerge sous vos yeux.

Grille sombre avec des murs slate, une case départ ambre, une arrivée indigo, une zone de cases explorées et un chemin ambre qui serpente.
Canvas 2D A* · Dijkstra File de priorité

Pathfinding A*

Dessinez des murs, lancez A* et observez l'exploration puis le plus court chemin se tracer. La touche D bascule en Dijkstra pour comparer les deux stratégies.

Grille sombre du Jeu de la vie parsemée de cellules ambre formant des planeurs et de petits amas.
Canvas 2D Automate cellulaire Zéro dépendance

Jeu de la vie

Pas un jeu à gagner mais un automate cellulaire : dessinez des cellules, lancez la simulation et regardez des motifs émerger de quatre règles simples.

sports_esports

Au-delà du bac à sable

Ces démos sont un loisir de développeur, pas un aperçu de mon travail : mes missions sont d'un tout autre niveau de complexité. Pour un sujet sérieux, parlons-en.

Discuter de mon projet arrow_forward