Got a few questions (if you notice comments, yes I am reusing an old question because apparently my previous questions weren't "good enough" [blah]). Using JQuery to make a 15 Puzzle game for class and I have the code, there are still a few things that just don't seem to wanna work.
My code will be posted below.
HTML
<!DOCTYPE html>
<html>
<!--
Homework 6: Fifteen Puzzle
You should not modify fifteen.html. Your JS code should work with an
unmodified version of this file.
-->
<head>
<title>Fifteen Puzzle</title>
<link href="fifteen.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<!-- I had to add the line above for some reason. I couldn't get it to work for a very very long time and someone pointed me to
this line of code above and it fixed all of my issues. -->
<script src="fifteen.js" type="text/javascript"></script>
</head>
<body>
<h1>Fifteen Puzzle</h1>
<p>
The goal of the fifteen puzzle is to un-jumble its fifteen squares
by repeatedly making moves that slide squares into the empty space.
How quickly can you solve it?
</p>
<div id="puzzlearea">
<!-- the following are the actual fifteen puzzle pieces -->
<div>1</div> <div>2</div> <div>3</div> <div>4</div>
<div>5</div> <div>6</div> <div>7</div> <div>8</div>
<div>9</div> <div>10</div> <div>11</div> <div>12</div>
<div>13</div> <div>14</div> <div>15</div>
</div>
<p id="controls">
<button id="shufflebutton">Shuffle</button>
</p>
<p>
American puzzle author and mathematician Sam Loyd is often falsely
credited with creating the puzzle; indeed, Loyd claimed from 1891
until his death in 1911 that he invented it.
The puzzle was actually created around 1874 by Noyes Palmer Chapman,
a postmaster in Canastota, New York.
</p>
<div id="w3c">
<a href="https://webster.cs.washington.edu/validate.php">
<img src="w3c-html.png" alt="Validate HTML5" width="88" height="31"/></a>
<a href="https://webster.cs.washington.edu/validate-css.php">
<img src="w3c-css.png" alt="Validate CSS" width="88" height="31"/></a>
</div>
</body>
</html>
CSS
body {
background-color: white;
font-family: cursive;
font-size: 14pt;
}
#controls {
padding-top: 10px;
text-align: center;
}
h1 {
margin: 10px 0px;
text-align: center;
}
/* Area where the puzzle piece are */
#puzzlearea {
font-family: sans-serif;
font-size: 32pt;
height: 400px;
width: 400px;
padding: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
}
/* Applied to the puzzle pieces*/
.puzzlepiece {
background-image: url(background.jpg);
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;
}
/* Applied to pieces that can move when mouse hovers */
.movablepiece:hover {
border:2px solid red;
color: red;
}
JQuery
var puzzle = [];
var bpiece = [];
window.onload = function() {
puzzle = $$("#puzzlearea div");
var row = 0, right = 0, top = 0;
for (var i=0;i<puzzle.length;i++){
puzzle[i].addClassName("puzzlepiece");
puzzle[i].style.float = "left";
puzzle[i].style.backgroundSize = "400px 400px";
bpiece[i] = [];
bpiece[i][0] = right;
bpiece[i][1] = top;
puzzle[i].style.backgroundPosition = "-"+bpiece[i][0]+"px -"+bpiece[i][1]+"px";
row ++;
if (row === 4){top += 100; right = 0; row = 0; } else {right +=100;}
}
var freemove = document.createElement("div");
$("puzzlearea").appendChild(freemove); //add a div that acts as the free move
blankP(freemove);
puzzle = $$("#puzzlearea div"); // "reassign" the array puzzle with the new div added
$("shufflebutton").observe('click', shufflePuzzle);
movepiece();
};
// the function blankP is used to create the blank background for the space that represents the available move
var blankP = function(bSpace){
bSpace.removeClassName("movablepiece");
bSpace.addClassName("puzzlepiece");
bSpace.style.float = "left";
bSpace.style.backgroundImage = "none";
bSpace.style.border = "2px solid white";
};
//the background_Position function is used to place the correct background piece to the number on the puzzlepiece.
var background_Position = function(piece , item){
piece.style.backgroundPosition = "-"+bpiece[item-1][0]+"px -"+bpiece[item-1][1]+"px";
};
// the regularP function is used to apply the background to a numbered piece.
var regularP = function(p){
p.addClassName("puzzlepiece");
p.style.border = "2px solid black";
p.style.backgroundImage = "url(background.jpg)";
p.style.backgroundSize = "400px 400px";
};
//the shuffluePuzzle function is used to shullfe each puzzle on the page.
function shufflePuzzle(){
var numArray = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
for (var i=puzzle.length; i>0; i){
var j = Math.floor(Math.random() * i);
var x = numArray[--i];
var test = numArray[j];
if(test == "0") {
puzzle[i].addClassName("puzzlepiece");
blankP(puzzle[i]);
puzzle[i].innerHTML = "";
}
else{
puzzle[i].innerHTML = numArray[j];
regularP(puzzle[i]);
background_Position(puzzle[i], test);
}
numArray[j] = x;
}
mopiece();
}
//this function places the class movablepiece
var movePA = function(piece){
puzzle[piece].addClassName("movablepiece");
};
//the movepiece function is used to actually move the piece that is clicked on into the space.
var movepiece = function(){
var move = this.innerHTML;
var yon = this.hasClassName('movablepiece');
var blank = 0;
if (yon){
for (var i=0;i<puzzle.length;i++){
blank = puzzle[i].innerHTML;
if (puzzle[i].innerHTML == ""){
puzzle[i].innerHTML = move;
this.innerHTML = blank;
regularP(puzzle[i]);
blankP(this);
mopiece();
background_Position(puzzle[i], move);
}
}
}
};
//the function mopiece is used to calculate which pieces are beside the space and are able to move, thus applying the 'movablepiece' class
var mopiece = function(){
for (var i=0;i<puzzle.length;i++){
puzzle[i].removeClassName("movablepiece"); }
for (var i=0; i<puzzle.length; i++){
if (puzzle[i].innerHTML == ""){
puzzle[i].removeClassName("movablepiece");
switch(i){
case 0:
movePA(i+1);
movePA(i+4);
break;
case 1:
case 2:
movePA(i-1);
movePA(i+1);
movePA(i+4);
break;
case 3:
movePA(i-1);
movePA(i+4);
break;
case 4:
movePA(i-4);
movePA(i+4);
movePA(i+1);
break;
case 5:
case 6:
case 9:
case 10:
movePA(i-4);
movePA(i+4);
movePA(i+1);
movePA(i-1);
break;
case 7:
case 11:
movePA(i-4);
movePA(i+4);
movePA(i-1);
break;
case 8:
movePA(i-4);
movePA(i+1);
movePA(i+4);
break;
case 12:
movePA(i-4);
movePA(i+1);
break;
case 13:
case 14:
movePA(i-4);
movePA(i-1);
movePA(i+1);
break;
case 15:
movePA(i-4);
movePA(i-1);
break;
}
}
puzzle[i].observe('click', movepiece); }
} ;
By the way, if you edit for my grammar or spelling on the post, please make sure you are helping me with the solution too. It frustrates to no end, sorry if you see that as helpful, but I don't because I want help with code. Already did all the grammar and spelling tests in the past and there is a reason I am a coder haha.