gpt4 book ai didi

Javascript Tic-Tac-Toe,为什么在整个棋盘都填满后等待提醒用户?

转载 作者:太空宇宙 更新时间:2023-11-03 23:40:51 24 4
gpt4 key购买 nike

我知道已经有很多关于 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com