15puzzles YUI way
Monday, November 9th, 2009 at
3:29 pm
15puzzles YUI 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 YUI 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: #f1e2ef;
color: #784280;
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: #26244e;
border-left-color: #26244e;
border-bottom-color: #26244e;
border-top-color: #26244e;
z-index:-2;
background-color: #aa97e3;
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: #8d41a2;
border-left-color: #8d41a2;
border-bottom-color: #8d41a2;
border-top-color: #8d41a2;
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: #9229ab;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #e9d5ef;
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: #7827ce;
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: #8c4e9b;
border-bottom-color: #8c4e9b;
border-top-color: #8c4e9b;
background-color: #9242a8;
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: #dfc3e8;
font-weight: bold;
border-left-color: #8c4e9b;
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: #8c4e9b;
border-bottom-color: #8c4e9b;
border-top-color: #8c4e9b;
background-color: #9242a8;
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: #dfc3e8;
font-weight: bold;
border-left-color: #8c4e9b;
margin-right: 30px;
margin-left: 30px;
margin-bottom: 30px;
margin-top: 30px;
text-indent: 1px;
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: #784280;
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: #784280;
}
.other-way-link{
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #784280;
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 YAHOO.util.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 YAHOO.util.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 YAHOO.util.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 YAHOO.util.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 YAHOO.util.DDTarget('freeSpaceId', 'puzzles');
}
function scramble(){
var box = new YAHOO.util.Element('box');
while (box.hasChildNodes()) {
box.removeChild(box.get('firstChild'));
}
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(){
var box = new YAHOO.util.Element('box');
while (box.hasChildNodes()) {
box.removeChild(box.get('firstChild'));
}
puzzles = new Array();
this.init();
this.makeDraggable();
this.makeDroppable();
}
function appendPuzzle(x, y, number){
var box = new YAHOO.util.Element('box');
var puzzle = document.createElement('div');
puzzle.id = 'puzzleId' + number;
puzzle.innerHTML = number;
puzzle.className = 'puzzle';
puzzle.setAttribute('style', 'position:absolute; left:' + x + 'px; top:' + y +'px;')
box.appendChild(puzzle);
}
function appendFreeSpace(x, y){
var box = new YAHOO.util.Element('box');
var freeSpace = document.createElement('div');
freeSpace.id = 'freeSpaceId';
freeSpace.className = 'freeSpace';
freeSpace.setAttribute('style', 'position:absolute; left:' + x + 'px; top:' + y +'px;')
box.appendChild(freeSpace);
}
function dragDropCommon(){
//alert ('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;
//destroy all draggable and dropable
var box = new YAHOO.util.Element('box');
box.removeChild(new YAHOO.util.Element('freeSpaceId'));
appendFreeSpace(freeSpace.x, freeSpace.y);
box.removeChild(new YAHOO.util.Element('puzzleId' + lastDraggedPuzzle.number));
appendPuzzle(lastDraggedPuzzle.x, lastDraggedPuzzle.y, lastDraggedPuzzle.number);
makeDraggable();
makeDroppable();
}
Filed under: RIA Frameworks
Like this post? Subscribe to my RSS feed and get loads more!
Leave a Reply