Pure CSS Tic-tac-toe
Intro
I have seen demos of pure CSS Tic-tac-toe games, but I was unable to find a version that truly works. If I have missed it, please send me link, so I can see how another dev has created it.
My version works as any normal Tic-tac-toe game would: 2 players can play against each other, it can result in either a win or a tie. Players can also restart the game.
In my CodePen example, I used Jade and SASS, so that my code looks much cleaner and simpler to understand.
Demo
How it works:
- It uses hidden radio buttons for the states, and labels for the visible part.
- There are 9 possible turns, in each turn a player can only click on one label.
- Once the user clicks on a label, it changes the radio button state to
:checked
- When the
:checked
state is triggered, the CSS moves to the next turn by using z-index:z-index: 1
for turn one,z-index: 2
for turn two,- etc.
It also pushes the clicked label on top (
z-index: 10
) - Player 1 plays on odd turns and player 2 plays on even turns. Each label has a class
.turn-x
added to it, so we know which turn it is assigned to. To determine which player won, we check for all posibble victories, for both players individually. In HTML we have classes added, so each label is a part of a column, row or diagonal. Example for player 1, first column victory:
.player-1.first-column:checked ~ .player-1.first-column:checked ~ .player-1.first-column:checked ~ .end
- To restart the game, I used a normal
<a>
tag, but left the href attribute empty, so it forces a refresh.
The game should work on any browser that supports CSS3 selectors.
Conclusion
This is my first game that uses only HTML and CSS. I already have a couple of ideas for creating some more Pure CSS games, so keep an eye out. I really enjoyed using a simple method, that we use everyday day, to create a fully functional game.
Hopefully this post will inspire you to explore CSS and create your own game. :)