Speckyboy Design Magazine

8 Pure CSS Games You Can Play in Your Browser

We may take CSS for granted, but it’s amazing to think about just how powerful it has become. What started out as a simple way to style various design elements has evolved into so much more. We now use the language to handle tasks such as layouts and animation with ease – and without a second thought.

But it doesn’t stop there. CSS is also being utilized to build fully-interactive UIs. Things that used to require JavaScript now can be done with code that is natively supported in all modern web browsers.

Among the best examples of this trend are the bevy of pure CSS games that are popping up. They’re fun to play and give us a hint as to what can be achieved with a little creativity.

Here’s a look at some of the best pure CSS games on CodePen. They range from the stupefyingly simple all the way to “wow, CSS can do that?” – enjoy!

The Web Designer Toolbox

Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

Web Templates

2,000+ Templates

Newsletter Templates

270+ Templates

Dashboard Templates

150+ Templates

WordPress Themes

1,200+ Themes

WordPress Plugins

550+ Plugins

Mockup Templates

8,200+ Templates

Start Downloading Now!

Rock, Paper, Scissors

A session of rock, paper, scissors is always a great way to beat boredom. If you don’t have a partner to play along, you can give this virtual version a go. Click on your weapon of choice and then on the “Fight!” button to see how you did. The game uses HTML radio buttons and some random CSS to power the match.

See the Pen Pure CSS Game Rock Paper Scissor by Jerry Low

Minesweeper for Git Commits

This game combines the classic premise of Minesweeper with the look of a GitHub contribution graph. See how many squares you can paint before hitting one of those pesky mines. Again, CSS is used to generate “random” locations for each mine.

See the Pen CommitSweeper – Pure CSS Game by Stephanie Eckles

Save the World from Demons

Here’s a simple shooter game that asks you to take out some demonic minions (no, not those minions). Place your cursor over a demon and click to send them packing. A quick look under the hood reveals that HTML checkboxes and animated GIFs are making the whole thing work.

See the Pen
Demon Killer II by Mark Sottek

You Want Cake? You’d Better Earn It.

Sure, everybody wants some cake. But this game may drive you mad in its pursuit, as it takes some dexterity with your mouse. Hover over a tiny box and avoid the little crumbs and sprinkles. If you make it through, you shall be rewarded. Move your cursor too far, though, and you’ll have to start all over again.

See the Pen Pure CSS Cake 100×50 Game 🎂🎉 by Jhey

Guess the Movie

This little trivia/hangman-style game makes clever use of the CSS :valid and :invalid pseudo-classes to guide you towards a correct answer. First, you’re shown a set of emoji that represents a movie. From there, you’re expected to type in the movie’s name. But each form input only has a single valid letter. CSS will tell you if you’ve entered the right one (or you could just look at the source code).

See the Pen Guess The Movie – a mini CSS game by Inès

I Ain’t Afraid of No Ghosts

Here’s another shooter game – but with a twist. This time around we’re hunting down ghosts in a whack-a-mole type of setup. The difference here is that you only have 15 seconds to work with. It’s a good demonstration of timing animations with CSS. How many can you blast?

See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey

Stack ‘em High

Reminiscent of Tetris, this game challenges you to stack groups of moving blocks on top of each other. It may sound easy enough, but requires precise timing to get right. Now, if I could just find my old Game Boy…

See the Pen Pure CSS Game: Stacker by Jerry Low

You Sunk My Battleship

Grab a friend (or your alter ego) and play a spirited game of Battleship – powered only by CSS. While it’s not quite as secretive as the physical version, it does provide a nice foray into conditional logic. Take a look through the code to see how it works.

See the Pen CSS Game: Battleships by Daniel Schulz

Playing Around With CSS

CSS provides us with more than just a way to make our websites look attractive. It can bring movement and interactivity as well.

And, though the games in this collection may not be practical for everyday use, they do demonstrate just how powerful the language has become. Studying these examples can provide you with an idea of how to leverage CSS to build more interactive experiences.

Want to play around some more? Check out our CodePen collection for even more pure CSS games!

The post 8 Pure CSS Games You Can Play in Your Browser appeared first on Speckyboy Design Magazine.

Recent Articles: