Tic Tac Toe est un projet personnel : un mini-jeu de morpion entièrement jouable dans le navigateur, sans rien à installer. Je l'ai conçu comme un exercice front-end pour travailler une interface de jeu simple et lisible, où deux joueurs s'affrontent à tour de rôle sur la grille classique de trois cases sur trois. L'objectif était de partir d'une idée familière et de la rendre agréable à manipuler à l'écran.
Côté technique, la grille et l'habillage reposent sur du HTML et du CSS, tandis que toute la logique du jeu est écrite en JavaScript. C'est elle qui gère l'alternance des tours entre les deux symboles, enregistre chaque case jouée et détecte automatiquement le gagnant en parcourant les combinaisons possibles. Le code reste volontairement clair et structuré, pour que la mécanique du morpion soit facile à suivre et à faire évoluer.
Ce projet montre ma capacité à traduire une règle de jeu en code et à orchestrer les trois couches du web : la structure en HTML, l'apparence en CSS et le comportement en JavaScript. Gérer l'état du plateau, valider les coups et signaler la victoire au bon moment, c'est exactement le type de logique interactive que je mets en place sur des interfaces plus larges. Un exercice court, mais représentatif de ma façon d'écrire du front-end propre.
Logique de jeu en JavaScript
Gestion des tours, enregistrement de chaque coup et détection automatique du gagnant en parcourant les combinaisons gagnantes.
Intégration HTML / CSS
La grille du morpion et son habillage sont construits en HTML et CSS pour une interface claire et lisible dans le navigateur.
Interaction côté navigateur
Le jeu réagit immédiatement à chaque clic et se joue directement dans la page, sans rechargement ni installation.
Apercus complementaires
Carousel Vertical
Un exercice front-end où j'ai conçu un carrousel d'images à défilement vertical pour une présentation photo immersive, en HTML, CSS et JS.
Carte Animee
Exercice front-end one page : une carte interactive qui masque ses informations puis les révèle au survol, en HTML, CSS et JS.
Carte QR Code
Exercice Frontend Mentor : j'ai reproduit en pixel-perfect une carte affichant un QR code, intégrée de zéro en HTML et CSS.
Un projet dans le même esprit ?
Parlez-moi de votre besoin : je vous dis rapidement ce qui est pertinent et réaliste.