3

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

此代码从“listOfWords”中随机生成 12 个单词并动态创建一个 6x6 表。这些单词也被分成单个字符（“P”“I”“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);

这是拖放到网格上以拼写单词的可拖动字母的代码。

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

当单词放在顶部时，如何使单词识别正确的字母？

沿着这些路线的东西......

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

1 回答 1

2

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.

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

Example: jsFiddle (drag 3 letters to a word)

You should also read docs on droppable and draggable.

于 2012-07-17T13:42:20.997 回答