时间戳

首页 > 解决方案 > 井字游戏 2 名玩家

javascript - 井字游戏 2 名玩家

问题描述

嘿，我有一个关于 javascript 的问题。目前我必须编写一个井字游戏。我已经到了第一个球员可以将他的十字架放在左上角的位置。现在我问我的问题，我如何才能在第一个带有符号 X 的玩家之后，第二个带有符号 O 的玩家打开并玩。

目前的代码： 

function erstes() {
  var x = document.getElementById("erstesfeld");
  if (x.innerHTML === "Blank")
   {
    x.innerHTML = "X";
    document.getElementById("erstesfeld").style.fontSize = "100px";
    document.getElementById("erstesfeld").style.fontFamily = "cursive";
  }
}
.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

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

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}
<!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>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld" onclick="erstes()">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld" onclick="zweites()">Blank</button></div>
        <div><button class="drei" id="drittesfeld" onclick="drittes()">Blank</button></div>
        <div><button class="vier">Blank</button></div>
        <div><button class="fünf">Blank</button></div>
        <div><button class="sechs">Blank</button></div>
        <div><button class="sieben">Blank</button></div>
        <div><button class="acht">Blank</button></div>
        <div><button class="neun">Blank</button></div>
    </div>
</body>
</html>

标签： javascripthtmltic-tac-toe

解决方案

最简单的是，只需存储一个布尔标志来指示您是处于X还是O模式。

但是请不要把这个函数写9次。为所有字段重用一个函数（你也不应该重复你的 css 9 次！）

let isX = true;

document.querySelectorAll("button").forEach(b => b.addEventListener("click",(e) => {
 let target = e.target
  if (target.innerHTML === "Blank")
   {
    target.innerHTML = isX ? "X" : "O";
    target.style.fontSize = "100px";
    target.style.fontFamily = "cursive";
    isX = !isX;
  }
}))
.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

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

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}
<!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>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld">Blank</button></div>
        <div><button class="drei" id="drittesfeld">Blank</button></div>
        <div><button class="vier">Blank</button></div>
        <div><button class="fünf">Blank</button></div>
        <div><button class="sechs">Blank</button></div>
        <div><button class="sieben">Blank</button></div>
        <div><button class="acht">Blank</button></div>
        <div><button class="neun">Blank</button></div>
    </div>
</body>
</html>

推荐阅读