15puzzles ExtJs way
15puzzles implemented using Ext-Js
index.html
15puzzles Ext-Js way
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: #e6f8f6;
color: #2736a4;
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: #416a3d;
border-left-color: #416a3d;
border-bottom-color: #416a3d;
border-top-color: #416a3d;
z-index:-2;
background-color: #83eead;
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: #1224d4;
border-left-color: #1224d4;
border-bottom-color: #1224d4;
border-top-color: #1224d4;
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: #2715ee;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #86dfd5;
text-align: center;
vertical-align: middle;
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: #16f56d;
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: #2715ee;
border-bottom-color: #2715ee;
border-top-color: #2715ee;
background-color: #2715ee;
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: #86dfd5;
font-weight: bold;
border-left-color: #2715ee;
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: #facf32;
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: #2736a4;
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: #2736a4;
}
.other-way-link{
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #2736a4;
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);
}
}
}
//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){
makeRightDraggable(puzzles[i]);
} else if (puzzles[i].position == freeSpace.position + 1){
makeLeftDraggable(puzzles[i]);
} else if (puzzles[i].position == freeSpace.position + 4){
makeUpDraggable(puzzles[i]);
} else if (puzzles[i].position == freeSpace.position - 4){
makeDownDraggable(puzzles[i]);
}
}
}
}
function makeUpDraggable(puzzle){
//alert("puzzle " + puzzle.number + " must be draggable");
var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
isTarget : false
});
draggablePuzzle.startDrag = function (x, y){
lastDraggedPuzzle = puzzle;
}
draggablePuzzle.onDragDrop = function (e, target){
dragDropCommon();
}
draggablePuzzle.setXConstraint(0, 0);
draggablePuzzle.setYConstraint(50, 0, 5);
}
function makeDownDraggable(puzzle){
//alert("puzzle " + puzzle.number + " must be draggable");
var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
isTarget : false
});
draggablePuzzle.startDrag = function (x, y){
lastDraggedPuzzle = puzzle;
}
draggablePuzzle.onDragDrop = function (e, target){
dragDropCommon();
}
draggablePuzzle.setXConstraint(0, 0);
draggablePuzzle.setYConstraint(0, 50, 5);
}
function makeLeftDraggable(puzzle){
//alert("puzzle " + puzzle.number + " must be draggable");
var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
isTarget : false
});
draggablePuzzle.startDrag = function (x, y){
lastDraggedPuzzle = puzzle;
}
draggablePuzzle.onDragDrop = function (e, target){
dragDropCommon();
}
draggablePuzzle.setXConstraint(50, 0, 5);
draggablePuzzle.setYConstraint(0, 0);
}
function makeRightDraggable(puzzle){
//alert("puzzle " + puzzle.number + " must be draggable");
var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
isTarget : false
});
draggablePuzzle.startDrag = function (x, y){
lastDraggedPuzzle = puzzle;
}
draggablePuzzle.onDragDrop = function (e, target){
dragDropCommon();
}
draggablePuzzle.setXConstraint(0, 50, 5);
draggablePuzzle.setYConstraint(0, 0);
}
function makeDroppable(){
var droppableFreeSpace = new Ext.dd.DDTarget('freeSpaceId', 'puzzles');
}
function scramble(){
//$("#box > *").draggable('destroy');
//$("#box > *").droppable('destroy');
Ext.get('freeSpaceId').remove();
Ext.select('.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(){
Ext.get('freeSpaceId').remove();
Ext.select('.puzzle').remove();
puzzles = new Array();
this.init();
this.makeDraggable();
this.makeDroppable();
}
function appendPuzzle(x, y, number){
var box = Ext.get('box');
Ext.DomHelper.append(box,'
'
+ number
+ '
');
}
function appendFreeSpace(x, y){
var box = Ext.get('box');
Ext.DomHelper.append(box, '
'
+ '
')
}
function dragDropCommon(){
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;
Ext.get('freeSpaceId').remove();
appendFreeSpace(freeSpace.x, freeSpace.y);
Ext.get('puzzleId' + lastDraggedPuzzle.number).remove();
appendPuzzle(lastDraggedPuzzle.x, lastDraggedPuzzle.y, lastDraggedPuzzle.number);
makeDraggable();
makeDroppable();
}
Related posts:
- 15puzzles Flex way
- 15puzzles jQuery way
- 15puzzles YUI way
- 15puzzles GWT way
- TOP COUNTRIES WITH THE HIGHEST INTERNET PENETRATION RATE
- 5 ways to 15puzzles
- Site traffic range by Alexa rank
