如何将单个字母链接到单词？ [英] How do I link individual letters to a word?

问题描述

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

I am creating a word game where you have to spell the words in the grid by dragging the letters in from the side.

此代码随机生成12个单词listOfWords并动态创建一个6x6表。这些单词也分为单个字符（PIT），因此可以放置可拖动的字母来拼写单词...

This code randomly generates 12 words from the "listOfWords" and dynamically creates a 6x6 table. The words are also split into single characters ("P""I""T") so draggable letters can be placed over to spell the words...

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);

这是拖放到网格上的可拖动字母的代码，用于拼写单词。 p>

Here is the code for the draggable letters that are dropped onto the grid to spell the words.

<div class="squares">

        <div id="drag1" class="drag ui-widget-content box-style2" tabindex="0">
        <p>a</p>
        </div>

        <div id="drag2" class="drag ui-widget-content box-style" tabindex="0">
        <p>b</p>
        </div>

        <div id="drag3" class="drag ui-widget-content box-style" tabindex="0">
        <p>c</p>
        </div>

        <div id="drag4" class="drag ui-widget-content box-style" tabindex="0">
        <p>d</p>
        </div>

        <div id="drag5" class="drag ui-widget-content box-style2" tabindex="0">
        <p>e</p>
        </div>

        <div id="drag6" class="drag ui-widget-content box-style" tabindex="0">
        <p>f</p>
        </div>

        <div id="drag7" class="drag ui-widget-content box-style" tabindex="0">
        <p>g</p>
        </div>

        <div id="drag8" class="drag ui-widget-content box-style" tabindex="0">
        <p>h</p>
        </div>

        <div id="drag9" class="drag ui-widget-content box-style2" tabindex="0">
        <p>i</p>
        </div>

         <div id="drag10" class="drag ui-widget-content box-style" tabindex="0">
        <p>j</p>
        </div>

        <div id="drag11" class="drag ui-widget-content box-style" tabindex="0">
        <p>k</p>
        </div>

        <div id="drag12" class="drag ui-widget-content box-style" tabindex="0">
        <p>l</p>
        </div>

        <div id="drag13" class="drag ui-widget-content box-style" tabindex="0">
        <p>m</p>
        </div>

        <div id="drag14" class="drag ui-widget-content box-style" tabindex="0">
        <p>n</p>
        </div>

        <div id="drag15" class="drag ui-widget-content box-style2" tabindex="0">
        <p>o</p>
        </div>

        <div id="drag16" class="drag ui-widget-content box-style" tabindex="0">
        <p>p</p>
        </div>

        <div id="drag17" class="drag ui-widget-content box-style" tabindex="0">
        <p>r</p>
        </div>

        <div id="drag18" class="drag ui-widget-content box-style" tabindex="0">
        <p>s</p>
        </div>

        <div id="drag19" class="drag ui-widget-content box-style" tabindex="0">
        <p>t</p>
        </div>

        <div id="drag20" class="drag ui-widget-content box-style2" tabindex="0">
        <p>u</p>
        </div>

如果这些单词被放在顶部，该怎么做才能识别正确的字母？

How do I make the words recognize the correct letters when they are dropped on top?

这些行的东西....

Something along these lines....

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

推荐答案

简易版本启用拖放功能。
请注意，在这个例子中，将单词分割成字母是无用的（并且不合适）。

I've made you a simplified version with drag and drop enabled. Note that, in this example, it is useless (and inadvisable) to split the words into letters.

我已经使用了HTML5自定义数据属性，但是你也可以使用id存储单词和字母。

I've used HTML5 custom data attributes, but you can also use the id to store the words and letters.

示例： jsFiddle （拖3个字母到一个字）

Example: jsFiddle (drag 3 letters to a word)

您还应该阅读 docs 可拖放和拖动。

You should also read docs on droppable and draggable.

这篇关于如何将单个字母链接到单词？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！