Tic Tac Toe 2 玩家追踪他们是否获胜答案

【问题标题】：Tic Tac Toe 2 Players Track if they WinTic Tac Toe 2 玩家追踪他们是否获胜
【发布时间】：2021-06-11 11:48:43
【问题描述】：

我有一个问题。我必须做一个井字游戏，现在有一个问题，我不知道如何在 Javascript 中做到这一点，它可以识别谁赢了。有人可以帮我吗？也许有一个数组或几个变量。我怎样才能做到当我点击一个字段时我不能再点击它？

let currentPlayer = "player1";      //player1 wird als erstes festgelegt

function handleClick(box) {
  if(currentPlayer === "player1"){  //wenn currentPlayer === player1
    erstes(box);                    //wird die funktion erstes(box) ausgeführt
    currentPlayer = "player2";      //und currentPlayer wird auf 2 gesetzt
  }else{
    zero(box);                      //wenn currentPlayer === player2 wird die funktion zero(box) ausgeführt                    
    currentPlayer = "player1";      //und currentPlayer wird wieder auf 1 gesetzt
  }
}
function erstes(box) {
  var x = box;                     
  if (x.innerHTML === " ")          //wenn in dem Button nichts steht
   {      
    x.innerHTML = "X";              //wird der button onclick auf X gestzt
    x.style.fontSize = "100px";     //das aussehen des X wird bestimmt
    x.style.fontFamily = "cursive";
  }
}
function zero(box) {
  var o = box;
  if (o.innerHTML === " ")          //wenn in dem Button nichts steht
   {
    o.innerHTML = "O";              //wird der button onclick auf O gestzt
    o.style.fontSize = "100px";     //das aussehen des O wird bestimmt
    o.style.fontFamily = "cursive";
  }
}

.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}
.ueber{
    color: white;
}
body{
    
    max-width: 500px;
    margin: auto;
    margin-top: 5%;
    text-align: center;
    background-image: url("https://wallpaperaccess.com/full/569754.jpg"), url("https://wallpaperaccess.com/full/569754.jpg");
}

.Feld div{
    width: 200px;
    height: 200px;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: white;
    border-top-left-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}
.drei{
    width: 200px;
    height: 200px;
    border-color: white;
    border-top-right-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}
.vier{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: white;
    border-bottom-left-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.acht{
    width: 200px;
    height: 200px;
    border-color: white;
    background-color: black;
    color: white;
    cursor: pointer; 
}

.neun{
    width: 200px;
    height: 200px;
    border-color: white;
    border-bottom-right-radius: 10%;
    background-color: black;
    color: white;
    cursor: pointer; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <fieldset> <legend class="ueber">Tic Tac Toe</legend>

    <div class="Feld">
        <div><button class="eins" id="1" onclick="handleClick(this)"> </button></div>
        <div><button class="zwei" id="2" onclick="handleClick(this)"> </button></div>
        <div><button class="drei" id="3" onclick="handleClick(this)"> </button></div>
        <div><button class="vier" id="4" onclick="handleClick(this)"> </button></div>
        <div><button class="fünf" id="5" onclick="handleClick(this)"> </button></div>
        <div><button class="sechs" id="6" onclick="handleClick(this)"> </button></div>
        <div><button class="sieben" id="7" onclick="handleClick(this)"> </button></div>
        <div><button class="acht" id="8" onclick="handleClick(this)"> </button></div>
        <div><button class="neun" id="9" onclick="handleClick(this)"> </button></div>
    </div>
</fieldset>
</body>
</html>

【问题讨论】：

请阅读this

标签： javascript html tic-tac-toe

【解决方案1】：

你自己应该对此有所了解，所以我不想为你编写答案......但这里有一些片段和想法。

您可以在玩家点击轮到自己后立即查看他们是否赢了，所以在 handleClick 函数的末尾。

一种粗略且现成的方法是收集所有“盒子”元素，然后检查所有行、列和对角线。

其中的一些部分包括：

使用document.getElementById 方法将“盒子”元素放入变量中（理想情况下是数组或映射，以便以逻辑而非手动方式轻松引用元素，但单个变量也可以使用）
测试获胜线的这些变量，因此测试一条获胜线的粗略示例是（其中box1、box2 和box3 是上一步中的框元素，processWin 是一些函数当胜利发生时做了任何需要的事情）：

if ( box1.innerHtml === "X" && box2.innerHtml === "X" && box3.innerHtml === "X" ) processWin()

如果您可以概括两个播放器的功能，这自然会更好（例如，不是使用上面的“X”，而是将变量“activePlayerSymbol”设置为“O”或“X”）

【讨论】：