DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

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

Posted on

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?)

Timeless DEV post

Git Concepts I Wish I Knew Years Ago