DEV Community

Cover image for CSS games are fun!
Alvaro Montoro
Alvaro Montoro

Posted on • Updated on • Originally published at

CSS games are fun!

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.


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:

  1. Use more complex selectors.
  2. Deal with specificity conflicts.
  3. 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 (7)

karataev profile image
Eugene Karataev

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, because the the browser's viewport is scrolled to the page's top on every user interaction 🤣

alvaromontoro profile image
Alvaro Montoro

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 :-/

kleene1 profile image


lmolivera profile image
Lucas Olivera

I have never heard of this before. It amazes me how complex CSS can be!

patsyjmoore1 profile image
Patsy J. Moore

It will definitely add to our knowledge.

mohammedgqudah profile image
Mohammed Qudah


steffenpedersen profile image
Steffen Pedersen

This is so awesome 😎 The "artificial intelligence" is not the brightest, but it is amazing, that it is even possible 😃