CSS Art: Favorite Recreation

This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.

Inspiration

Recently, I picked up an old hobby—Minesweeper. It’s so addictive that I find myself playing for hours every day. It brings back memories of the good old days when I would play Minesweeper on Windows. I played so much that I would see mines exploding in my mind’s eye even after closing my eyes at night. Now that my favorite Minesweeper game is no longer available on Windows, I play it on Google, which features a really cool garden design. However, unlike before, I no longer experience those vivid mine explosions when I close my eyes. To rekindle that feeling, I decided to create my own Minesweeper board where it’s all mines.

Demo

Journey

The process of working on this prompt was quite tedious, given the complexity of handling multiple grids. Implementing JavaScript and performing the necessary calculations were key challenges, but they were also areas where I learned a great deal and I am particularly proud of.

Using JavaScript also required me to manage CSS dynamically through code. This inspired me to create a more interactive experience with hover and click actions. I further enhanced the project by adding simple animations to mimic the explosion of tiles.

Looking ahead, I hope to develop more elaborate animations for the explosions, aiming to recreate the impactful effects I remember from earlier versions of the Minesweeper.