Javascript 立即发现Tictatcoe的获胜者

我在相关主题中查找了解决方案，但不幸的是，我找不到合适的解决方案。关键是我不知道我的代码出了什么问题。 我正在尝试制作一个Tictatcoe游戏作为JS的一种实践。然而，我很难决定胜利者。正如其中一个算法所建议的，玩家一和玩家二必须有两个矩阵。应计算矩阵减法，并在最终数组中编制索引。 如果数组中的值相加为3，则玩家1获胜，如果为-3，则玩家2获胜，如果值为0，则为平局。应立即计算结果。我使用winstats计算这些值的总和并确定赢家。不过，在大多数情况下，这是南。如果你能帮我做这件事，我将不胜感激

顺便说一句，我的意思是，一旦采取第五个行动，它必须不断检查获胜的行动并宣布胜利者

更新：项目的代码笔链接为：

HTML表格：

          <div class="container d-flex justify-content-center">
            <table id="tictactoefield" class="">
                <tr>
                    <td id="block1" class="blocks" onclick="markNLock(0,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                    <td id="block2" class="" onclick="markNLock(1,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                    <td id="block3" class="blocks" onclick="markNLock(2,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                </tr>
                <tr>
                    <td id="block4" class=""  onclick="markNLock(3,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                    <td id="block5" class="blocks" onclick="markNLock(4,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                    <td id="block6" class="" onclick="markNLock(5,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                </tr>
                <tr>
                    <td id="block7" class="blocks" onclick="markNLock(6,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                    <td id="block8" class="" onclick="markNLock(7,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                    <td id="block9" class="blocks" onclick="markNLock(8,this)" onmouseover="setMouseOverColor(this)" onmouseout="setMouseOutColor(this)">
                        +
                    </td>
                </tr>
            </table>
          </div>

+
+
+
+
+
+
+
+
+

Javascript:

var turn = false;
var p1socre = 0;
var p2score = 0;
var handresult = 0;
var progresstart = false;
var counterp1 = 0;
var counterp2 = 1;
var insert = 0;
var totalcounter = 0;
var flag = false;
var MatrixFieldP1 = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var MatrixFieldP2 = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var MatrixFieldFinal = [];
var winstats = 0;
function startGame() {
    var btn = document.getElementById("startbtn");
    var btnstatus = document.getElementById("startbtn").textContent;
    if (btnstatus == "Start") {
        flag = true;
        btn.textContent = "Stop";
        progress();
    }
    if (btnstatus == "Stop") {
        flag = false;
        btn.textContent = "Start";
        progress();
    }
}
function markNLock(idx, mark) {
    console.log("P1 & P2", mark);
    console.log(MatrixFieldP1, MatrixFieldP2)
    if (flag == false) {
        return;
    }
    if (mark.innerText == "+") {

        if (turn == false) {
            mark.textContent = "X";
            MatrixFieldP1[idx] = 1;
            counterp1 += 2;
            turn = true;

        }
        else {
            mark.textContent = "O";
            MatrixFieldP2[idx] = -1;
            counterp2 += 2;
            turn = false;
        }
        if (totalcounter >= 4) {
            console.log(MatrixFieldFinal);

            for (var i = insert; i < MatrixFieldP2.length; i++) {
                MatrixFieldFinal.push(MatrixFieldP1[i] + MatrixFieldP2[i]);
                console.log(MatrixFieldFinal);
            }
            console.log(MatrixFieldFinal);
            for (var i = insert; i <= MatrixFieldFinal.length; i++) 
            {
                
                winstats += MatrixFieldFinal[i];
                console.log("winstats:", winstats);
                if (winstats == 3) {
                    alert("player 1 won!");
                    winstats = 0;
                }
                else if (winstats == -3) {
                    alert("player 2 won!");
                    winstats = 0;
                }
                else if(winstats == 0)
                {
                    alert("Draw!");
                    
                }
            }
            console.log(MatrixFieldFinal);
            
            insert = 6;
        }
        totalcounter++;
    }

}

var-turn=false；
var p1socre=0；
变量P20分=0；
var handresult=0；
var progressstart=false；
var=1=0；
var=2=1；
var-insert=0；
var totalcounter=0；
var标志=假；
var MatrixFieldP1=[0,0,0,0,0,0,0,0,0]；
var MatrixFieldP2=[0,0,0,0,0,0,0,0,0]；
var MatrixFieldFinal=[]；
var=0；
函数startName（）{
var btn=document.getElementById（“startbtn”）；
var btnstatus=document.getElementById（“startbtn”）.textContent；
如果（btnstatus==“开始”）{
flag=true；
btn.textContent=“停止”；
进步（）；
}
如果（btnstatus==“停止”）{
flag=false；
btn.textContent=“开始”；
进步（）；
}
}
函数markNLock（idx，mark）{
控制台日志（“P1和P2”，标记）；
日志（MatrixFielddP1、MatrixFielddP2）
如果（标志==false）{
返回；
}
如果（mark.innerText==“+”）{
if（turn==false）{
mark.textContent=“X”；
MatrixFieldP1[idx]=1；
1+=2；
转身=真；
}
否则{
mark.textContent=“O”；
MatrixFieldP2[idx]=-1；
2+=2；
转向=假；
}
如果（总计数器>=4）{
console.log（MatrixFieldFinal）；
对于（var i=insert；i对于（var i=insert；i）你所说的“立即”是什么意思？那么当前代码对你不起作用呢？@AntiqTech感谢你的回复。我已经在帖子中添加了Codepen链接。你得到NaN的原因是“我看了链接，它显示了一个赢矩阵。当你点击左上角时（在该网站中表示为“a”），玩家的矩阵应该是：[1,1,0,0,1,0,0,0]，但您的代码在单击：[1,0,0,0,0,0,0,0]后会显示这一点。这意味着您没有正确合并该算法。您必须使用该位置图（网站上的9x8矩阵）知道/使用哪个位置的模式。你保留两个矩阵，但算法说保留一个。第一个玩家移动，通过添加模式更新游戏矩阵；第二个玩家，通过删除模式更新游戏矩阵。@AntiqTech哦，我的错。我找到了。谢谢。