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.")
    }

}

我不知道您是否需要它来回答我的问题，但这是一个有关Divs外观的小例子：

<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>

我需要检查我的Divs是否在其中一个获奖组合中？如果是，则->有人赢了，如果不是，则->并列。

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

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函数）之前，让我们准备游戏结束功能：

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

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

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

JavaScript井字棋检查是否有人赢了

1 个答案: