JavaScript Jigsaw Puzzle

A jigsaw puzzle, yesterday

Thursday 9th of March 2017

Recently I set myself the challenge of building a jigsaw puzzle game using HTML5 canvas. You know, for fun.

I could talk at length about the creative process behind this, or the technical challenges, but hey, it's just a jigsaw. Go play if you're interested.

I think the concept of a jigsaw puzzle is fairly self explanatory, but here's a list of features in case you missed any.

  • Difficulty setting - choose the number of pieces in your puzzle.
  • Choose your own image to use as the puzzle.
  • Fully mobile responsive, handles resizes and everything (may not be usable on very small screens if you crank up the number of pieces, obviously).

If I'm entirely honest, the UI isn't as nice as it could be. The reason for that is that this was partly a personal speed challenge - I built the initial puzzle code in a few hours, then spent a couple more tweaking and improving it. All told it probably took me less than 6 hours to build. At some point I might make it look a little nicer, but until then I think it's okay.

I did discover a fun bug during playtesting. Because the pieces of the puzzle are created and drawn onto the canvas in order (i.e. left to right, then repeat on each row from top to bottom) it meant if you stacked all the pieces along a row (e.g. the top edge) the one drawn at the top would always be the one at the right, and the next one after it the one second from the right, and so on. To fix this I simply changed the draw order of a piece if it is moved - meaning that as you move pieces around they get more mixed up in terms of their stacking order.

Code's on my github as usual, if you're interested.

Related