0

私のドラッグ アンド ドロップ ワード ゲームでは、6x6 (36 セル) のグリッド サイズが設定されています。6 つの 3 文字の単語と 18 の空白スペースで構成されています。

現時点では、グリッドは行ごとに 2 単語であるため、リストに 3 文字より長い単語を追加すると、その行に別の単語があるとグリッドに重なってしまいます。

グリッドが重ならないように、3 文字を超える単語に独自の行を与えることができるスクリプトが必要です。

誰かが私にいくつかの提案をしてもらえますか?

HTMLの配列リストからテーブルを作成するスクリプトは次のとおりです...

var listOfWords = [];
var rndWord = [];
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")
    });

    console.log(listOfWords);
    }

    console.log(listOfWords);

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

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

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

var guesses = {};
console.log(shuffledWords);
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');
    console.log(shuffledWords);
    for (var j = i; j < i + wordsPerRow; ++j) {
        var word = shuffledWords[j];
        console.log(j);
        console.log(word);
        guesses[word] = [];

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


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

            row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}
document.body.appendChild(tbl);

これがHTMLの単語のリストです...

<ul style="display:none;" id="wordlist">

    <li data-word="mum" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.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/porkypig1.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/porkypig1.wav" data-pic="http://www.clker.com/cliparts/e/9/4/1/1195440435939167766Gerald_G_Dog_Face_Cartoon_-_World_Label_1.svg.med.png"></li>

    <li data-word="bug" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.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/daffyduck1.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/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/H/I/n/C/p/Z/bald-man-face-with-a-mustache-md.png"></li>

    <li data-word="cop" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/1/4/c/5/1194984609285255522police_man_ganson.svg.med.png"></li>

    <li data-word="pig" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/6/c/c/c/13286504431247546768Simple%20Pig%20Cartoon.svg.med.png"></li>

    <li data-word="sun" data-audio="http://www.wav-sounds.com/cartoon/porkypig1.wav" data-pic="http://www.clker.com/cliparts/3/b/1/2/11971486551534036964ivak_Decorative_Sun.svg.med.png"></li>

    <li data-word="kid" data-audio="http://www.wav-sounds.com/cartoon/daffyduck1.wav" data-pic="http://www.clker.com/cliparts/d/9/9/f/11954449391541537067Gerald_G_Girl_Face_Cartoon.svg.med.png"></li>
4

1 に答える 1

0

これを試してみてください。役立つかどうかを教えてください...

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);
于 2012-08-20T08:03:42.320 に答える