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

Question

我有一个问题。我必须玩井字游戏，现在遇到了一个问题，我不知道如何在 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>

Answer 1

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

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

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

部分内容包括：

使用document.getElementById方法将“框”元素放入变量（最好是数组或映射，以便于以逻辑而非手动方式引用元素，但单个变量会工作）
测试获胜线的这些变量，因此测试一条获胜线的粗略示例是（其中 box1、box2 和 box3 是上一步中的框元素, 和 processWin 一些函数，它在获胜时执行所需的任何操作）：

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

当然，如果您可以概括两个玩家的功能，这一切都会好得多（例如，而不是使用上面的“X”，有一个变量“activePlayerSymbol”，它被设置为“O”或“X” )

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

Tic Tac Toe 2 Players Track if they Win

html

javascript

tic-tac-toe