The Okanagan Engineering Competition is an annual event where engineering students from UBCO and Okanagan College compete in a variety of engineering challenges.
A Minesweeper Game in One Day
We were given the challenge to build a minesweeper game in only one day. We decided to use React and Next.js to build the game. This is actually a suprisingly difficult challenge as there are many edge cases that need to be handled. For example, when a user clicks on a cell that has no mines around it, all the cells around it need to be revealed. This was a great learning experience for me as I was able to learn a lot about React and Next.js.
To solve this problem, I used a recursive algorithm to reveal all the cells around the clicked cell. This was a great learning experience for me as I was able to learn a lot about recursive algorithms and how to use them to solve problems.
Rendering the Game
I wanted the game to be playable on the web, so I used Next.js to build the game. I also used TailwindCSS to style the game. This was a great learning experience for me as I was able to learn a lot about how to build web applications using Next.js and TailwindCSS. One thing that is tricky is when the board is updated it needs to be re-rendered. One of the problems I encountered is that the board would get out of sync with the game state. I was able to solve this problem by using MobX to manage the game state. I love using MobX and it’s way simpler than using Redux.
The Takeaway
We were able to build the game and win second place in the competition. I actually used a lot of the knowledge I gained in this competition for my future projects such as the Equation of Motion Solver where I used tailwind styling and the Okanagan Engineering Competition 2023 where I similar techniques to build a battleship game.
Software Utilized
