Поместить слова в сетку таблицы в головоломке поиска слов?

Question

Я пытаюсь создать головоломку поиска слов, сгенерированную скриптом. Слова должны быть расположены горизонтально, вертикально или по диагонали. Мне может понадобиться установить, разрешено ли им чтение только вперед или назад. У меня есть множество слов, таких как (яблоко, банан, виноград, лимон, груша), которые должны быть размещены в таблице. Я уже создал таблицу, но я застрял в том, как разместить слова в сетке.

Я ищу примеры с некоторыми объяснениями.

Пожалуйста, смотрите мой код ниже:

var wordsList =[
"apple", 
"banana", 
"grape", 
"lemon", 
"pear" ];  

var cells = 10; // Numbers of cells horizontally and vertically in table grid
var cellSize = 15; // in pixels
var cellSpace = 2; // cell spacing in pixels

function createPuzzleTable(cells) {

    var totalNumRows = "";
    var totalNumColumns = "";

    //creating rows
    for (r=1;r<=cells;r++){
        //creating cells
        var oneCell = "<td width='" + cellSize + "' height='"+ cellSize + "'><input name='charField' type='text' /></td>";
        totalNumRows += oneCell;
    }

    //creating columns
    for (c=1;c<=cells;c++){ 
        totalNumColumns += "<tr>" + totalNumRows + "</tr>";
    }       
    var puzzleTableContent = "<div id='puzzleCont'><table id='puzzleTable' border='0' cellspacing='" + cellSpace +"' cellpadding='0'>"+ totalNumColumns +"</table></div>";

$("#wPuzzle").append(puzzleTableContent);

}

createPuzzleTable(cells);

Answer 1

Во-первых, вам нужно установить простой метод для поиска элементов в вашей сетке. Используйте имена классов:

<input name='charField' class="r_2 c_3" type='text' />

Где "r_" представляет строки и "c_" столбцы.

Затем случайным образом выберите направление и местоположение (строка, столбец). Посмотрите, подойдет ли слово и что квадрат еще не занят, в противном случае выберите снова.

Затем поместите буквы в сетку, используя систему координат r_ c_.

Повторение.

Заполните незанятые ячейки псевдослучайными данными наполнителя.

Answer 2

Уже есть виджет jquery, который делает это: http://code.google.com/p/jquery-wordsearch-game/

Посмотрите на этот код. Он использует шаблон стратегии для размещения слов в сетке вперед, назад, вверх, вниз и в обоих диагональных направлениях. В частности, посмотрите на строку 547 и далее.

Поскольку обучение - это ваша сильная сторона, вы можете найти его забавным... и, возможно, придумаете еще лучший способ сделать это.