Minesweeper game built using React. A nice way to experiment and get familiar with state changes as well as honing JavaScript fundamentals.
- Clone this repository to receive all of the files
- Run "npm install" in the command line of your terminal to set up all of the dependencies
- There is no database currently
- Run "npm start" to start the application's connection
- Your browser will open to the url of the application (http//:localhost:3000) and you'll see it running
Simply click the play button to queue up a game of Minesweeper. Each cell contains a number which will be revealed once clicked. That number corresponds to the number of adjacent mines. If there are 0, then your "sweep" will extend to each of the adjacent cells. There are 60 bombs hidden among the cells. If you should click a cell with a mine, then you will lose! The option to shift-click cells is available as a way to mark cells you suspect to be mines. This will render a red overlay to that cell so that you know not to click it in the future.
Anytime a cell's content needs to be modified, the state of the grid is set using it's setter function. This triggers a re-render of the page and displays that modification.
The grid is created using a 2D array which allows for an intuitive development experience. Each index of that 2D array corresponds to a coordinate for that cell. For example, the top-left-most cell is at grid[0][0], where one cell to the right of that would be grid[0][1] and one down would be grid[1][0]. In other words, the grid operates on an inverted y-axis, similar to how a web page is laid out (i.e. CSS position property).
Adding a backend to keep track of high scores and perhaps add a log in feature to keep track of a user's play history. With this backend, a forum/comment/messaging system could also be added.
This project was setup using create-react-app.