« Sequence of learning Java programming
15puzzles ExtJs way »

15puzzles jQuery way

15puzzles jQuery implementation source code

The purpose of this explanation is only to shift down code, because of beginning of code is not displayed.

So it will be clever do not to read it at all.

But in all cases implementation consists of index.html, 15puzzles.css and 15puzzles.js.

index.html contains all page mark up.

15puzzles.css contains css rules.

And 15puzzles.js contains all game logic and implementation.

Its also does not help. I need to do something with code highlighting plugin. Html code below is not completely displayed and also not formatted well. Please download whole project.

index.html



    
        
        

        
        
        

    
    



15puzzles jQuery way








Scramble


Sort


15puzzles.css

/*
    Document   : 15puzzle
    Created on : Oct 14, 2009, 5:52:32 PM
    Author     : yuri
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root {
    display: block;
}

body{

    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: #f5f3d9;
    color: #e42020;
    font-weight: bold;
    font-size: 18px;
    font-family: fantasy;
}

.title{
    position: absolute;
    left:92px;
    top: 2px;
}

.box{

    width: 200px;
    height: 200px;
    position: absolute;
    top: 92px;
    left: 92px;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom-width: 8px;
    border-top-width: 8px;
    border-right-color: #e08b10;
    border-left-color: #e08b10;
    border-bottom-color: #e08b10;
    border-top-color: #e08b10;
    z-index:-2;

    background-color: #eef516;
    visibility: visible;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    z-index: 2;
    border-top-style: outset;
    border-bottom-style: outset;
    border-right-color: #d41212;
    border-left-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    border-right-width: 4px;
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-top-width: 4px;
    border-left-style: outset;
    border-right-style: outset;
    background-color: #ee1515;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #fce5c7;
    text-align: center;
    vertical-align: bottom;
    line-height: 43px;
}

.freeSpace{

    width: 48px;
    height: 48px;
    visibility: visible;
    z-index: -1;
    border-right-style: dotted;
    border-left-style: dotted;
    border-bottom-style: dotted;
    border-top-style: dotted;
    border-right-color: #f894de;
    border-left-color: #f894de;
    border-bottom-color: #f894de;
    border-top-color: #f894de;
    background-color: #eef516;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    border-right-style: outset;
    border-left-style: outset;
    border-bottom-style: outset;
    border-top-style: outset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
}

.button-clicked{

    border-right-style: inset;
    border-left-style: inset;
    border-bottom-style: inset;
    border-top-style: inset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    position: absolute;
    line-height: 30px;
}

.header-menu{

    position: absolute;
    top: 0px;
    left: 500px;
    width: 500px;
    height: 50px;
    visibility: visible;
}

.header-link{

    font-style: normal;
    font-family: fantasy;
    font-size: 18px;
    color: #c91d1d;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.ads{

    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-top-style: none;
    border-right-color: #e08989;
    border-left-color: #e08989;
    border-bottom-color: #e08989;
    border-top-color: #e08989;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    position: absolute;
    top: 92px;
    left: 500px;
    width: 300px;
    height: 350px;
    visibility: visible;
}

.others-ways{

    position: absolute;
    top: 92px;
    left: 810px;
    color: #e31818;
}

.other-way-link{

    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #c91d1d;
    line-height: 40px;
}

15puzzles.js


var puzzles;
var lastDraggedPuzzle;
var freeSpace;

function FifteenPuzzles(){
    puzzles = new Array();
    this.init = init;
    this.makeDraggable = makeDraggable;
    this.makeDroppable = makeDroppable;
    this.scramble = scramble;
    this.sort = sort;
}

function Puzzle(number, x, y, isDraggable, position){
    this.number = number;
    this.x = x;
    this.y = y;
    this.isDraggable = isDraggable;
    this.position = position;

}

function FreeSpace(x, y, position){
    this.x = x;
    this.y = y;
    this.position = position;
}

function init(){
    for (var i = 1; i <= 16; i++){
        var box_x = 0;
        var x;
        if (i < 5){
            x = box_x + (i - 1) * 50;
        } else if (5 <= i && i < 9){
            x = box_x + (i - 5) * 50;
        } else if (9 <= i  && i < 13){
            x = box_x + (i - 9) * 50;
        } else if (13 <= i  && i <= 16){
            x = box_x + (i - 13) * 50;
        }
        var box_y = 0;
        var y;
        if (i < 5){
            y = box_y;
        } else if (5 <= i  && i < 9){
            y = box_y + 50;
        } else if (9 <= i  && i < 13){
            y = box_y + 100;
        } else if (13 <= i  && i <= 16){
            y = box_y + 150;
        }
        var puzzle;
        if (i == 16){
            freeSpace = new FreeSpace(x, y, i);
        }else{
            puzzle = new Puzzle(i, x, y, false, i);
            puzzles[i] = puzzle;
        }
        if (i == 16){
            appendFreeSpace(freeSpace.x, freeSpace.y);
        }else{
            appendPuzzle(puzzle.x, puzzle.y, puzzle.number);
        }
    }
    $('#box').css('height', '200');

}

//find puzzles near freespace to make draggable
function makeDraggable(){
    for (var i = 1; i < 16; i++){
        if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y){
            if (puzzles[i].position == freeSpace.position - 1){
                jQMakeRightDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 1){
                jQMakeLeftDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 4){
                jQMakeUpDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position - 4){
                jQMakeDownDraggable(puzzles[i]);
            }
        }
    }
}

function jQMakeUpDraggable(puzzle){
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'y',
        containment: [puzzle.x - 100, puzzle.y + 50, puzzle.x + 100, puzzle.y + 100],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }
    });
}

function jQMakeDownDraggable(puzzle){
    // alert("puzzle " + puzzle.number + " must be draggable");
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'y',
        containment: [puzzle.x - 100, puzzle.y + 100, puzzle.x + 100, puzzle.y + 150],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }
    });
}

function jQMakeLeftDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'x',
        containment: [puzzle.x + 50, puzzle.y - 100, puzzle.x + 50, puzzle.y + 100],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }
    });
}

function jQMakeRightDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'x',
        containment: [puzzle.x + 100, puzzle.y - 100, puzzle.x + 150, puzzle.y + 100],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }

    });
}

function makeDroppable(){
    $('#freeSpaceId').droppable({
        drop: function() {
            var xTemp = freeSpace.x;
            var yTemp = freeSpace.y;
            var positionTemp = freeSpace.position;

            freeSpace.x = lastDraggedPuzzle.x;
            freeSpace.y = lastDraggedPuzzle.y;
            freeSpace.position = lastDraggedPuzzle.position;

            lastDraggedPuzzle.x = xTemp;
            lastDraggedPuzzle.y = yTemp;
            lastDraggedPuzzle.position = positionTemp;

            puzzles[lastDraggedPuzzle.number] = lastDraggedPuzzle;
            //destroy all draggable and dropable
            $("#box > *").draggable('destroy');
            $("#box > *").droppable('destroy');
            $('#freeSpaceId').remove();
            appendFreeSpace(freeSpace.x, freeSpace.y);

            $('#puzzleId' + lastDraggedPuzzle.number).remove();
            appendPuzzle(lastDraggedPuzzle.x, lastDraggedPuzzle.y, lastDraggedPuzzle.number);
            makeDraggable();
            makeDroppable();
        }
    });

}

function scramble(){
    $("#box > *").draggable('destroy');
    $("#box > *").droppable('destroy');
    $('#freeSpaceId').remove();
    $('.puzzle').remove();
    var xTemp = freeSpace.x;
    var yTemp = freeSpace.y;
    var positionTemp = freeSpace.position;

    var n = Math.ceil(Math.random() * 15);
    var randomPuzzle = puzzles[n];
    freeSpace.x = randomPuzzle.x;
    freeSpace.y = randomPuzzle.y;
    freeSpace.position = randomPuzzle.position;

    randomPuzzle.x = xTemp;
    randomPuzzle.y = yTemp;
    randomPuzzle.position = positionTemp;

    appendFreeSpace(freeSpace.x, freeSpace.y);

    for (var i = 0; i < 20; i++){
        var randomPuzzle1 = puzzles[Math.ceil(Math.random() * 15)];
        var randomPuzzle2 = puzzles[Math.ceil(Math.random() * 15)];
        xTemp = randomPuzzle1.x;
        yTemp = randomPuzzle1.y;
        positionTemp = randomPuzzle1.position;

        randomPuzzle1.x = randomPuzzle2.x;
        randomPuzzle1.y = randomPuzzle2.y;
        randomPuzzle1.position = randomPuzzle2.position;

        randomPuzzle2.x = xTemp;
        randomPuzzle2.y = yTemp;
        randomPuzzle2.position =positionTemp;
    }

    for (i = 1; i < 16; i ++){
        appendPuzzle(puzzles[i].x, puzzles[i].y, puzzles[i].number);
    }
    this.makeDraggable();
    this.makeDroppable();

}

function sort(){
    $("#box > *").draggable('destroy');
    $("#box > *").droppable('destroy');
    $('#freeSpaceId').remove();
    $('.puzzle').remove();
    puzzles = new Array();
    this.init();
    this.makeDraggable();
    this.makeDroppable();
}

function appendPuzzle(x, y, number){
    $('#box').append('

'
        + number
        + '


');
}

function appendFreeSpace(x, y){
    $('#box').append('

'
        + '


');
}
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • RSS
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • BlinkList
  • blogmarks
  • DZone
  • E-mail this story to a friend!
  • LinkaGoGo
  • Live
  • MisterWong
  • MisterWong.DE
  • Reddit
  • StumbleUpon
  • Technorati
  • ThisNext
  • Tumblr

Related posts:

  1. 15puzzles ExtJs way
  2. 15puzzles Flex way
  3. 15puzzles YUI way
  4. 15puzzles GWT way
  5. TOP COUNTRIES WITH THE HIGHEST INTERNET PENETRATION RATE
  6. 5 ways to 15puzzles
  7. Site traffic range by Alexa rank

This entry was posted on Sunday, November 8th, 2009 at 5:30 pm and is filed under RIA Frameworks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply