A sliding tile puzzle using pictures sourced from Flickr. The tiles are moved either by clicking them or by dragging them with the mouse.
Technologies used in this project are HTML, CSS, and JavaScript, augmented with the jQuery and jQuery UI libraries and the Materialize framework. The Flickr API is queried for photos matching tags supplied by the user. HTML canvas elements are used to render the images onto individual tiles.
The greatest challenge I had to overcome was getting drag and drop to work, which is ironic because I had actually been experimenting with drag and drop previously and thought sliding tiles would be a piece of cake.
Things left to do:
- Enlarge puzzle to fit screen.
- Make puzzle difficulty (# of pieces) adjustable.
- Make responsive.
- Display busy icon while waiting for images to load.