Javascript 如何将字母与单词联系起来？

我正在创建一个文字游戏，在这个游戏中，你必须通过从侧面拖动字母来拼写网格中的单词

此代码从“ListofWord”中随机生成12个单词，并动态创建一个6x6表。单词也被分成单个字符（“m”“a”“t”），因此可以放置可拖动的字母来拼写单词

var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"];

var shuffledWords = listOfWords.slice(0).sort(function () {
return 0.5 - Math.random();
}).slice(0, 12);

var tbl = document.createElement('table');
tbl.className='tablestyle';
var wordsPerRow = 2;


for (var i = 0; i < shuffledWords.length; i += wordsPerRow) {
var row = document.createElement('tr');

for (var j=i; j < i + wordsPerRow; ++ j) {
    var word = shuffledWords[j];

    for (var k = 0; k < word.length; k++){
        var cell = document.createElement('td');


        cell.textContent = word[k];
        // IF FIREFOX USE cell.textContent = word[j]; INSTEAD
        row.appendChild(cell);
    }
}
tbl.appendChild(row);    
}

 document.body.appendChild(tbl);

可以使用string.indexof（substring）返回子字符串在字符串中开始的索引

例：

---

最后我就是这样做的

$(".drop").droppable({
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));
    console.log($(event));
    console.log($(ui.draggable).text());

    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    if ($(this).text() == $(ui.draggable).text().trim()) {

        $(this).addClass('wordglow3');
    } else {
        $(this).addClass('wordglow');
    }
    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    console.log(guesses);

    if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass("wordglow2");

        } else {
            $('td[data-word=' + word + ']').addClass("wordglow4");

        }
    }


},

activate: function(event, ui) {
    word = $(this).data('word');

    // try to remove the class
    $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}


});

---

步骤1：转到此处：步骤2：创建正确显示的内容。第3步：在发布同一类型的问题之前等待，有人可能会帮助你，至少有一个建议。要考虑的是将“网格”表示为行和列（也可能是对角线），而不仅仅是一系列div。通过这种方式，您可以将检查网格内容的逻辑与拖动事件处理程序分离。你可以从一些基本的东西开始，比如（“cat”==grid[i][j]+grid[i][j+1]+grid[i][j+2]），或者把它做得更好，比如（cat==grid.checkWord（i，j，“right”）。这应该是一个开始的方法，还不够吗？请说得更具体些。

if ("mat" == drag13 + drag1 + drag19) {
            return true;
        }
        else {
            return false;
        }

if ('mat'.indexOf(drag13) != -1) { // -1 means substring is not in the string
  return true;
} else {
    return false;
}

$(".drop").droppable({
drop: function(event, ui) {
    word = $(this).data('word');

    guesses[word].push($(ui.draggable).attr('data-letter'));
    console.log($(event));
    console.log($(ui.draggable).text());

    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    if ($(this).text() == $(ui.draggable).text().trim()) {

        $(this).addClass('wordglow3');
    } else {
        $(this).addClass('wordglow');
    }
    console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());


    console.log(guesses);

    if (guesses[word].length == 3) {
        if (guesses[word].join('') == word) {
            $('td[data-word=' + word + ']').addClass("wordglow2");

        } else {
            $('td[data-word=' + word + ']').addClass("wordglow4");

        }
    }


},

activate: function(event, ui) {
    word = $(this).data('word');

    // try to remove the class
    $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
}


});