JavaScript井字游戏检查是否有人赢了

Question

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

我放置圆圈和十字的“游乐场”由 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 函数到目前为止的样子（几乎是空的）：

function checkwin(){
    if(indexOf("") == )

    if()

    if()

    else{
        alert("Player One and Player Two tied the game.")
    }

}

我不知道您是否需要它来回答我的问题，但这里有一个我的 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 是否属于获胜者组合订单之一？如果是 -> 有人赢了，如果不是这样 -> 平局。

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

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

Answer 1

如果你想创建一个游戏，你应该为它创建一个包含数据的模型，并将它与设计分开。在你的情况下：

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

这回答了您如何检查获胜者组合的问题：它是模型业务。在我们准备模型之前（包括上面的model.update函数），让我们准备gameover函数：

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

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

现在祝你好运，让我们看看你是否可以添加绑定游戏功能。