Placer des mots dans la grille de la table dans un puzzle de recherche de mots?

Question

J'essaie de créer un puzzle de recherche de mots généré par un script. Les mots doivent être placés horizontalement, verticalement ou en diagonale. Je pourrais avoir besoin de l'option pour indiquer s'ils sont autorisés à lire seulement en avant ou en arrière. J'ai un tableau de mots tels que (pomme, banane, raisin, citron, poire) qui doit être placé dans la table. J'ai déjà créé la table mais je suis bloqué sur la façon de placer les mots dans la grille.

Je cherche des exemples avec quelques explications.

S'il vous plaît voir mon code ci-dessous:

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

D'abord, vous devez établir une méthode simple pour localiser des éléments dans votre grille. Utiliser les noms de classes:

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

Où "r_" représente des lignes et "c_" des colonnes. Puis, sélectionnez au hasard une direction et un emplacement (ligne, colonne).

Voyez si le mot correspond et si le carré n'est pas déjà occupé, sinon choisissez à nouveau. Puis, déposez les lettres dans la grille en utilisant le système de coordonnées r_c_.

Répéter.

Remplissez les cellules inoccupées avec des données de remplissage pseudo-aléatoires.

Answer 2

Il y a déjà un widget jquery qui fait cela: http://code.google.com/p/jquery-wordsearch-game/

Jetez un oeil à this code. Il utilise le motif de stratégie pour placer les mots sur la grille dans les directions avant, arrière, haut, bas et les deux diagonales. Plus précisément, regardez la ligne 547 et suivantes. Puisque l'apprentissage est votre point fort, vous pourriez le trouver amusant ... et probablement trouver une meilleure façon de le faire.