JavaScript Mine Sweeper

While trying to get a good grasp of JavaScript/CSS, I decided to implement Mine Sweeper.

I tried to use the standard colors for the numbering and standard icons for mines/flag/unknown.

 

I’ve identified the 5 states that any particular cell could be and designed a finite state machine for one cell

  • S is for initial state
  • B is for bomb
  • F is for flag
  • ? is for unknown
  • C is for clear
Finite State Machine for one Mine Sweeper cell
Finite State Machine for one cell

 

This is what the final product looks like

Mine Sweeper Screenshot
Mine Sweeper Screenshot

You may try it out at the link below

http://code.fairmutex.com/projects/web/minesweeper/
What I learned?
Discovered classList
Try to avoid recursion unless the recurring depth is shallow and the worst case scenario is known.

Good explanation about performance (may contain outdated information).
https://www.youtube.com/watch?v=mHtdZgou0qU