Логика для проверки того, решена ли головоломка 15

Я выписываю Javascript версию головоломки 15 слайдера и могу имитировать «перемещение» фрагментов путем замены значений 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.

Я не совсем ясно, является ли вы используете один массив или 2D массив здесь, так что я буду предлагать ответы на каждый. В обоих случаях я предполагаю 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, где 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 (« головоломка »); для (var i = 0, cell; cell = puzzle.cells [i]; ++) { tile [row] [col] = 4 * row + col + 1; } 'Я почти уверен, что это то, где я видел« итерацию », использованную раньше». –

Ну, если у вас есть один линейный массив, то это еще проще: просто проверьте, что ячейки [i] = i + 1 для 0 <= i <15. Мой ответ был основан на двумерном представлении. Но в любом случае идея одинакова: итерация по ячейкам и проверка того, что фактическое значение является ожидаемым значением. –

Javascript для меня довольно новичок, но я уверен, что могу определить строку и столбец в этом скрипте, предоставив мне возможность считать, что это 2D-массив. Смогу ли я разместить 'alert (« Solved! »),' Под 'if (! Resolved) {break; } 'в примере 2D-массива? –

Логика для проверки того, решена ли головоломка 15

ответ

Смежные вопросы