A Coding Beginner Makes Minesweeper in Javascript

Knowing all the problems arrays caused me when I made Tetris, I opted to use grids instead this time. I generated a 30x16 grid and picked, at random, 99 cells to place a mine. I made the mines red for now so I could see where they were when debugging.

To open cells, I first created a function that updated the mouse's position whenever it moved anywhere on the board. It then tells the game where the mouse clicked, and the corresponding cell is opened. To open cells recursively using zero spreading, I included a check to see if the cell was a zero, in which case it calls itself on all neighboring cells.

You can play minesweeper without flags, but they make it much easier and prevent accidental opening. I marked flagged mines and incorrectly flagged mines as 12 and 22 on the board, and bound the flag function to the F key. I also added the end screen, which activates if either a player opens a mine, which reveals unflagged mines and falsely flagged cells, or if a player opens every unmined cell, which flags all unflagged mines.

Chording is a function in most minesweeper games where you can click a numbered cell that already has all its mines satisfied, and all remaining cells its touching would be opened. I added this using an additional detection loop in the onClick function. I then added reverse chording, which flags every cell a number is touching if it's remaining cells are the same as the number itself.

I finished the game by adding a display showing the number of mines remaining and the time it took to solve a board at the bottom of the screen.