JavaScript Tic Tac Toe检查是否有人赢了

我写了一个小程序，可以让我玩井字游戏。 但是现在我被困住了，因为我不知道该如何检查某人是否赢了

我的“操场”，你把圆圈和十字架是由9个div组成的。 我制作了这个阵列，其中有获胜的选项：

const winnercombinations = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [1,5,9],
    [3,5,7],
    [1,4,7],
    [2,5,8],
    [3,6,9],
];

这就是我的checkwin函数到目前为止的样子（几乎是空的）：

我不知道你是否需要它来回答我的问题，但这里有一个关于我的div的小例子：

<div class="gameboard">
    <div class="layout" id="firstdiv" onclick=play(this);></div>
    <div class="layout" id="seconddiv" onclick=play(this);></div>
    <div class="layout" id="thirddiv" onclick=play(this);></div>
    <div class="layout" id="fourthdiv" onclick=play(this);></div>
    <div class="layout" id="fifthdiv" onclick=play(this);></div>
    <div class="layout" id="sixthdiv" onclick=play(this);></div>
    <div class="layout" id="seventhdiv" onclick=play(this);></div>
    <div class="layout" id="eightdiv" onclick=play(this);></div>
    <div class="layout" id="ninthdiv" onclick=play(this);></div>
</div>

我需要检查我的div是否在winnercombination命令中？如果是->有人赢了，如果不是这样->打成平局

这里是我的游戏功能，因为您可能需要回答我的问题：

function play(clickedDiv){
    clickedDiv.onclick = "";
    clickedDiv.innerHTML = "<span>" + zeichen[weristdran] + "</span>";
    toggle();
}

功能播放（点击编辑）{
单击ddiv.onclick=“”；
单击EdDiv.innerHTML=“+zeichen[weristdran]+”；
切换（）；
}

如果你想创建一个游戏，你应该为它创建一个包含数据的模型，并将其与设计分开。就你而言：

<div class="gameboard">
    <div class="layout" data-index="0"></div>
    <div class="layout" data-index="1"></div>
    <div class="layout" data-index="2"></div>
    <div class="layout" data-index="3"></div>
    <div class="layout" data-index="4"></div>
    <div class="layout" data-index="5"></div>
    <div class="layout" data-index="6"></div>
    <div class="layout" data-index="7"></div>
    <div class="layout" data-index="8"></div>
</div>

到目前为止，我们正在做游戏设计。现在我们在模型中添加游戏逻辑，与设计分离：

var model = {
  player: "X",
  data: ["","","","","","","","",""],
  update: function(pos) {
    if(model.data[pos]=="") model.data[pos] = model.player;
    model.player = model.player=="X" ? "O" : "X";
    model.checkWinner();
    return model.data[pos];
  },
  checkWinner: function() {
    const combos = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,4,8],
        [2,4,6],
        [0,3,6],
        [1,4,7],
        [2,5,8],
    ];
    combos.forEach(function(row) {
      var a = row[0], b = row[1], c = row[2];
      if(model.data[a]!="" && model.data[a]==model.data[b] && model.data[b]==model.data[c])
        game.won(model.player, row);
    });
  }
}

请注意，您可以在画布或无html GUI中使用相同的模型。这种责任分离是框架问题（比如统一），即使你不使用任何框架，你也应该使用这种方法，否则你的游戏很快就会变得一团糟

---

现在祝您好运，让我们看看您是否可以添加平局游戏功能。

欢迎使用。我建议您单击，然后单击stacksnippet编辑器

[]

，并提供您的问题1的详细信息。您的

播放功能中有什么？2.请使用循环检查玩家在最后一步后是否获胜。Tic Tac Toe是一个完美的简单循环示例！这可能就是问题所在，我的play函数中没有循环。为了更好地回答问题，我会关注这个问题（比如“如何在JS数组中实现Tic-Tac-Toe模式？”-没有HTML部分。如果这个问题对解决类似问题的其他人有用，那就更好了。@JanTuroň我不认为是HTML部分。它是不完整的代码。它甚至不是伪代码，这相当于“为我做这个”此外，为了便于操作，我不久前写了一篇文章，讲述了随着你变得越来越熟练，如何通过tic-tac-toe进行改进。在你所走的路线上，你最终得到的是：-你会很快了解到，在敲定这些部件之前，你需要考虑一下设计。tic-tac-toe看起来很简单，但它会在if-else语句中大量出现如果你愿意的话。这是一次学习经历。非常感谢你，你帮了我很多忙！：）
var fields = document.querySelectorAll(".layout");
for(let i=0; i<fields.length; ++i) fields[i].onclick = function(e) {
  e.target.innerHTML = model.update(e.target.dataset.index);
}

var game = {
  won: function(player, row) {
    alert("Player "+player+ " won at "+row.toString());
  }
}

var model = {
  player: "X",
  data: ["","","","","","","","",""],
  update: function(pos) {
    if(model.data[pos]=="") model.data[pos] = model.player;
    model.player = model.player=="X" ? "O" : "X";
    model.checkWinner();
    return model.data[pos];
  },
  checkWinner: function() {
    const combos = [
        [0,1,2],
        [3,4,5],
        [6,7,8],
        [0,4,8],
        [2,4,6],
        [0,3,6],
        [1,4,7],
        [2,5,8],
    ];
    combos.forEach(function(row) {
      var a = row[0], b = row[1], c = row[2];
      if(model.data[a]!="" && model.data[a]==model.data[b] && model.data[b]==model.data[c])
        game.won(model.player, row);
    });
  }
}