JavaScript TicTacToe 如果...获胜者检测

Question

我只是有一个小问题。

我的计算机科学课的最后一项作业是用 JavaScript 编写一个 Tic-Tac-Toe 游戏。该游戏通过单击表格中的单元格并使用 function() 将 img 源（单击之前的空白图像）切换为 X 或 O 来运行。它即将完成，但有一件事我无法得到.

显然，该游戏由两名玩家进行。我需要做的最后一件事是获取它（一个函数）来检测玩家何时获胜并在发生这种情况时终止脚本。我就是想不通。我知道它涉及 if 语句，并且我尝试了几种不同的代码，但我编写的所有代码都破坏了游戏。

我确实看到以前有人问过这个问题，我试过点击右侧“类似问题”框中的几个链接，但所有这些都是我从未学过的语言（例如 C#） .

这是我的脚本：

 <script type="text/javascript" charset="ISO-8859-1">
function placeMove(value)
{
    if (document.getElementById(value).src.indexOf("FC")!=-1) //"FC" because of the FC contained in the file name. I intended for it to stand for "free cell", for easy indentification.
    {
        var turn = document.getElementById("playerturn").innerHTML;
        if (turn == "X")
        {
            document.getElementById(value).src="../Images/TicTacToeX.jpg";
            document.getElementById("playerturn").innerHTML="O";
        }
        if (turn == "O")
        {
            document.getElementById(value).src="../Images/TicTacToeO.jpg";
            document.getElementById("playerturn").innerHTML="X";
        }
    }
    else
    {
        window.alert("Tile is in use. Please select another tile.");
    }
}
function detectWin()
{

}
</script>

这是游戏发生的桌子，如果有帮助的话：

 <table class="gametable" id="gametable" border="1">
<tr>
    <td><img onclick="placeMove('r1c1')" id="r1c1" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
    <td><img onclick="placeMove('r1c2')" id="r1c2" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
    <td><img onclick="placeMove('r1c3')" id="r1c3" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
</tr>
<tr>
    <td><img onclick="placeMove('r2c1')" id="r2c1" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
    <td><img onclick="placeMove('r2c2')" id="r2c2" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
    <td><img onclick="placeMove('r2c3')" id="r2c3" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
</tr>
<tr>
    <td><img onclick="placeMove('r3c1')" id="r3c1" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
    <td><img onclick="placeMove('r3c2')" id="r3c2" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
    <td><img onclick="placeMove('r3c3')" id="r3c3" class="blank" alt="blank space" src="../Images/TicTacToeFC.jpg"></img></td>
</tr>
</table>

作业明天到期，我只需要最后一点代码。

任何帮助是极大的赞赏。这是我本学期的最后一个作业。

谢谢，

凯尔

编辑：经过一些建议，这是我一直在尝试的。输入此代码将不允许玩游戏。如果只是缺少分号的问题，还请见谅。它涉及将每个单元格中的 img 源设置为一个变量，并检查这些变量是否匹配。

我创建了 9 个变量，一个用于每个单元格/X 或 O 图像：

 var pic1 = document.getElementById("r1c1").src;
var pic2 = document.getElementById("r1c2").src;
var pic3 = document.getElementById("r1c3").src;
var pic4 = document.getElementById("r2c1").src;
var pic5 = document.getElementById("r2c2").src;
var pic6 = document.getElementById("r2c3").src;
var pic7 = document.getElementById("r3c1").src;
var pic8 = document.getElementById("r3c2").src;
var pic9 = document.getElementById("r3c3").src;

这是第一个脚本的最后：

 function detectWin()
{
if (var pic1 == var pic2 && var pic3)
{
window.alert("Game won. Please reset the game.");
}
}

这显然只检测到第一行的胜利。如果我能让它工作，我就会知道其余的代码必须是什么。不过，我仍然不知道如何终止脚本。

编辑以删除一些不必要的评论和语法错误。

原文由 Jazzy663 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我从头开始编写代码，您可以在其中查看我检查谁赢得比赛的版本。如果我的游戏版本与您不同，请不要投票。我只想向您展示如何在不了解任何算法的情况下编写代码。

你只需要动力。下次不要这么快放弃。

jsFiddle

我检查谁赢了的版本：

 var checkResult = function(){
    $("table tr").each(function(i, val){
        $(this).find('td').each(function(j, val2){
            arr[i][j] = parseInt($(this).attr("data-points"));
        });
    });

    for(var i = 0; i<3;i++){
        var rowSum = 0;
        for(var j = 0; j<3;j++){
            rowSum += arr[i][j];
        }
        if(rowSum === 3)
            alert("Circle WIN!");
        else if(rowSum === -3)
            alert("Cross WIN!");
    }

    for(var i = 0; i<3;i++){
        var colSum = 0;
        for(var j = 0; j<3;j++){
            colSum += arr[j][i];
        }
        if(colSum === 3)
            alert("Circle WIN!");
        else if(colSum === -3)
            alert("Cross WIN!");
    }

    if(arr[0][0] + arr[1][1] + arr[2][2] === 3)
        alert("Circle WIN!");
    else if(arr[0][0] + arr[1][1] + arr[2][2] === -3)
        alert("Cross WIN!");

    if(arr[2][0] + arr[1][1] + arr[0][2] === 3)
        alert("Circle WIN!");
    else if(arr[2][0] + arr[1][1] + arr[0][2] === -3)
        alert("Cross WIN!");
};

原文由 WooCaSh 发布，翻译遵循 CC BY-SA 3.0 许可协议