DEV Community

loading...
Cover image for CSS games are fun!

CSS games are fun!

alvaromontoro profile image Alvaro Montoro Originally published at alvaromontoro.com Updated on ・2 min read

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:

  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.

Discussion (7)

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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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

Collapse
kleene1 profile image
Collapse
lmolivera profile image
Lucas Olivera

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

Collapse
patsyjmoore1 profile image
Patsy J. Moore

It will definitely add to our knowledge.

Collapse
mohammedgqudah profile image
Collapse
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 😃

Forem Open with the Forem app