DEV Community

Cover image for CommitSweeper: Pure CSS Game
Stephanie Eckles
Stephanie Eckles

Posted on

13 2

CommitSweeper: Pure CSS Game

A Github graph inspired πŸ’£ Minesweeper-type game.

Click on the squares if you dare - or hover & "paint" the graph of your dreams.

Featuring:

  • Pug to generate all those checkboxes
  • CSS Grid
  • Basic keyframe animation (changes color of the squares)
  • An experimental use of :focus-within + the general sibling combination (~) to accomplish clearing all squares that follow a discovered πŸ’£ mine
  • Sass to randomly select the mine squares which refreshes each page load thanks to the nature of CodePen

Desktop-only due to lack of hover or a comparable :touch selector on mobile, which means adequate touch events would require JS. If you have a hack around this I'd love to hear it!

Play the fullscreen experience >

Top comments (1)

Collapse
 
fyodorio profile image
Fyodor β€’

The UI and animations are awesome. But what are the rules?)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay