Minesweeper

I recently finished my first web browser game during my third week of General Assembly's Software Engineering Immersive boot camp. For our first project, we were required to make a browser game using the DOM. I used strictly HTML, CSS, and JavaScript to complete this project that is hosted via GitHub Pages here.

During our week-long development, I learned a lot of new things about coding and about myself. To name a few:

• I really enjoy writing pseudocode. It helps me think about how to approach a function - usually breaking it down to a conditional check or a type of loop.
• I struggled with conceptualizing certain parts of my game - and it helped to draw it out on a piece of paper.
• I crave concise, clean code. Maybe a little too much, to the point where someone else might not be able to read it easily.

Anyway, overall I had a lot of fun making my minesweeper game. Growing up, I loved playing minesweeper on my brother's PC. I didn't understand the inexorable logic behind it until much later in years though. And I certainly didn't think I would ever write the code to this game!

I won't go into too much detail because you can see all the code and commits history on my GitHub repo here. But I want to mention some of my favorite pieces of code that took quite a while to think about, and only a few minutes to type out, then hours of endless manual testing!

One of my first stumbling [code] blocks was the placeNumbers function. There was a mental disconnect between me and my code of how to place the correct number to denote how many bombs were adjacent to a square. I kept at it for hours, until I finally made a "simple" switch of the conditional. Originally I checked to find the bomb, and I switched to checking to find the safe square. As soon as I did that, everything fell into place. My original logic of incrementing numbers had been right. I just need to flip the type of square I was looking for!

I also hold a soft spot for my next function: checkNeighbors. I wanted to have a larger reveal of safe squares per click because it was coming tedious to test my game while clicking every single square. I started with a recursive function - and it worked! To a degree. It worked perhaps a little too well for my tiny 8 x 8 board. So I decided to revert it to a regular function. And I hunkered down to refactor the list of conditional checking down from 8 lines to just 3 using the assignment operators, && and || . It was a lesson well worth the 3-minute read on MDN.

Finally, when I had achieve my Minimally Viable Product. I focused a majority of my free time on fixing a 'bug' I thought I had. As an iPhone user, I realized very quickly that my contextmenu event listener wasn't working. I had assumed it didn't work on any devices. Thankfully, a classmate offered to test my game on his Android phone and confirmed the contextmenu was in fact working - just not on iOS.

With that feedback, I took a deep dive into iOS touch and hold. Reading and re-reading the Touch object documentation on MDN. Finally, after much experimenting and also reading Stack Overflow, I came up with the touch functions that allowed me to touch and hold a square to add a flag on my iOS devices. I can't report honestly that I am some Touch expert right now, but I am happy with what I was able to accomplish with my current knowledge base.

I hope to make more updates to my game as I learn more JavaScript and other tools to make this minesweeper as fun and as intuitive and accessible as possible.