jQuery Mona Lisa "15" Slider Game

$(document).ready() { ... }

$(document).ready(function()
{

var zi = 1;
var EmptySquare = 16;

function Move(clicked_square)
{
    // Locate movable tiles based on where the empty spot is, we can only move the four surrounding squares
    var movable = false;

// Swap x/y between the clicked square and the currently empty square
    var oldx = $("#board").children("div:nth-child(" + EmptySquare + ")").css("left");
    var oldy = $("#board").children("div:nth-child(" + EmptySquare + ")").css("top");
    var newx = $(clicked_square).css("left");
    var newy = $(clicked_square).css("top");

// The clicked square is north of the empty square
    if (oldx == newx && newy == (parseInt(oldy) - 128) + 'px')
        movable = true;

// The clicked square is south of the empty square
    if (oldx == newx && newy == (parseInt(oldy) + 128) + 'px')
        movable = true;

// The clicked square is west of the empty square
    if ((parseInt(oldx) - 128) + 'px' == newx && newy == oldy)
        movable = true;

// The clicked square is east of the empty square
    if ((parseInt(oldx) + 128) + 'px' == newx && newy == oldy)
        movable = true;

if (movable)
    {
        // Increment zindex so the new tile is always on top of all others
        $(clicked_square).css("z-index", zi++);

// Swap squares... Animate new square into old square position
        $(clicked_square).animate({ left: oldx, top: oldy }, 200, function(){
            //Move old square into new square position
            $("#board").children("div:nth-child(" + EmptySquare + ")").css("left", newx);
            $("#board").children("div:nth-child(" + EmptySquare + ")").css("top", newy);
        });
    }
}

$.fn.extend({ fifteen:

function(square_size)
    {
        var targetElement = "#" + $(this).attr("id"); // Grab the id of the HTML element into which we are placing the game, it is the selector - "#target" from  $("#target").fifteen(32);
        var sqSize = square_size + 'px';
        var boardSize = (square_size * 4) + 'px';
        $(targetElement).html("<div id = 'board'></div>"); // Inject DIV into target, this is our game board
//        $("div", targetElement).attr("id", "board");    // Add attribute id = 'board' using jQuery's attr() method, so we can refer to the game board by "#board" in code below
        $("#board").css({ position:'absolute', width: boardSize, height: boardSize, border: '1px solid gray' });
        // Populate the game board's HTML container with 15 squares
        for (var i = 0; i < 16; i++) {
            $("#board").append("<div style = 'position: absolute; left: " + ((i % 4) * square_size) + "px; top: " + Math.floor(i / 4) * square_size + "px; width: " + square_size + "px; height: " + square_size + "px; text-align: center; line-height: 128px; -moz-box-shadow: inset 0 0 20px #555555; -webkit-box-shadow: inset 0 0 20px #555555; box-shadow: inset 0 0 20px #555555; background: #ffffff url(http://www.learnjquery.org/newsletter/monalisa.png) " + (-(i % 4) * square_size) + "px " + -Math.floor(i / 4) * square_size + "px no-repeat !important'></div>"); }
        // Empty up the 16th square, as the starting point
        $("#board").children("div:nth-child(" + EmptySquare + ")").css({backgroundImage: "", background: "#ffffff"});
        // Attach click event to each square
        $("#board").children("div").click(function() { Move(this); });
    }

});

$("#target").fifteen(128); // Create a game with 32x32 squares inside "#target" div

});

HTML

Initialize the Game

You have my permission to use this code in your own projects.

jQuery Image Block Sliding Game (with source code)

Image Sliding Game