5

在我目前的拼写游戏中，网格是为 3 个字母的单词设计的。我可以将更大的单词添加到“wordList”（动态创建网格）中，但是网格的大小会发生变化并在更大的单词所在的行上重叠。

例如，当添加一个四个字母的单词时，网格将在该行的末尾添加一个额外的单元格，而不是判断该单词不适合该行并在网格中占据另一个有效的位置。

基本上我需要网格保持相同的大小，并且当随机放置单词时，确定一个允许网格保持 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 个字母的单词来说明我的意思。http://jsfiddle.net/cTGGA/18/

编辑

一旦我将较大的单词改编成网格，我将在此声明中说什么来准备它。

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

1 回答 1

2

我认为您要么需要从 shuffledword 列表中选择一个单词，该函数返回下一个未使用的单词，该单词适合该行中剩余的空间。

或者如果您想要每行 2 个单词并在从列表中选择一个或 2 个单词后用空格填充到行尾，则将行设为最长单词的 2 倍。

于 2012-09-12T17:21:46.620 回答