CSS games (small games developed exclusively with CSS and HTML, without any JavaScript) are often dismissed by developers as a waste of time. And they may have a point if you consider performance and maintainability.
But...
If you look at them from a different point of view, developing games using CSS makes for some cool challenges, and they can be a great learning experience. You need to:
- Use more complex selectors.
- Deal with specificity conflicts.
- Practice combinators and pseudo-classes.
Not to mention that the CSS-only restriction puts the focus on the analysis and design and forces the developer to stop and think before jumping into coding.
With that in mind, and stuck at home with a cold on Saturday, I decided to give it a try and develop a tic-tac-toe game using only CSS and HTML.
There are many examples of CSS tic-tac-toes online like this one from Žiga Miklič or this other one from Jhey. And they actually look better than mine... So I decided to take mine one step further.
By adding some "artificial intelligence" (using this term quite loosely here), I was able to make it so the machine would actually play with some logic and a "winning mentality."
Here is a demo. I know it may be a bit silly, but it is something that I feel proud of.
What is your experience with CSS games? Have you developed one before? Please share, I'd love to see them.