2

我有一个动态生成网格的单词列表。

问题是我需要一个 6x6 网格，如果列表中没有足够的单词来促进 6x6（12 个单词），那么它不会。

我怎样才能使它始终生成 6x6 网格，随机生成单词的位置并用空单元格填充空白？

var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog"];
var shuffledWords = listOfWords.slice(0).sort(function() {
    return 0.5 - Math.random();
}).slice(0, 6);
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];
            row.appendChild(cell);
        }
    }
    tbl.appendChild(row);
}
document.body.appendChild(tbl);
4

2 回答 2

3 
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function loaded() {
                    var tbl = document.getElementById("tbl");
                if(tbl != null) {
                    tbl.parentNode.removeChild(tbl);
                }
                var nrOfWordsToUse = Number(document.getElementById("howManyWords").value);
                if(nrOfWordsToUse > 12 || nrOfWordsToUse < 0) {
                    alert("nrOfWordsToUse has to be between 0 and 12");
                } else {
                    var initialListOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "aha", "beb", "pan", "pet", "pir", "pem"];
                    listOfWords = [];
                    for(var i = 0; i < nrOfWordsToUse; i++)
                        listOfWords[i] = initialListOfWords[i];
                    var positions = [];
                    for(var i = 0; i < 6; i++) {
                        positions[i] = ["", "", "", "", "", ""];
                    }
                    for(var i = 0; i < listOfWords.length; i++) {
                        var y = number0to5();
                        var x = number0or3();
                        if(positions[y][x] == "") {
                            positions[y][x] = listOfWords[i].charAt(0);
                            positions[y][x + 1] = listOfWords[i].charAt(1);
                            positions[y][x + 2] = listOfWords[i].charAt(2);
                        } else {
                            i--;
                        }
                    }
                    var table = document.createElement("table");
                    table.id = "tbl";
                    document.body.appendChild(table);
                    for(var i = 0; i < positions.length; i++) {
                        var row = table.insertRow(-1);
                        for(var j = 0; j < positions[i].length; j++) {
                            var cell = row.insertCell(-1);
                            cell.innerHTML = positions[i][j];
                        }
                    }
                }
                alert("end");
            }
            function number0to5() {
                return Math.floor(Math.random() * 6);
            }
            function number0or3() {
                return Math.random() > 0.5 ? 0 : 3;
            }
        </script>
    </head>
    <body>
        <input id="howManyWords" value="6" /><input type="button" onclick="loaded()" value ="doIt"/>
    </body>
</html>

这是一个小提琴：http: //jsfiddle.net/dpbzq/12/

关于您帮助您将我的代码构建到您的代码中的请求：

我做了一个新的小提琴：http: //jsfiddle.net/uv74h/2/

如您所见，它是一个函数：rndSpaces。它需要1个参数；由 3 个字母组成的单词数组，最多 12 个单词。他们不必预先洗牌；该功能将随机播放它们。该函数将尝试查找 id == "myTable" 的表。如果找不到表，它会创建一个表并将其附加到 id == "myDiv" 的 div 中（有一行注释掉；如果要将其附加到正文，请取消注释该行并注释掉将表格附加到 div 的行）。该函数清除表中的所有内容，创建一个 6x6 网格并用单词填充它。我给表格、行和单元格赋予了 CSS 样式（tablestyle、myRow 和 myCell）。

这是一个函数被调用的例子：

rndSpaces(["pim", "pam", "pet", "rol", "fik", "fak", "ral"]);​
于 2012-07-27T13:50:30.557 回答
1

更新了 JSFiddle

我补充说：

while(listOfWords.length < 6)
    listOfWords.push("   ");

因此，如果没有足够的单词，它会在数组后面附加空的“单词”（3 个空格）并被打乱，这会导致随机空格

编辑

JSFiddle 12个字

编辑2

我想这就是你想要的： JSFiddle with 6 words,filled with spaces

于 2012-07-27T13:37:04.073 回答