Minesweeper using HTML513 May 2018 0 Comments
Obviously, everyone was born before the year 2000 knows the famous classic game ‘Minesweeper’. To me, I knew this game when I was little at the time where Windows XP was ruling everywhere. It is funny because at that time I did not know exactly how the game is played. That time the game was some kind of a luck game to me where you try to eliminate all the squares except the ones with mines until you either win or lose .
Until recently, a friend pointed out that they saw a video of a guy who made a fully perfect AI to solve the game. I liked the idea so I decided to make one. I started by learning how the game works and it turned out to be very simple. There is a certain number of mines in the game and the player has to discover where these mines are to win the game. Every square has a weight that shows how many mines they are within the surrounding 8 squares of that particular square. If the weight was zero the game will reveal all the surrounding squares except the ones with the mines, otherwise, it will reveal the square itself. Although things did not go very well with the idea, I ended up making the game only.
How does it work?
This will create a square with side equals to 10 and a position of (0, 0). Easy and simple.
I started by questioning what attributes each square has? And I came up with these: isMine, isFlagged, isDown, x, y, and weight. isMine tells if a square is a mine. isFlagged is when a square is being flagged or marked. isDown if a square is revealed. x and y hold the location in the game. weight is a number greater than zero where it holds how many mines within its surrounding squares. With these attributes I came with this JS class:
The game does not have a loop, it contains two main functions. The first one is called to initialize the game environment like setting mouse event handler. Here is where all the magic happens, whenever the user clicks the first click the timer starts and it passes the click to the game. If it was inside the game frame where the squares are located it will register a click for that square. Otherwise, it will start a new game. Which is the second function, the previous function is only called once. This one is called to clear all the previous data in the game and create a start a new game. Obviously, this is done with the help of other functions to make it a little more organized.