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

Question

我正在使用javascript、html和css创建一个connect four游戏，而我在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";
}
}
}  
}

<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(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(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(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(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(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(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(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(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(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(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(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(0)">
<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(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(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(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(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(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(0)">
<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(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(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(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(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(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(0)">
<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(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(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(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(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(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(0)">
<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(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(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(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(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(0)">
<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(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(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(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(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(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(0)">
<circle cx="45" cy="45" r="30"   class="free" />
</svg>
</div>
</div>

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，其中包含0、1、2、3、4…(。。。

不要使用幻数(像6或7这样的原始数字(，而是使用常量。您可以定义NUMBER_OF_ROWS和NUMBER_OF-COLUMNS。字符串也是如此。

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

你试图访问一个不存在的板变量。

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