Logic for checking if 15 slider puzzle is solved

Question

I've been writing out a Javascript version of the 15 slider puzzle and am able to simulate the "moving" of the tiles through swapping innerHTML values. I'm also using instead of an array, as I've seen others suggest. Given my code, how would I go about inputting a way to check whether the puzzle is solved or not? When it's solved, I'd like it to alert with a "Solved!" message, which I can do. I just don't know how to make it check to see if the puzzle actually IS solved.

I was thinking of having an alert pop-up with a conditional if statement (i.e., if the blank cell is located at row 3, cell 3) but that quickly fizzled out. It also doesn't check whether or not each row has 1-15 in the correct order, either. I initially have the puzzle start out with 2 tiles swapped. Here's where I am so far:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>15 puzzle</title>
<style>
 td {
     border: 1px solid blue;
     width: 30px;
     height: 30px;
     text-align: center;
     vertical-align: middle;
}
 td:hover {
 background-color: yellow;
}
</style>
<script>
var blank_row = 3;
var blank_col = 3;
var puzzle = document.getElementById("puzzle");

function f(e) {
    var my_row = e.parentElement.rowIndex;
    var my_col = e.cellIndex;

if ((blank_col == my_col &&
    Math.abs(blank_row - my_row) == 1)  
    ||  
    (blank_row == my_row &&
    Math.abs(blank_col - my_col) == 1)) {
     var e2 = document.getElementById("puzzle").rows[blank_row].cells[blank_col];
         e2.innerHTML = e.innerHTML;
          e.innerHTML = " ";
            blank_row = my_row;
            blank_col = my_col;

  }

}
</script>
</head>

<body>
<table id="puzzle">
<tr>
   <td onclick="f(this)">1</td>
   <td onclick="f(this)">6</td>
   <td onclick="f(this)">3</td>
   <td onclick="f(this)">4</td>
  </tr>
<tr>
   <td onclick="f(this)">5</td>
   <td onclick="f(this)">10</td>
   <td onclick="f(this)">7</td>
   <td onclick="f(this)">8</td>
  </tr>
<tr>
   <td onclick="f(this)">9</td>
   <td onclick="f(this)">2</td>
   <td onclick="f(this)">11</td>
   <td onclick="f(this)">12</td>
  </tr>
 <tr>
   <td onclick="f(this)">13</td>
   <td onclick="f(this)">14</td>
   <td onclick="f(this)">15</td>
   <td onclick="f(this)"> </td>
  </tr>
   </table> 
 </body>
 </html>

score 0 · Answer 1 · 2014-10-05T06:10:46.507

0

I'm not totally clear on whether you are using a single array or a 2D array here, so I'll offer answers for each. In both cases I'm assuming 0-indexing.

Single array: Verify that cells[i] = i + 1:

function checkSolved() {
    for (i = 0; i < 15; i++) {
        if (cells[i] != i + 1) { return false; }
    }
    return true;
}

...

if (checkSolved()) { alert("Solved!"); }

Note that we're not checking the very last cell since there's no need.

2D array: Verify that cells[i][j] = 4 * i + j + 1, where i is the row and j is the column:

function checkSolved() {
    for (i = 0; i < 4; i++) {
        upperCol = (i < 3 ? 4 : 3); // Skip last cell
        for (j = 0; j < upperCol; j++) {
            if (cells[i][j] != (4 * i + j + 1)) { return false; }
        }
    }
    return true;
}

...

if (checkSolved()) { alert("Solved!"); }

My Javascript isn't strong, so I may have gotten the exact syntax wrong, but that's the logic.

edited Oct 05 '14 at 06:10

answered Oct 05 '14 at 05:12

Ah! So essentially I'd be doing this? `var table = document.getElementById("puzzle"); for (var i = 0, cell; cell = puzzle.cells[i]; ++) { tile[row][col] = 4*row + col + 1; }` I'm pretty sure this is where i've seen 'iterate' used before.' – Scott D.K. Oct 05 '14 at 05:40
Well, if you have a single linear array, then it's even easier: just verify that cells[i] = i + 1 for 0 <= i < 15. My response was based on a 2D representation. But either way the idea is the same: iterate over the cells and verify that the actual value is the expected value. – Oct 05 '14 at 05:46
Javascript is pretty new to me, but I'm fairly certain that I can identify the row and the column in this script, lending me to believe it's a 2D array. Would I be able to place `alert("Solved!");` underneath the `if (!solved) { break; }` line in the 2D array example? – Scott D.K. Oct 05 '14 at 06:03
So for my own edification: `function checkSolved() {` in either a single or 2D array is verifying that each cell is 1 more than the value of the cell next to it. If that is true, then it alerts with "Solved!" Does some code need to replace the ellipsis above `if (checkSolved()) { alert("Solved!"); }` ? – Scott D.K. Oct 06 '14 at 06:06
Yes. The function is just available for use wherever you need it in the program. Then the "..." means "your code", whatever the rest of the app is doing. Finally, the actual check is the "if (checkSolved()) { .... }" bit. – Oct 06 '14 at 14:48
I have the function checkSolved() before my function f(e), and my if checkSolved()) { alert() } after it. I don't have any errors, but when I solve the puzzle, nothing alerts. – Scott D.K. Oct 06 '14 at 23:17
Run the check immediately following each move. – Oct 06 '14 at 23:20
Hmm. That's what I thought I was doing by having `function checkSolved()` following `function f(e)` I tried to have `function checkSolved()` placed above `function f(e)` and then having `if checkSolved())...` after it but I still am not getting an alert popup. – Scott D.K. Oct 07 '14 at 00:17

Logic for checking if 15 slider puzzle is solved

1 Answers1