Minesweeper

Description

I built a browser based version of the classic video game, Minesweeper. The goal of the game is to uncover all the squares that do not contain mines without being "blown up" by clicking on a square with a mine underneath. The location of the mines is discovered by a process of logic. You can also flag squares that you suspect contain mines so they don't explode. I don't often get to build games so this was a fun chance to try something new.

Challenges

The toughest part of building this was detecting how many mines were nearby each square that was clicked on. I chose to make each object aware of it's position on the board so that it could know which squares where "nearby" and ask for their totals when clicked. I took advantage of computed properties in EmberJS to implement this and give me the added benefit of organizing my code into small modules and components.

Lessons Learned

Successful games are all about the details: Before building this, I thought Minesweeper was a simple game that would be easy to implement. As I got further into the project I realized just how much details goes into making a simple game that's both challenging and fun.

Don't store state in the DOM: It was tempting to want to store details about application state as attributes on DOM objects. However, I soon found myself storing more and more details on objects and having to query them for their state whenever something needed to be updated. It became nearly impossible to reason about application logic without considering the presentation layer. All those object references in memory was also not great for performance. Another side effect was that my CSS was more related to application states rather than visual styles.

This project definitely taught me to carefully consider how often application state would need to change and what design choices that would influence. It was also a good reminder that some seemingly small decisions at the beginning of a project can have a major impact in the end.

Conclusion

I think this was great for a first try at building a simple game. I'd like to build it again and improve performance by managing memory usage more effectively. I'd also like to try a visual design that's flexible enough to work on all screens. If you'd like to play, you can find the game here. Let me know what you think!