2

現在、スペルゲーム用にJQueryで動的にグリッドを生成しています。現時点では、グリッドは3文字の単語のみを処理するため、6x6です。

問題は、将来の開発（より大きな単語の追加など）のために行と列の量を変更できる必要があることです。

理想的には、HTMLの行と列を変更して、経験の浅い同僚が私がいないときにサイズを変更できるようにしたいと考えています。

HTMLでデータを取得してJQueryに渡すためのフォームを検討してきましたが、グリッドの作成に使用しているJQueryを使用して、グリッドを作成するときにどのように処理するかがわかりません。本文のリストに保存した単語。

誰かが私を正しい方向に向けることができますか？

グリッドを生成するスクリプトは次のとおりです...

var listOfWords = [];
var rndWord = [];
var counter = 0;
var ul = document.getElementById("wordlist");
var i;

for (i = 0; i < ul.children.length; ++i) {

    listOfWords.push({
        "name": ul.children[i].getAttribute("data-word"),
        "pic": ul.children[i].getAttribute("data-pic"),
        "audio": ul.children[i].getAttribute("data-audio")
     });
}

var chosenWords = [];
var copylist = listOfWords.slice();

for (var x = 0; x < 6; x++) {
    var rand = Math.floor(Math.random() * (copylist.length));
    chosenWords.push(copylist[rand].name);
    copylist.splice(rand, 1);
    if (chosenWords.length < 12) {
        chosenWords.push('   ');
     }

 }

var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
    return 0.5 - Math.random()
});

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

for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {

    var row = document.createElement('tr');
    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        guesses[word] = [];

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


            $(cell).addClass('drop-box').attr('data-word', word).attr('data-letter', word[k]);
            cell.textContent = word[k];

            row.appendChild(cell);
        }
    }

    tbl.appendChild(row);
}

$(".container").append(tbl);

言葉とそれに付随する音と写真をこのように保存します...

    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/porkypig2.wav" data-pic="http://www.clker.com/cliparts/5/e/7/f/1195445022768793934Gerald_G_Lady_Face_Cartoon_1.svg.med.png"></li>

    <li data-word="cat" data-audio="http://www.wav-sounds.com/cartoon/bugsbunny2.wav" data-pic="http://www.clker.com/cliparts/c/9/9/5/119543969236915703Gerald_G_Cartoon_Cat_Face.svg.med.png"></li>

    <li data-word="dog" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/a/2/c/0/1195440948271207911zeimusu_spotty_dog.svg.med.png"></li>

    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/daffyduck2.wav" data-pic="http://www.clker.com/cliparts/4/b/4/2/1216180545881311858laurent_scarabe.svg.med.png"></li>

    <li data-word="rat" data-audio="http://www.wav-sounds.com/cartoon/bugsbunny1.wav" data-pic="http://www.clker.com/cliparts/C/j/X/e/k/D/mouse-md.png"></li>

    <li data-word="dad" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/3/a/6/6/119544474191128182Gerald_G_Man_Face_6_-_World_Label.svg.med.png"></li>
4

1 に答える 1

0

単語のリストがすべて3文字の長さである場合、3x3、6x6、9x9などを生成できますが、これは一種の制限です。リスト内の単語の文字数が異なる場合は、各行で選択された単語がグリッドサイズに関係なくランダムに加算されることを保証できます。したがって、たとえば10x10グリッドの場合、長さ<=10の長さをランダムに選択します。5だとしましょう。次の単語の長さは2〜5文字などです。単語がすでに使用されているかどうかがわかるように、単語の長さと別のハッシュに基づいて辞書/ハッシュに保存する必要があります。

于 2012-08-30T13:37:16.013 に答える