gpt4 book ai didi

javascript - 将随机空间放入动态网格中

转载 作者:行者123 更新时间:2023-11-29 18:27:25 26 4
gpt4 key购买 nike

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

问题是我需要一个 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);

最佳答案

<!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>

这是一个 fiddle :http://jsfiddle.net/dpbzq/12/


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

我做了一个新的 fiddle :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"]);​

关于javascript - 将随机空间放入动态网格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11688398/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com