用于检查15个滑块拼图是否已解决的逻辑

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

我正在考虑弹出一个带有条件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>

来源

2014-10-05 Scott D.K.

我不是你是否正在使用一个数组或一个二维数组，这里完全清楚，所以我会提供每个答案。在这两种情况下，我都假设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!"); }

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

二维数组：验证cells[i][j] = 4 * i + j + 1，其中i是行和j是列：

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-05 05:12:01

啊！所以基本上我会这样做？ 'var table = document.getElementById（“puzzle”）; for（var i = 0，cell; cell = puzzle.cells [i]; ++）tile [row] [col] = 4 * row + col + 1; “我非常确定这是我以前见过'迭代'的地方。' – 2014-10-05 05:40:07

好吧，如果你有一个单一的线性数组，那么它就更容易了：只要验证单元格[i] = i + 1对于0 <= i <15。我的回答是基于2D表示。但是无论哪种方式，这个想法都是一样的：迭代单元格并验证实际值是预期值。 – 2014-10-05 05:46:33

Javascript对我来说很新，但我相当肯定我可以识别脚本中的行和列，借此让我相信它是一个二维数组。我能把alert（“解决！”）放在'if（！resolved）{break; }在二维数组示例中的行？ – 2014-10-05 06:03:23

用于检查15个滑块拼图是否已解决的逻辑

回答

相关问题