我正在尝试制作Connect 4（两名玩家）游戏。我想让它变得容易，所以我正在使用for循环（如果这不是一个好方法，或者您建议使用其他方法，请告诉我）来制作8x8网格（下面的代码）。但是，我似乎无法使按钮换行（每8个按钮）。这是我的代码：
for(let a=0; a<9; a++){
for(let b=0; b<8; b++){
var button = document.createElement("button")
button.id='button'+i
button.innerText = "";
button.addEventListener("click", function(){/* code here */})
document.body.appendChild(button);
i++
}
var newline = document.createElement("button")
newline.id='newline'
newline.innerText = "0";
newline.addEventListener("click", function(){getStatus()})
document.body.appendChild(newline);
newline.style.pageBreakAfter = "always";
i++
}
如何将第8个按钮放置在下一行？
我还有一个关于游戏机制的问题。如果使用循环，如何制作按钮的ID，以便可以控制被按下的按钮（以便可以将被按下的按钮的ID更改为其他ID）。谢谢！
i未定义）。您也不想创建新按钮来代表新行。您可能正在寻找的元素是<br>（即换行符）。
这里有一个例子说明了我的意思：
我还在按钮文本中插入了变量i，以便您可以看到它的外观，并在“ a” for循环中停止它的递增。
var i = 0;
for (let a = 0; a < 9; a++) {
for (let b = 0; b < 8; b++) {
var button = document.createElement("button")
button.id = 'button' + i
button.innerText = i;
button.addEventListener("click", function() { /* code here */ })
document.body.appendChild(button);
i++
}
var newline = document.createElement("br") // this is the big change
newline.id = 'newline'
newline.innerText = "0";
newline.addEventListener("click", function() {
getStatus()
})
document.body.appendChild(newline);
newline.style.pageBreakAfter = "always";
}<html>
<body>
</body>
</html><br/>元素。2）我想你需要像[x，y]按钮矩阵，例如id =“ button_x_y”。当您单击按钮时，它将检查它的Y值，然后以Y的速度浏览元素，然后更改其行为或ID]button_1_4
button_2_4
button_3_4
button_4_4
...
var i = 0;
function moveObjects(pace){
var a = 0,
interval = setInterval(function(){ // make a function which runs every 1 sec
document.getElementById('button_'+ a +`_`+ pace).style.backgroundColor = 'green';
if(a>0){
document.getElementById('button_'+ (a-1) +`_`+ pace).style.backgroundColor = 'initial'; // clearing the traced blocks
}
if (a < 8) {
a++
} else {
clearInterval(interval) //exit from setTimeout if last element was choosed
};
}, 1000);
}
for(let a=0; a<9; a++){
for(let b=0; b<8; b++){
var button = document.createElement("button")
button.id='button_'+a+`_`+b // creating x_y matrix
button.innerText = "";
button.addEventListener("click", function(e){
let pace = e.target.id.substr(-1); //getting the pace of matrix blocks
moveObjects(pace);
})
document.body.appendChild(button);
i++
}
var newline = document.createElement("button")
newline.id='newline'
newline.innerText = "0";
newline.addEventListener("click", function(){getStatus()})
document.body.appendChild(newline);
newline.style.pageBreakAfter = "always";
let _br = document.createElement("br"); //creating block named line break
document.body.appendChild(_br); //then append it after whatever you want
i++
}
button {
background-color: white;
-webkit-appearance: none;
box-sizing: border-box;
padding: 20px;
line-height: 0;
display: inline-block;
vertical-align: middle;
}