Match Three Game

So I’ve had a go at making a Match Three style game, similar to Bejeweled and Candy Crush. Check out the work in progress here! I figured it would be a good chance to play around with JavaScript and the Canvas element a bit more. In the end I used RequireJS for managing dependencies, FabrisJS for drawing on the canvas and Underscore for its more convenient array methods. Everything else is just vanilla JS.

One major benefit of this little toy project is that I finally used JavaScript promises! When initially implementing the animation of the gems, I used callbacks from when an animation was complete to start the next ‘wave’ of animations. That quickly got so complex that it was really hard to reason about the board state. Also I had to somehow manage simultaneous animation of multiple gems, and wait until ALL of them had finished. After a brief pub chat of me relaying my troubles to friends and colleagues, I was told to check out promises! And they’re amazing!! They solved all my problems pretty quickly, especially using Promise.all for running simultaneous asynchronous operations and signalling when all of them have finished.

Another thing that helped with development was that I added a little map loader which allowed me to define test cases (e.g. of just one row with one possible match). This helped immensely with checking that the matching logic and animation behaviour worked as intended. Ideally I would be able to write some sort of tests, but for the moment these little test maps work pretty well.