在 Javascript 中创建连接四：循环按钮以制作网格（？）答案

【问题标题】：Creating Connect Four In Javascript: Looping Buttons to Make a Grid (?)在 Javascript 中创建连接四：循环按钮以制作网格（？）
【发布时间】：2020-05-18 21:31:59
【问题描述】：

我正在尝试制作 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 is not defined.
最好的方法是使用带有样式的元素网格来设置它。表格或弹性盒网格都可以工作。如果只是添加换行符，则可以使用 <br> 元素。我建议在 sn-p 中放一个完整的工作演示以获得更多帮助。

标签： javascript loops for-loop button newline

【解决方案1】：

1) 您可以在 8 个按钮循环之后创建并附加一个 <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;
}

【讨论】：

【解决方案2】：

您的代码中有错误（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>

【讨论】：