I can't figure out how to get script to work for 25 pieces?

[tpgames]

The original game worked for 15 tile sliding game. I wanted a 24 tile game. What's wrong?

var tiles = [[],[],[],[],[]];
var grid = [[],[],[],[],[]];
 
var game = document.createElement("div");
game.className = "game";
game.style.position = "absolute"; // give tiles something to "stick" to
game.style.width = width + "px";
game.style.height = height + "px";
 
 
var theEmptyT, emptyp, emptyq;
 
for (var i=0; i<5; ++i)
for (var j=0; j<5; ++j)
{
var t = document.createElement("div");
var x = i * tileWidth;
var y = j * tileHeight;
 
t.style.position = "absolute";
t.style.width = tileWidth + "px";
t.style.height = tileHeight + "px";
 
t.style.backgroundImage = "url(" + im.src + ")";
t.style.backgroundAttachment = "scroll";
t.style.backgroundPosition = "-" + x + "px -" + y + "px";
t.style.backgroundRepeat = "no-repeat";
 
// setting using shorthand works in ie but not in moz:
// t.style.background = "url(" + im.src + ") scroll -" + x + " -" + y + " no-repeat";
 
t.className = "tile";
 
if (i == 4 && j == 4)
{
    t.style.display = "none"; // hide last block until game is over
    t.isEmpty = true;
    theEmptyT = t;
    t.className = "empty";
}
 
// i,j is original position. used to determine when you've won.
t.i = i;
t.j = j;
// p,q is current position. initially set by repositionAll();
 
grid[i][j] = t;
 
t.onclick = 
    function()
    {
     var p = this.p;
     var q = this.q;
     if (p == emptyp) // horizontally in line with empty square
     {
        if (q < emptyq) // empty square is to my right
         for (j=emptyq; j!=q; --j)
            grid[emptyp][j] = grid[emptyp][j - 1];
        else
         for (j=emptyq; j!=q; ++j)
            grid[emptyp][j] = grid[emptyp][j + 1];
        grid[p][q] = theEmptyT;
     } 
     else if (this.q == emptyq) // vertically in line with empty square
     {
        if (p < emptyp) // empty square is to my right
         for (i=emptyp; i!=p; --i)
            grid[i][emptyq] = grid[i - 1][emptyq];
        else
         for (i=emptyp; i!=p; ++i)
            grid[i][emptyq] = grid[i + 1][emptyq];
        grid[p][q] = theEmptyT;
     }
     repositionAll();
    }
 
game.appendChild(t);
} // huge for loop to create tiles
 
 
 
function repositionAll()
{
var correct = 0, i, j;
 
for (i=0; i<5; ++i)
for (j=0; j<5; ++j)
{
     t = grid[i][j];
     if (t.p != i)
     {
     if (t.p != null && !t.isEmpty)
         gradual(t.style, "left", tileWidth * t.p, tileWidth * i)
     else
         t.style.left = tileWidth * i + "px";
     t.p = i;
     }
     if (t.q != j)
     {
     if (t.q != null && !t.isEmpty)
         gradual(t.style, "top", tileHeight * t.q, tileHeight * j)
     else 
         t.style.top = tileHeight * j + "px";
     t.q = j;
     }
     if (t.isEmpty)
     {
     emptyp = i;
     emptyq = j;
     }
     if (t.i == i && t.j == j)
     ++correct;
}
 
theEmptyT.style.display = (correct == 25) ? "block" : "none";
game.style.borderColor = (correct == 25) ? "lightgreen" : "black";
}
 
 
repositionAll();
 
if (scramble)
{
 
// CAN'T FIGURE OUT WHAT NUMBERS GOES HERE?
for (var s = 0; s < 128; ++s)
{
    var r = Math.random();
    var sp, sq;
    if (r < .5)
    {
     sp = emptyp + (r < .25 ? 1 : -1);
     sq = emptyq;
    }
    else
    {
     sp = emptyp;
     sq = emptyq + (r > .75 ? 1 : -1);
    }
 
    // "reflect" if try to swap with something outside of board Changed 2 to 3, 4 to 5.
    if (sp == -1) sp = 1;
    if (sp == 5) sp = 3;
    if (sq == -1) sq = 1;
    if (sq == 5) sq = 3;
 
    var swaptemp = grid[sp][sq];
    grid[sp][sq] = grid[emptyp][emptyq];
    grid[emptyp][emptyq] = swaptemp;
 
    emptyp = sp;
    emptyq = sq;
}
} // if scramble
 
repositionAll();
 
var par = im.parentNode;
par.insertBefore(game, im);
par.removeChild(im);
 
} // function makeGame
 
 
 
 
function replaceImage()
{
var url = document.f.image.value;
var im = document.createElement("img");
 
var h = document.getElementById("imageHolder");
while (h.firstChild)
    h.removeChild(h.firstChild);
h.appendChild(im);
 
im.onload = function() { makeGame(this); }
im.src = url; 
}

Original code:
http://www.tpgames.net/gaming/2/15squares/1.html

My altered code:

http://www.tpgames.net/gaming/2/15sq...24squares.html


-- Edited by iam_clint: Fixed link

[tpgames]

Okay, what do I need to change, in order to get any response to this post? LOL

1) It is NOT a school assignment. I graduated years ago.
2) I am trying to learn JS and have tried several different changes to the code and can't figure it out.
3) I do know that the [ ] [ ] does get the 25 boxes I need. Apparently, that seems to be the only thing that is working.
Thanks!

[iam_clint]

sorry i didn't reply to your post sooner i haven't been around in a day or so.


I played the game alittle bit and i don't fully understand what the problem is....

please elaborate what is happening in your game and what you want it to be doing.

[tpgames]

Here is the link to the 15 square puzzle the works properly.
http://www.tpgames.net/gaming/2/15sq...quaresnav.html

I want the 24 piece puzzle to work exactly like the 15 square puzzle. The script doesn't divide the puzzle into 25 pieces, and blank out the 25th piece like it should. Also, the puzzle pieces don't always move how they should, in that the game sees one spot as blank, but I see lots of blanks.

(I came down with a bad cold, so couldn't get back to this one right away.)

[tpgames]

What I mean is that one image will be in square 25, but won't move to square 24 or any other square.
A image in squares 1 - 4, 6 - 9, 11 - 14, 16 - 19 move correctly.
Images in squares 5, 10, 15, and 20 - 25 do not move properly always. (counting the squares from left to right, top to bottom).
Thanks! :>)