0

我一直在编写 15 个滑块拼图的 Javascript 版本，并且能够通过交换 innerHTML 值来模拟图块的“移动”。正如我看到其他人所建议的那样，我也在使用而不是数组。给定我的代码，我将如何输入一种方法来检查难题是否已解决？解决后，我希望它发出“已解决！”的警报。消息，我可以做到。我只是不知道如何让它检查这个谜题是否真的被解决了。

我正在考虑使用条件 if 语句弹出警报（即，如果空白单元格位于第 3 行，单元格 3），但很快就失败了。它也不会检查每一行的 1-15 是否以正确的顺序排列。我最初的拼图是从交换 2 个瓷砖开始的。这是我到目前为止的位置：

<!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>
4

1 回答 1

0

我不完全清楚您在这里使用的是单个数组还是二维数组，因此我将为每个数组提供答案。在这两种情况下，我都假设 0 索引。

单个数组：验证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!"); }

请注意，我们没有检查最后一个单元格，因为没有必要。

2D 数组：验证 ，行在cells[i][j] = 4 * i + j + 1哪里，列在哪里：ij

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!"); }

我的 Javascript 不强，所以我可能弄错了确切的语法，但这就是逻辑。

于 2014-10-05T05:12:01.800 回答