Freeish Time: Game Programming

I love making small games using HTML, CSS, and JS. It reminds me of the early days of the internet when independent developers would build games using Flash and ActionScript. I guess I was hungry for some “circa 2008 Newgrounds” game development!

Candy Crush is a fairly well-known game so I thought it would be a good one to copy. I prefer to work this way as it allows me to focus on the programming as opposed to the gameplay design. 

And imitation is the sincerest form of flattery, right?!

I started off with a minimal HTML document and underscore.js. Side note: I love underscore.js, I don’t think I could build anything substantial in JavaScript without it! From there I set up my stage and began working my way through the various scenes that make up the game. The scene pattern (I’m not sure if that’s its real name) is so powerful and it really helps you to separate your game into logical chunks.

I opted not to use a framework, and while the end result is obviously lower quality and less performant than something built with Unity or Unreal, I really enjoyed the whole process. Researching how game loops work and implementing different patterns in JavaScript was really interesting! I must stress that if I were working on a commercial project this would have been the wrong way to approach the task at hand.

Because I was focused on the development side of this project I decided to use emojis as the artwork (shout out to Twitter for open sourcing their emoji artwork). This meant I didn’t waste time trying to perfect the graphics before the core mechanics were solid. In the future, it wouldn’t be hard to reskin the game as I made sure to stick to the 16:9 ratio and use relative widths and heights for everything.

After hammering away at my keyboard for three days (and consuming a four-pack of Red Bull) the game was complete. 

It’s quite a light codebase as there are only 600 lines of code or so (excluding underscore.js) and I’d like to think that makes it reasonably straightforward to understand… the source is unminified so you can try to read it and make up your own mind!

It’s entirely possible to build small games using nothing but HTML, CSS, and JavaScript. You don’t necessarily need a framework if you’re building games for fun on your own, plus you’ll learn a lot along the way about how games engines work!

JavaScript’s template literals (or template strings as they’re also known) are really powerful. Being a backend developer my front end skills are a bit out of date and I hadn’t used them properly before. They’re definitely a new tool in my JavaScript arsenal.

Modern JavaScript has almost removed the need for jQuery. Between the document.querySelector and document.querySelectorAll functions and the classList and fetch APIs you can do a lot on your own. I will admit that if you need to support older browsers I think jQuery still has value!

Netlify is an awesome platform! Everything about their developer experience is stress-free. For our commercial work, we host our front ends in S3 buckets sitting behind CDNs, however, if I was going to start another project elsewhere I would definitely consider Netflify for the front end.

The recursive animation was a real pig to implement. It took me three attempts to write it in a way that didn’t suck. This has reinforced to me that mixing presentation logic and business logic is not the way to go if you want maintainable software!

Managing global state was a big problem in the beginning… I ended up simply having half a dozen globals attached to the window by the end of the project. While this is okay for a hobby game I’m not sure this approach would scale very well in time. A singleton with getters and setters would work better, although I don’t think you can escape the fact that all games need some sort of global state!

In the end, I had to change tact and implement a simple emoji replacement strategy. Ideally, the emojis would cascade down as Candy Crush does, however, I had to switch to a fading in the system. This limits the gameplay slightly (as there’s not as much variation in the board) so this is one area where I could definitely improve things!

I’m going to recommend the other members of the backend team to have a play with Netlify. I’m sure we could use it at Cube to save time and deliver prototypes with minimal fuss.

This project has reinforced my view that the split between frontend and backend will only grow larger in the future. It’s just not feasible for a full stack developer to compete with dedicated frontend and backend developers these days, especially as projects demand more from each role. That’s not to say that developers from each discipline can’t learn skills from each other by any means!