我知道已经有很多关于 Tic-Tac-Toe javascript 的问题，但是，我的问题是不同的。我有代码在运行，但它不会声明是否有赢家，或者它是否是猫的游戏，除非整个棋盘都被填满。我有一种感觉，这是我的 if 语句，并且在整个板不为空之前它无法读取“nodeValue of null”。问题是，我该如何解决这个问题？我已经尝试给板子一个“空白”文本节点，但是，这意味着“空白”方 block 彼此相等。有什么办法我仍然可以比较空方 block 和填充方 block 以获得胜利吗？ (我特别指的是 start_game() 函数中定义的数组和 beat_game() 函数中的 if 语句，它们比较 2- D 数组)另外，除了这个答案之外，我愿意接受任何关于我的 js 可以改进的建议。这是代码本身:
<html>
<head>
<script type="text/javascript">
window.onload = function page_load() {
// alert('in here');
start_game();
}
function start_game() {
if (document.getElementById('board')) {
document.getElementById('board').parentNode.removeChild(document.getElementById('board'));
}
win_Array = [
[
'TL',
'TM',
'TR'
],
[
'ML',
'MM',
'MR'
],
[
'BL',
'BM',
'BR'
]
];
body = document.getElementsByTagName('body')[0];
table = document.createElement('table');
table.id = 'board';
table.setAttribute('border', '1');
body.appendChild(table);
tbody = document.createElement('tbody');
table.appendChild(tbody);
run = 0;
win = 0;
var count;
td_Array = [{
t: 'TL',
m: 'ML',
b: 'BL'
}, {
t: 'TM',
m: 'MM',
b: 'BM'
}, {
t: 'TR',
m: 'MR',
b: 'BR'
}];
tr = document.createElement('tr');
tr.id = "tr1";
tbody.appendChild(tr);
for (count = 0; count <= 2; count++) {
td = document.createElement('td');
td.id = td_Array[count].t;
td.setAttribute('onClick', 'value("' + td_Array[count].t + '")');
tr.appendChild(td);
}
tr = document.createElement('tr');
tr.id = "tr2";
tbody.appendChild(tr);
for (count = 0; count <= 2; count++) {
td = document.createElement('td');
td.id = td_Array[count].m;
td.setAttribute('onClick', 'value("' + td_Array[count].m + '")');
tr.appendChild(td);
}
tr = document.createElement('tr');
tr.id = "tr3";
tbody.appendChild(tr);
for (count = 0; count <= 2; count++) {
td = document.createElement('td');
td.id = td_Array[count].b;
td.setAttribute('onClick', 'value("' + td_Array[count].b + '")');
tr.appendChild(td);
}
}
function value(data) {
console.log(data);
console.log(document.getElementById(data));
if (run % 2 !== 0) {
td = document.getElementById(data);
text = document.createTextNode('O');
td.appendChild(text);
document.getElementById(data).removeAttribute('onClick');
} else {
td = document.getElementById(data);
text = document.createTextNode('X');
td.appendChild(text);
document.getElementById(data).removeAttribute('onClick');
} //document.getElementById('').childNodes[0].nodeValue //node value prevents error.
run++;
beat_game();
}
function beat_game() {
// alert('test sucessful');
var x, y;
for (x = 0; x < 3; x++)
{ //for checking across td's
if (document.getElementById(win_Array[x][0]).childNodes[0].nodeValue == document.getElementById(win_Array[x][1]).childNodes[0].nodeValue
&& document.getElementById(win_Array[x][1]).childNodes[0].nodeValue == document.getElementById(win_Array[x][2]).childNodes[0].nodeValue)
{
win = true;
win_value = document.getElementById(win_Array[x][0]).childNodes[0].nodeValue;
}
}
for (y = 0; y < 3; y++)
{ //for checking down td's
if (document.getElementById(win_Array[0][y]).childNodes[0].nodeValue == document.getElementById(win_Array[1][y]).childNodes[0].nodeValue
&& document.getElementById(win_Array[1][y]).childNodes[0].nodeValue == document.getElementById(win_Array[2][y]).childNodes[0].nodeValue)
{
win = true;
win_value = document.getElementById(win_Array[0][y]).childNodes[0].nodeValue;
}
} // checking across values here...
if ( document.getElementById(win_Array[0][0]).childNodes[0].nodeValue == document.getElementById(win_Array[1][1]).childNodes[0].nodeValue
&& document.getElementById(win_Array[1][1]).childNodes[0].nodeValue == document.getElementById(win_Array[2][2]).childNodes[0].nodeValue
|| document.getElementById(win_Array[0][2]).childNodes[0].nodeValue == document.getElementById(win_Array[1][1]).childNodes[0].nodeValue
&& document.getElementById(win_Array[1][1]).childNodes[0].nodeValue == document.getElementById(win_Array[2][0]).childNodes[0].nodeValue)
{
win = true;
win_value = document.getElementById(win_Array[0][0]).childNodes[0].nodeValue;
}
if(win == true)
{
if(win_value == 'X')
{
alert('Player 1 Wins!');
}else{
alert('Player 2 Wins!');
}
}else {
alert("Cat's Game!");
}
}
</script>
<style>
td {
width: 50px;
height: 50px;
text-align: center;
}
body {
font-size: 6;
}
</style>
</head>
<body>
</body>
</html>
再次感谢!
最佳答案
您是对的，问题出在您的 beat_game() 函数中。
第一个条件将引发异常，因为 td 单元格中没有子节点(例如 document.getElementById(win_Array[x][0]).childNodes[0])您试图从中获取 nodeValue 属性。
要解决此问题，您可以使用一种更安全/通用的方式来获取单元格的值，以了解您如何使用 innerHTML 构建舞台:
document.getElementById(win_Array[x][0]).innerHTML
要解决所有空白方 block 彼此相等的问题，您可以添加额外的检查以确保单元格在说 win = true 之前确实包含一个值。结合所有这些技巧，其中一个循环将如下所示:
for (x = 0; x < 3; x++)
{ //for checking across td's
if (document.getElementById(win_Array[x][0]).innerHTML == document.getElementById(win_Array[x][1]).innerHTML
&& document.getElementById(win_Array[x][1]).innerHTML == document.getElementById(win_Array[x][2]).innerHTML)
{
win_value = document.getElementById(win_Array[x][0]).innerHTML;
win = win_value ? true : false;
}
}
完成此操作后，您会发现一个新错误，游戏会不断提示“猫的游戏!”。因为在游戏获胜检查之后，如果 win 不为真，我们将永远落入 else 的情况。要解决此问题，我建议使用您的 run 变量来确定何时执行了最大移动次数。
另一个错误是您在游戏中检查对 Angular 线的最后一个条件。您将 win_value 指定为始终位于棋盘的左上角，但实际获胜值在这种情况下可能会有所不同，因为您已将两种对 Angular 线情况组合在一个语句中。
希望这对您有所帮助!
关于Javascript Tic-Tac-Toe，为什么在整个棋盘都填满后等待提醒用户？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22927400/