A simple jQuery plugin to create a sliding tile puzzle game.
Try and re-assemble the original picture by moving only one tile at a time into the empty space. Click or tap on a tile to move it.
Include the following CSS and JavaScript files in your <HEAD>...
<link rel="stylesheet" type="text/css" href="css/tilePuzzle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/tilePuzzle.min.js"></script>
...and assign the plugin to a div.
/* Apply plugin to an empty div, in this case a div with id 'puzzle' */
$(document).ready(function(){
$('#puzzle').tilePuzzle({
'level': 4, // a level, can be 3+
'maxWidth': 300, // could also be $(window).width() or width of puzzle container div
'imageUrl': 'images/cristo-redentor-rio-de-janeiro-brazil.jpg' // URL of an image
});
});