JavaScript TicTacToe if... 获胜者检测

Question

我只是有一个小问题。

我的计算机科学课的最后一个任务是用 JavaScript 编写一个井字游戏。该游戏的工作原理是点击表格中的单元格并使用 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.");
}
}

这显然只检测到第一行的胜利。如果我能让它工作，我就会知道剩下的代码是什么。不过，我仍然不知道如何杀死脚本。

编辑删除了一些不必要的注释和语法错误。

Answer 1

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

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

js小提琴

我用于检查谁获胜的版本：

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!");
};

Answer 2

我看到你说你在 Stack Overflow 上搜索过类似的问题。我知道对于编程新手来说，阅读另一种语言的内容并不容易，但基本思想就在那里。这是一个已经完成的链接：Algorithm for Untiling Tic Tac Toe Game Over。

话虽这么说，在游戏中获胜的方法基本上有 3 种，而你的变量正朝着正确的方向前进。

获胜的三种方式是

1. 共 3 场比赛
2. 落后 3 场比赛
3. 3 条对角线匹配。

简单的部分是行和列，只需循环遍历每一行/列，看看是否获得三个匹配项，如果是，那么您就可以宣布获胜者。

低效伪代码示例：

if pic1, pic2, and pic3 are the same
alert user X or O has won
end the game.

对第 2 行和第 3 行重复上述操作。

if pic1, pic4, and pic7 are the same
alert user X or O has won
end the game.

对第 2 列和第 3 列重复此操作。

对角线也可以以简单的方式完成，无需使用示例中的二维数组。基本上只有两种对角获胜的可能性：

1. 变量 1、5、9 匹配
2. 变量 3、5、7 匹配。

任何其他事情都可以以平局结束游戏。我建议使用链接示例中所示的计数器。

祝你好运！-- 为清楚起见进行编辑 --