5

現在の私のスペルゲームでは、グリッドは3文字の単語用に設計されています。「wordList」（グリッドを動的に作成する）に大きな単語を追加することはできますが、グリッドのサイズが変化し、大きな単語がある行でオーバーラップします。

たとえば、4文字の単語が追加された時点で、グリッドはその単語がその行に収まらず、グリッド内で機能する別の位置を占めると判断するのではなく、その行の最後にセルを追加します。

基本的に、グリッドを同じサイズに保つ必要があります。単語がランダムに配置されている場合は、グリッドが所定の位置に収まらないときにエッジから外れるのではなく、グリッドが6x6のままになる位置を決定します。明らかに、6文字を超える単語を追加すると、6x6であるため、これは機能しませんが、それほど大きな単語に拡張されるとは思わないので、これは問題にはなりません。

単語はこのようにhtmlを介して追加されます...

<ul style="display:none;" id="wordlist">
    <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>
</ul>

次に、グリッドは次のようにリストから動的に作成されます...

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 < ul.children.length; 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);

これが私が何を意味するのかを正確に示すためのフィドルです。「wordList」に4文字の単語を2つ追加して、意味を示します。http://jsfiddle.net/cTGGA/18/

編集

より大きな単語をグリッドに適合させたら、それを準備するためにこのステートメントで何を言いますか。

var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');
4

1 に答える 1

2

シャッフルされた単語リストからの単語選択を、行の残りのスペースに収まる次の未使用の単語を返す関数にする必要があると思います。

または、行ごとに2語が必要な場合は、行を最長の2倍にし、リストから1つまたは2つの単語を選択した後、行の最後まで空白で埋めます。

于 2012-09-12T17:21:46.620 に答える