0

我正在尝试制作 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）。谢谢！

4

2 回答 2

0

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

于 2020-05-18T21:55:43.750 回答
0

<br/>1）您可以在 8 个按钮循环之后创建和附加一个元素。
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;
}

于 2020-05-18T23:00:39.837 回答