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 つ取ります。最大 12 語までの 3 文字の単語の配列。事前にシャッフルする必要はありません。関数はそれらをシャッフルします。この関数は、id == "myTable" のテーブルを見つけようとします。テーブルが見つからない場合は、テーブルを作成し、id == "myDiv" の div に追加します (コメント アウトされている行が 1 つあります。本文に追加する場合は、その行のコメントを外して、テーブルを 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 単語

EDIT2

これがあなたが望むものだと思います： スペースで満たされた6語のJSFiddle

于 2012-07-27T13:37:04.073 に答える