loading...
Cover image for CommitSweeper: Pure CSS Game

CommitSweeper: Pure CSS Game

5t3ph profile image Stephanie Eckles ・1 min read

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 >

Discussion

markdown guide
 

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