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.
Top comments (6)
It's mindblowing that it's possible to add such level of interactivity with just pure CSS nowdays.
P.S. It's hard to play the game here on dev.to, because the the browser's viewport is scrolled to the page's top on every user interaction 🤣
I realized about that, that's why I added the link to the CodePen demo, but it is not too obvious within the post itself :-/
It will definitely add to our knowledge.
Wow
I have never heard of this before. It amazes me how complex CSS can be!
This is so awesome 😎 The "artificial intelligence" is not the brightest, but it is amazing, that it is even possible 😃