Seattle Web Design - Swapping 15 Puzzle – Sliding Tile Game

Seattle Web Design > Posts > JavaScript > Swapping 15 Puzzle – Sliding Tile Game

Swapping 15 Puzzle – Sliding Tile Game

Posted on April 22nd, 2015 in JavaScript By Kianoush Moradian

This is based on JavaScript, Prototype, JQuery solution. This projects covers moves counter, Changing picture, Hide/Show numbers, and Timer. Feel free to get the code from my website and play around it. I have used innerHTML in some lines.

HTML File:

<!doctype html>
<html>
   <!–
   AD 320, JavaScript Exam
   You should not modify puzzle.html. Your JS code shall be evaluated against an
   unmodified version of this file.
   –>
   <head>
       <title>Tiling Puzzle</title>
       <meta charset='utf-8'>

       <!– stop the web browser from ever caching this page or its images –>
       <meta http-equiv="Cache-Control" content="no-cache" />
       <meta http-equiv="Pragma" content="no-cache" />
       <meta http-equiv="Expires" content="0" />

<!– instructor-provided CSS stylesheet; do not modify –>
<link href="puzzle.css" type="text/css" rel="stylesheet" />

<!– link to Prototype library; do not modify –>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js" type="text/javascript"></script>

       <!– your file –>
       <script src="puzzle.js" type="text/javascript"></script>
   </head>

   <body>
       <h1>AD 320 – Tiling Puzzle</h1>
       <h2>JavaScript Exam</h2>

       <p class="explanation">
           This is a tiling puzzle that is somewhat a cross between a jigsaw puzzle and the fifteen puzzle.
       </p>

           <p class="instructions">
               Click on a piece to move it to the empty location.
           </p>

           <div id="controls">
               <button id="shufflebutton">Shuffle</button>
           </div>

       </div>

   </body>
</html>

CSS File:

/*
AD 320 – Tiling Puzzle, JavaScript exam

You should not modify this style sheet file.
*/

body {
   background-color: white;
   font-family: "Times New Roman";
   font-size: 14pt;
}

#controls, #overall, #puzzlearea {
width: 400px;
}

#controls, .instructions {
padding-top: 10px;
text-align: center;
}

h1 {
margin: 0px;
}

h2 {
margin: 0px;
}

/* Used to center the puzzle. */
#overall {
margin-left: auto;
margin-right: auto;
}

/* The area that holds the 15 puzzle pieces. */
#puzzlearea {
   font-family: sans-serif;
   font-size: 32pt;
   height: 400px;
   margin-bottom: 10px;
   padding: 0px;
   position: relative;
}

/* This class should be applied to each of the 15 puzzle pieces. */
.puzzlepiece {
   background-repeat: no-repeat;
   border: 2px solid black;
   cursor: default;
   height: 96px;
   line-height: 96px;
   position: absolute;
   text-align: center;
   vertical-align: middle;
   width: 96px;
}

/* This indicates which piece will be moved. */
.puzzlepiece:hover {
   border-color: red;
   color: #009900;
   text-decoration: underline;
}

JavaScript File (JS):

/*
AD320 – Spring Quarter – North Seattle College
Exam#1: Tiling Puzzle, JavaScript
Author: Kianoush Moradian
@version: 2015-8

This program runs 15 Puzzle Game perfectly based on JavaScript, Prototype
I have added
1- Hiding numbers
2- Changing back image
3- Game statistics

var mainDiv;
var counter =0; // initializing counter

// This is the main function to initialize the game
window.onload = function(){

// window.alert('Welcome to page ');

   mainDiv = $('puzzlearea');
   var myURL = "url('http://kianoushm.com/test/images/world.jpg')";
   setItUp(myURL);
   document.getElementById("shufflebutton").onclick = shuffleIt;

   //adding counter to the html page by using innerHTML
   var cr = document.createElement('div');
   cr.id = 'myCounter';
   $('overall').appendChild(cr);
   $('myCounter').style.height = "20px";
   $('myCounter').style.background = "rgba(176,196,222,0.6)";
   $('myCounter').style.marginTop = "10px";
   $('myCounter').style.padding = "5px";
   $('myCounter').style.border = "thin dotted black";
   $('myCounter').innerHTML= "Counter: "
   $('myCounter').innerHTML= "Counter: " + counter.toString();

   //adding timer to the html page by suing innerHTML
   var ti = document.createElement('div');
   ti.id = 'myTimer';
   $('overall').appendChild(ti);
   $('myTimer').style.height = "20px";
   $('myTimer').style.background = "rgba(176,196,222,0.6)";
   $('myTimer').style.marginTop = "5px";
   $('myTimer').style.padding = "5px";
   $('myTimer').style.border = "thin dotted black";
   $('myTimer').innerHTML= "Counter: "
   $('myTimer').innerHTML= " Timer: <span id='minutes'>00</span>:<span id='seconds'>00</span>";

   //adding select options to our page
   var sl = document.createElement('select');
   sl.name = 'sl';
   sl.id = 'sl';
   $('controls').appendChild(sl);
   var option1 = document.createElement("option");
        option1.text="The World";
   option1.value="world";
   sl.appendChild(option1);
   var option2 = document.createElement("option");
        option2.text="Happy";
   option2.value="happy";
   sl.appendChild(option2);
   var option3 = document.createElement("option");
        option3.text="Love";
   option3.value="love";
   sl.appendChild(option3);
   var option4 = document.createElement("option");
        option4.text="creepy";
   option4.value="creepy";
   sl.appendChild(option4);
   var option5 = document.createElement("option");
        option5.text="diffuse";
   option5.value="diffuse";
   sl.appendChild(option5);

   sl.onchange = runSl;

   //Adding check box to our page
   var cb = document.createElement('input');
   cb.type='checkbox';
   cb.name='cbox';
   cb.value='cbox';
   cb.id='cbId';
   $('controls').appendChild(cb);

   var label = document.createElement('label')
   label.htmlFor = "cbId";
   label.appendChild(document.createTextNode('Show/Hide'));
   $('controls').appendChild(label);

   cb.onclick=runCb;


   } // End of onload function


   //This is my Timer
   var sec = 0,
    timeoutHandler;

function pad(val) {
return val > 9 ? val : "0" + val;
}

function pausePad() {
clearTimeout( timeoutHandler );
}

function resumePad() {
pausePad();
runPad();
}

function resetPad() {
sec = 0;
resumePad();
}

   mainDiv.getElementsByTagName('div')[2].style.left= '200px';
   mainDiv.getElementsByTagName('div')[2].style.top='0px';
   mainDiv.getElementsByTagName('div')[2].style.backgroundPosition='-200px 0px';

   mainDiv.getElementsByTagName('div')[3].style.left= '300px';
   mainDiv.getElementsByTagName('div')[3].style.top='0px';
   mainDiv.getElementsByTagName('div')[3].style.backgroundPosition='-300px 0px';

   mainDiv.getElementsByTagName('div')[4].style.left= '0px';
   mainDiv.getElementsByTagName('div')[4].style.top='100px';
   mainDiv.getElementsByTagName('div')[4].style.backgroundPosition='0px -100px';

   mainDiv.getElementsByTagName('div')[5].style.left= '100px';
   mainDiv.getElementsByTagName('div')[5].style.top='100px';
   mainDiv.getElementsByTagName('div')[5].style.backgroundPosition='-100px -100px';

   mainDiv.getElementsByTagName('div')[6].style.left= '200px';
   mainDiv.getElementsByTagName('div')[6].style.top='100px';
   mainDiv.getElementsByTagName('div')[6].style.backgroundPosition='-200px -100px';

   mainDiv.getElementsByTagName('div')[7].style.left= '300px';
   mainDiv.getElementsByTagName('div')[7].style.top='100px';
   mainDiv.getElementsByTagName('div')[7].style.backgroundPosition='-300px -100px';

   mainDiv.getElementsByTagName('div')[8].style.left= '0px';
   mainDiv.getElementsByTagName('div')[8].style.top='200px';
   mainDiv.getElementsByTagName('div')[8].style.backgroundPosition='0px -200px';

   mainDiv.getElementsByTagName('div')[9].style.left= '100px';
   mainDiv.getElementsByTagName('div')[9].style.top='200px';
   mainDiv.getElementsByTagName('div')[9].style.backgroundPosition='-100px -200px';

   mainDiv.getElementsByTagName('div')[10].style.left= '200px';
   mainDiv.getElementsByTagName('div')[10].style.top='200px';
   mainDiv.getElementsByTagName('div')[10].style.backgroundPosition='-200px -200px';

   mainDiv.getElementsByTagName('div')[11].style.left= '300px';
   mainDiv.getElementsByTagName('div')[11].style.top='200px';
   mainDiv.getElementsByTagName('div')[11].style.backgroundPosition='-300px -200px';

   mainDiv.getElementsByTagName('div')[12].style.left= '0px';
   mainDiv.getElementsByTagName('div')[12].style.top='300px';
   mainDiv.getElementsByTagName('div')[12].style.backgroundPosition='0px -300px';

   mainDiv.getElementsByTagName('div')[13].style.left= '100px';
   mainDiv.getElementsByTagName('div')[13].style.top='300px';
   mainDiv.getElementsByTagName('div')[13].style.backgroundPosition='-100px -300px';

   mainDiv.getElementsByTagName('div')[14].style.left= '200px';
   mainDiv.getElementsByTagName('div')[14].style.top='300px';
   mainDiv.getElementsByTagName('div')[14].style.backgroundPosition='-200px -300px';

   }

   //generate random numbers 1~ 15
   function myRandom(){
       var arr = []
   while(arr.length < 15){
   var randomnumber=Math.ceil(Math.random()*15)
   var found=false;
    for(var i=0;i<arr.length;i++){
   if(arr[i]==randomnumber){found=true;break}
   }
   if(!found)arr[arr.length]=randomnumber;
   }
   return arr;
   }

   //This function hides and shows numbers
   function runCb() {

   var type;
   if($('cbId').checked)
       {

   for (i=0;i<15; i++)
   mainDiv.getElementsByTagName('div')[i].style.color = "rgba(0,0,0,0)"; // using alpha transparency
   } else {
   for (i=0;i<15; i++)
   mainDiv.getElementsByTagName('div')[i].style.color = "rgba(0,0,0,1)";
   }
   }

   var eLeft = '300px'; //default empty position
   var eTop = '300px';
   var tempLeft, tempTop; // temporary position

//This function moves tiles
function setup() {

   counter++;
   //window.alert("left: "+this.style.left+", top: "+this.style.top+"");
   $('myCounter').innerHTML= "Counter: " + counter.toString();

   tempLeft = this.style.left;
   tempTop = this.style.top;
   this.style.left = eLeft;
   this.style.top = eTop;
   eLeft = tempLeft;
   eTop = tempTop;

}

   //I do not know why it does not work :'(
   function blink(selector){
   $(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
   });
   }

   // when the shuffle button is pressed, this function is called
   function shuffleIt(){

   stopTimer();

   counter =0; //reset
   $('myCounter').innerHTML= "Counter: " + counter.toString();

   eLeft = '300px'; //reset empty position
   eTop = '300px';

   var myArray = $('puzzlearea').getElementsByTagName('div');
   //myArray = shuffle(myArray);
   giveCoordinates(myArray);

   }

   //Set coordinates to tiles.
   function giveCoordinates(array){
   //This is how I make a random number 1 ~ 15

   var arr = []
   while(arr.length < 15){
   var randomnumber=Math.ceil(Math.random()*15)
   var found=false;
   for(var i=0;i<arr.length;i++){
   if(arr[i]==randomnumber){found=true;break}
   }
   if(!found)arr[arr.length]=randomnumber;
   }

   array[arr[14]-1].style.left= '0px';
   array[arr[14]-1].style.top='0px';
   array[arr[13]-1].style.left= '100px';
   array[arr[13]-1].style.top='0px';
   array[arr[12]-1].style.left= '200px';
   array[arr[12]-1].style.top='0px';
   array[arr[11]-1].style.left= '300px';
   array[arr[11]-1].style.top='0px';
   array[arr[10]-1].style.left= '0px';
   array[arr[10]-1].style.top='100px';
   array[arr[9]-1].style.left= '100px';
   array[arr[9]-1].style.top='100px';
   array[arr[8]-1].style.left= '200px';
   array[arr[8]-1].style.top='100px';
   array[arr[7]-1].style.left= '300px';
   array[arr[7]-1].style.top='100px';
   array[arr[6]-1].style.left= '0px';
   array[arr[6]-1].style.top='200px';
   array[arr[5]-1].style.left= '100px';
   array[arr[5]-1].style.top='200px';
   array[arr[4]-1].style.left= '200px';
   array[arr[4]-1].style.top='200px';
   array[arr[3]-1].style.left= '300px';
   array[arr[3]-1].style.top='200px';
   array[arr[2]-1].style.left= '0px';
   array[arr[2]-1].style.top='300px';
   array[arr[1]-1].style.left= '100px';
   array[arr[1]-1].style.top='300px';
   array[arr[0]-1].style.left= '200px';
   array[arr[0]-1].style.top='300px';

   }

Click here to cancel reply.

Swapping 15 Puzzle – Sliding Tile Game

Leave a Reply