用於檢查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個滑塊拼圖是否已解決的邏輯

回答

相關問題