Javascript 和 HTML - 令牌未出现在连接四板上

Question

我正在使用 javascript、html 和 css 创建四人连线游戏，但我在 game.js 中的 refreshGrid() 函数遇到了问题。运行我的 html 文件目前只是一个空板，这个功能应该是这样的，当用户点击板上的空白区域时，会出现一个芯片。我不确定为什么这个功能不起作用，希望得到一些帮助。我不确定我是否正确地遍历了我的行和列。var player=1; var grid = [  [0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0],  [0, 0, 0, 0, 0, 0, 0]];function selectColumn(col) {  if(player==1){    grid[5][col]=1;    player=2;    document.getElementById("box1").innerHTML="Player 1's Turn";  }else{    grid[5][col]=2;    player=1;    document.getElementById("box1").innerHTML="Player 2's Turn";  }  refreshGrid();}function refreshGrid() {  for (var row = 0; row < 6; row++) {    for (var col = 0; col < 7; col++) {      if (grid[row][col]==0) {                 document.getElementById("cell"+row+col).style.backgroundColor="#FFFFFF";      } else if (grid[row][col]==1) { //1 for yellow                document.getElementById("cell"+row+col).style.backgroundColor="#FFFF00";      } else if (grid[row][col]==2) { //1 for yellow                document.getElementById("cell"+row+col).style.backgroundColor="#FF0000";       }    }  }  }

Answer 1

您的代码中有太多错误。我什至不知道从哪里开始，我会用我记得的东西和提示来编辑这篇文章。

var player=1; 

var grid = [

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0]

];

function selectColumn(col) {

  for (let row = 0; row < 7; ++row) {

    if(grid[row][6-col]){

      continue;

    }

    if(player==1){

      grid[row][6-col]=1;

      player=2;

      document.getElementById("box1").innerHTML="Player 1's Turn";

    }else{

      grid[row][6-col]=2;

      player=1;

      document.getElementById("box1").innerHTML="Player 2's Turn";

    }

    break;

  }

  refreshGrid();

}

function refreshGrid() {

  for (var row = 0; row < 6; row++) {

    for (var col = 0; col < 7; col++) {

      const htmlElement = document.querySelector(`#column-${6-col} .row-${row}`);

      if (grid[row][col]==0) { 

                htmlElement.style.backgroundColor="#FFFFFF";

      } else if (grid[row][col]==1) { //1 for yellow

                htmlElement.style.backgroundColor="#FFFF00";

      } else if (grid[row][col]==2) { //1 for yellow

                htmlElement.style.backgroundColor="#FF0000";

       }

    }

  }  

}

.column {

  display: grid;

  grid-auto-flow: row;

}

#grid {

  display: grid;

  grid-auto-flow: column;

}

<div id="box1"><h1>Player 2's turn.</h1></div>

<div id="grid">

    <div class="column" id="column-0" data-x="0">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(0)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(0)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(0)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(0)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(0)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

    </div>

    <div class="column"  id="column-1" data-x="1">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(1)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(1)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(1)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(1)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(1)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

    </div>

    <div class="column" id="column-2" data-x="2">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(2)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(2)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(2)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(2)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(2)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg>  

    </div>

    <div class="column" id="column-3" data-x="3">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(3)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(3)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(3)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(3)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(3)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

    </div>

    <div class="column" id="column-4" data-x="4">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(4)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(4)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(4)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(4)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(4)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

    </div>

    <div class="column" id="column-5" data-x="5">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(5)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(5)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(5)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(5)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(5)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg>  

    </div>

    <div class="column" id="column-6" data-x="6">

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(6)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(6)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(6)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(6)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(6)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

        <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(6)">

          <circle cx="45" cy="45" r="30"   class="free" />

        </svg> 

    </div>

</div>

    <script src="game.js"></script>

</div>

你的代码真的很乱，你的问题不够集中。我这样做的唯一原因是因为这个想法很有趣而且我想看到它奏效。

我记得的事情：

您的列和行在您的 html 结构中（现在仍然）是倒置的。您的脚本中有单元格行，html 中有单元格列。

您在同一列中调用 (selectColumn with 0, 1, 2, 3, 4, ...) ...

不要使用幻数（像 6 或 7 这样的原始数字），而是使用常量。您可以定义 NUMBER_OF_ROWS 和 NUMBER_OF_COLUMNS。字符串也一样。

您可以使用 javascript 生成一个数组并使用该数组创建您的 html 元素。

您试图访问一个不存在的 board 变量。

当没有用行和列定义的 id 时，您试图通过 id 选择单元格。