MineSweeper

MineSweeper game based on native JavaScript, HTML and CSS

Skills:
MineSweeper

How to play minesweeper

Minesweeper rules are very simple. The board is divided into cells, with mines randomly distributed. To win, you need to open all the cells. The number on a cell shows the number of mines adjacent to it. Using this information, you can determine cells that are safe, and cells that contain mines. Cells suspected of being mines can be marked with a flag using the right mouse button.

Code Features

  • MineSweeper game based on native JavaScript, HTML and CSS.
  • All elements are generated by JavaScript without external references, such as images.
  • Employ pure CSS for page effects, including a gradient background for the grid, visual cues for raised and depressed cells, flag and question mark markers for right-click actions.
  • Utilize the Fisher-Yates shuffling algorithm to ensure an even distribution of mines, thereby enhancing the user experience.
  • In addition to the classic 30x16, 16x16, and 9x9 modes, users can customize the game's dimensions.
  • Implement event binding and delegation to accurately identify the DOM element being interacted with by the user, ensuring cell expansion occurs after the initial click.
  • Achieve batch expansion of zero-value cells through recursion, as well as recursive expansion of adjacent cells.