I built QWERTYBall as a project in bootcamp. To make it work, I'd furiously google an example of the feature I wanted, then just as furiously I'd add whatever framework, css, and code used in that example to my codebase. The resulting game worked great, but under the hood it was a hot mess. I dreaded a potential employer taking a look at my github repo and seeing the slap-dash approach I took to make the game work.
Step 1: Organize it
The first step I took to refactor the game was just to organize it. It had been months since I wrote the code, and I wasn't sure how everything worked. I used on my all-time favorite VSCode extension, Fold Plus, to collapse all the code and just see which functions were called and in what order. Unsurprisingly, all the functions were out of order, but I moved everything around so that they were as sequential as possible.
Next, I commented out the code into sections. Because it's a game, I organized the code in the following manner:
- Initialize Variables
- Launch App
- Start Game
- Game Play
- Game Over
- Save Game
At this point, I found that I still didn't truly understand the structure well enough, so I decided to diagram it using LucidChart. Here's the diagram I created:
This was a total game-changer. I felt as though I finally had a bird's eye view on how the code was structured. Seeing it this way helped me realize what code was superfluous, and what code was not even used in the first place. I ended up making several successive versions of the diagram because I kept finding new ways to clean up the code.
This will be the first installment of a series devoted to this refactor. Next up, I'll detail how I reduced my CSS code from a ridiculous 8,053 lines to just 615 252--and I have further to go!
Top comments (0)