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

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

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

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