CSS Tic Tac Toe
CSS Tic Tac Toe
Année
2026
Outils
  • HTML5
  • CSS3

J'ai toujours aimé les projets no/lo-JS, et encore plus quand ce sont des jeux. J'ai donc moi aussi tenté l'expérience et créé ce TicTacToe garanti 0% JS !

Le gameplay fonctionne ainsi :

  • à chaque tour, je compte le nombre de checkboxes cochées par l'un et l'autre des joueurs pour mettre à jour une custom-property (avec :has() )
  • des container-styles queries écoutent la valeur de cette propriété pour venir définir entre les checkboxes du joueur A ou B, lesquelles sont affichées
  • chaque checkbox possède des data-attributes que je peux là aussi compter pour définir le joueur gagnant (ou les matchs-nuls) que j'affiche dans un <dialog> dont je toggle la propriété display

J'ai aussi voulu faire en sorte que le jeu soit navigable au clavier, avec une palette de couleurs accessibles et un label pour chaque checkbox.

Typographie
Typographie

  • Sniglet

Couleurs
Couleurs

  • Couleur principale
  • Couleur d'accentuation
  • Couleur du joueur A
  • Couleur du joueur B