So, I got the first game working but not without its problems. The main one being that everything was placed inside the squares already, and so the way I was hiding bombs from numbers from blank spaces is using a black font and black backgrounds. So you can easily cheat just by highlighting a square. Sure I could also add a “.hidden” CSS class that could hide it until the user clicks, but really it becomes a bit clunky of a workaround. So after meeting with my trainers, we decided that I should take things in a different direction which would also get me more familiar with a core concept. The decision was to use an array of data in which to store the information on the backend and the array would refer to a square. So for instance if I clicked square in the second column and third row, it would see what was in the array spot of  (cause arrays are 0 indexed, meaning the count starts with 0).
I accomplished this by building the game board which was easily done by creating a loop to build the array depending on the number of squares needed and each loop would .push a new square in. On the HTML side, I had a table setup with the same number or columns and rows. I decided to stick with a hardcoded number of 7, but this could easily be changed later if we wanted to say build a user selectable number of squares in the game board. Then creating the randomizing placement of the bombs, again was easy with quick loop and setting a .hasBomb = true on the squares. It was going pretty good, then it wasn’t
The first major difficulty was figuring out how to link the TD’s (Table Data, aka squares) to the array so that when you click on one it will look to the array. This had me going in circles for a while. I had my click function to pull the this.index and the this.parent.index, which effectively give me a number for the column and row (Column = this.index, Row = this.parent.index). This seemed to match up pretty good, but then trying to get the next part where it ‘loops’ around the square proved to be another challenge. Finally figured out the correct way to get it looping and checking surrounding squares to decide if they had a bomb or not. I ended up putting the number of bombs a square touches into a .bombCount value on each item in the array and triggered that when the board was created. Then I had the click check to see if there was a bomb or not; if yes – Boom game over, if no – then see if it was a number and display that. The last step was if it was a blank space, where it needed to keep checking spaces around it, and keep opening them up until it got to numbered spaces. This was finally accomplished by looping a ‘click’ on surrounding squares. This fun little loop presented a few problems. First was getting it to actually apply clicks to surrounding squares. Remember I’m using the array for looping and checking, but the clicks needed to apply to the DOM (Table Squares). And many attempts to find the right way to write it, came up with this:
The rScan was the number pulled from this.parent.index, and the cScan pulled from this.index. I had to specify the #field table row (tr) and use eq to get access to it by row index, then a find ‘td’ eq to use the column index, which then got me to the right square and allowed me to put the .trigger(“click”) on it. That was probably one of the hardest webs I had to dig through yet. But it still wasn’t working. After a bunch of troubleshooting, the answer was found. The loop was essentially endless as it couldn’t understand the game board boundaries. Even though there was only 7 x 7 squares, it would keep checking endlessly past that. To stop this, I had to create a boundary check that would look to see if it was in the boundaries of the play field by making sure both column and row were >= 0 and <= 6. If it was it would return true, and if not it would return false and stop it there. Adding this in allowed everything to start working correctly.
Finally came the last few pieces to finish the game up. First was of course getting the squares to change colors when clicked, or Command clicked (still need to get Ctrl clicks for PC folks). The command clicking is for the player to mark squares they think are bombs, where the regular clicking will open them up to see. Had to get the command clicking to also change back the color so you can undo selections as well. This actually proved a bit tricky at first as it just wasn’t working. Come to find out that it wasn’t taking HEX color values which was annoying, but started working once I changed everything over to RGB values. Then I needed to create the win conditions. This took me a bit to work through in my mind. It seemed a simple concept, just check the board and see if all the bombs are found or not and if so then yay you win. But putting it into practice ended up being more difficult than expected. I decided to do it the easy way, and not trying to loop through the array each time a click happens (since I already have a bunch of loops running and more loops = slower programs), I instead create a win counter. Since we know there are 5 bombs and 49 squares, we know if 44 squares are open then you are a winner (and didn’t blow up). So I simply created a win counter which could add anytime a square opened up and the game continued on. Then I added a reset button to let you reset the game back to default. Everything was looking pretty good and done, and since I had few more moments before I had to show what I did to my trainers I decided one last little feature. I found an iconography font source which had a nice little mine explosion graphic. Instead of using the basic ‘X’ that I was using, I swapped it out with this so when you click on a mine, you now see a little mine explosion. The first time you get it, it does take a second for the load, but each game after that it displays immediately. This is due to it being accessed on another server and not running directly on my server. Well that is all I can do for now, and it was time to move into another project.
If you want to play the new and improved version of Minesweeper you can do so here: Minesweeper v2