The aim of the project is to create a version of the classic jigsaw puzzle game playable online. To make it simple it was decided that the puzzle will be formed using rectangular tiles. It should work on mobile devices and allow the user to form a puzzle from pictures on their devices or by shooting a new picture.
HTML5 canvas element is used to present a puzzle picture and a solution picture. A set of about 20 preset images is used for the game as seed and a random image is picked each time the game is played
HTML5 canvas drawImage is extermely flexible, it supports drawing a sub-region of a picture on to a sub-region of the canvas. Once we determine a tile size (the source picture is divided into 3 tile x 3 tile grid for now) we can draw out the puzzle by selecting subregions of the image and drawing it out to the puzzle canvas. For generating the puzzle we use the fisher-yates shuffle to randomize the tiles
We track the mousedown event to find out which tile has been selected. With every mousemove subsequently we draw the dragged tile at the current mouse location. On mouseup we swap the dragged tile and the tile under the mouse. Since the interactions are simple mapping touch events on mobile devices to the mouse event equivalent worked well with minminal effort
While dragging a tile we draw out the target tile in orange to give the player some idea of swapping that may happen. On mouseup we play a sound to indicate the tiles were swapped
All the tiles remember their correct location and current location as row, column grid coordinates. Each time the user swaps tiles, if the current location matches the correct location for each of the tiles then the user has compelted the puzzle. A replay button is presented which will load in the next picture
The idea is to make use of as much screen space as possible regardless of picture size or screen size. It involved sizing the puzzle and solution canvases to occupy most of the page size and using css to center them both.
There are several resources online that make available images and sound assets royalty free. I used the following websites: flickr, openphoto, morguefile , freesound . I am thankful for these resources that improve the game experience
HTML5 input tag supports loading user files and on mobile devices this also make use of the camera to take a picture and create a new file. This did not require any additional work to implement