I’ve had to step back a bit from my laptop for the past few weeks- working in hospitality means I haven’t just been celebrating the holidays with my friends and family, but I’ve been working overtime to make sure everyone else gets to have a great time too!

At the end of November I attended a meetup where I took part in a JavaScript game workshop. It helped me think about the way that I approach writing code, and what order I do things in.

Full disclosure at this point- the javascript ‘game’? It’s not a fun game…

What I took away most from the workshop was that you should start with a single idea, and build on that idea to add extra features, similar to mobile-first web development. I tend to get really excited about an idea and either try to work on a million different parts of it all at once, or I go for a “top down” approach, which is sometimes worse because it starts off simple and then snowballs! I really appreciated having the project broken down into such small steps. It made each step seem more manageable [at least in the early stages!]

The Game

(I use free hosting, so you might get an ad- it’s not brilliant, I know!)

The basic idea: the ‘game’ is a guessing game- the player has to guess a number. While we were in the early stages of making the game it was a set number, and so it was the same each time we played. For the duration of the workshop the game was played in the console and with prompts. We set up the game so that if the player didn’t guess the correct number they received a hint telling them if they should guess higher or lower.

The next step: limiting guesses. At first, the game just dragged on, but limiting the number of guesses makes it a bit more exciting [exciting?? really?!]

*Our workshop ran a bit long but the venue was closing, so this was where we finished up. Over the next month I carried on in my free time…*

Next: randomizing the number. This was a pretty easy step- I used Math.floor to choose a number within range [one to ten]

The next step: making the introductory text appear on the screen, instead of in the console.

The monster next step: making the game text appear and disappear when required! Maybe it’s just that the grass is always greener, but I think this probably would have been a lot easier to do if I had been using a framework… I learned a lot working on this step because so much of my content was generated using javascript [as opposed to how I would usually create elements in html]

An unexpected step: making the game function… again! After the previous step I had to go and fix a lot of bugs… At first it was only giving you one attempt to guess the number [short game!], then it was unlimited [it just stops being a challenge at some point!] It took a lot of figuring out [and a lot of reading, re-reading, and explaining the text in my head!] to realize that I should have been putting the variable that keeps track of attempts in the outer function, instead of the inner one! There were a couple more issues to fix, but all of them were solved after a short amount of time and a good bit of googling!

If you look at the game now it looks really simple. And I guess it is. I think that’s good though, because there is a fair bit going on. I know that the javascript I’ve written for it is pretty messy, so I’d really like to revisit this project after I feel fairly comfortable with jQuery, and see how much more satisfied I am with the code that I write.

I’d really love to find out if others have projects they revisit so that they can track their progress, let me know if you do!