我正在尝试制作井字游戏，如果该人对角线获胜，则该游戏不起作用

Question

我正在尝试制作井字游戏，截至目前，我仅在程序上工作，知道X的玩家何时获胜，并且运作良好，除了玩家在对角线获胜时。 控制台没有任何错误。 我有什么想念的吗？ 这是Javascript

var player = 0;
var xvalue = 0;
var ovalue = 0;
function tic(a) 
{
    if(player === 0)
    {
        document.getElementById(a).value = 'X';
        document.getElementById(a).disabled = 'true';
        player = 1;
    }
    else if(player === 1)
    {
        document.getElementById(a).value = 'O';
        document.getElementById(a).disabled = 'true';
        player = 0;
    }
    if(document.getElementById('aa').value === 'X') {
        if(document.getElementById('ab').value === 'X') {
            if(document.getElementById('ac').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('ba').value === 'X') {
        if(document.getElementById('bb').value === 'X') {
            if(document.getElementById('bc').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('ca').value === 'X') {
        if(document.getElementById('cb').value === 'X') {
            if(document.getElementById('cc').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('aa').value === 'X') {
        if(document.getElementById('bb').value === 'X') {
            if(document.getElementById('cc').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('ac').value === 'X') {
        if(document.getElementById('bb').value === 'X') {
            if(document.getElementById('ca').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('aa').value === 'X') {
        if(document.getElementById('ba').value === 'X') {
            if(document.getElementById('ca').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('ab').value === 'X') {
        if(document.getElementById('bb').value === 'X') {
            if(document.getElementById('cb').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
    else if(document.getElementById('ac').value === 'X') {
        if(document.getElementById('bc').value === 'X') {
            if(document.getElementById('cc').value === 'X') {
                alert("Player 1 has won!");
            }
        }
    }
}

这是HTML

<html>
<head>
<style>
</style>
</head>
<body>
<center>
Tic-Tac-Toe
</center>
<center>
<table border = "1">
    <tr>
        <td>
            <input value=" " id="aa" type="button" onClick="tic('aa')">
        </td>
        <td>
            <input value=" " id="ab" type="button" onClick="tic('ab')">
        </td>
        <td>
            <input value=" " id="ac" type="button" onClick="tic('ac')">
        </td>
    <tr>
    <tr>
        <td>
            <input value=" " id="ba" type="button" onClick="tic('ba')">
        </td>
        <td>
            <input value=" " id="bb" type="button" onClick="tic('bb')">
        </td>
        <td>
            <input value=" " id="bc" type="button" onClick="tic('bc')">
        </td>
    <tr>
    <tr>
        <td>
            <input value=" " id="ca" type="button" onClick="tic('ca')">
        </td>
        <td>
            <input value=" " id="cb" type="button" onClick="tic('cb')">
        </td>
        <td>
            <input value=" " id="cc" type="button" onClick="tic('cc')">
        </td>
    <tr>
</table>
<input type="button" value="Restart" onClick="document.location.reload(true)">
</center>
<script type="text/javascript" src="javascripttest.js"></script>
</body>
</html>

Answer 1

问题是else if使用不正确，您将使用else if 。

很难解释，但是让我们将代码简化为if..else if...

if(document.getElementById('aa').value === 'X') {
}
else if(document.getElementById('ba').value === 'X') {
}
else if(document.getElementById('ca').value === 'X') {
}
else if(document.getElementById('aa').value === 'X') {

我要在那儿停下来。 为什么？ 因为两次您都处于相同状态！ 这种重复归结为“ if A ... else if A”，在对角线获胜的情况下，您期望“ else if A”起作用！ 自然不会。

要解决此问题，请考虑删除else关键字，当玩家获胜时，使用return立即退出该功能。

Answer 2

您已经在第一次检查中输入了if(document.getElementById('aa').value === 'X') { ，因此不会以对角线转到elseif。 尝试if而不是else if

也许您可以尝试执行以下操作：

//board:
// 0 1 2
// 3 4 5
// 6 7 8
var won = false;
var arr = [
    ["aa", "ab", "ac"],
    ["ba", "bb", "bc"],
    ["ca", "cb", "cc"]
];
var board = [];
for (var row = 0; row < 3; row++) {
    for (var col = 0; col < 3; col++) {
        board[row * 3 + col] = (document.getElementById(arr[row][col]) == 'X');
    }
}

var checks = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [3, 4, 6]
];
for (var i = 0; i < checks.length; i++) {
    var count = 0;
    for (var j = 0; j < checks[i].length; j++) {
        count += checks[i][j];
    }
    if (count == 3) {
        won = true
    }
}
if (won) {
    //player one won!
}

Answer 3

我敢打赌，如果您在X的“ aa”中放置X，然后尝试在底行中以x获胜，那么它也会失败。

问题在于您链接if语句。 由于else-if的工作方式，如果第一个if语句为false，它将仅进入“ else”块。 因此，如果“ aa”是X，则除了第一行中的第一个检查以外，您将永远不会进行其他任何检查。

我正在尝试制作井字游戏，如果该人对角线获胜，则该游戏不起作用

问题描述

3 个解决方案

解决方案1
4 2014-05-10 20:48:08

解决方案2
2 已采纳 2014-05-10 20:47:53

解决方案3
0 2014-05-10 20:53:25

我正在尝试制作井字游戏，如果该人对角线获胜，则该游戏不起作用

问题描述

3 个解决方案

解决方案1 4 2014-05-10 20:48:08

解决方案2 2 已采纳 2014-05-10 20:47:53

解决方案3 0 2014-05-10 20:53:25

解决方案1
4 2014-05-10 20:48:08

解决方案2
2 已采纳 2014-05-10 20:47:53

解决方案3
0 2014-05-10 20:53:25