井字游戏 2 位玩家

Question

嘿，我有一个关于 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>

Answer 1

你有所谓的标志 - 一些布尔变量 - 保存当前用户的状态，在移动结束时你切换这个标志以指向另一个用户。

// Define _flag_ to hold state
let isCurrentX = true;

$(document).ready(function () {
  $(document).on('click', 'button:not(.owned)', function () {
    // Act depending on current _flag_ state
    if (isCurrentX) {
      $(this).addClass('owned x');
    } else {
      $(this).addClass('owned o');
    }
    
    $(this).prop('disabled', true);
    
    // Switch _flag_ state
    isCurrentX = !isCurrentX;
  });
});

button:before  {
  content: 'Click';
  display: inline;
  font-style: italic;
}

button.x:before {
  content: 'X';
  display: inline;
  font-style: inherit;
}

button.o:before {
  content: 'O';
  display: inline;
  font-style: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="tic-tac">
  <div class="row">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
  <div class="row">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
  <div class="row">
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </div>
</div>

Answer 2

总结！

创建一个变量来跟踪当前玩家。
为零创建另一个函数。
创建一个函数来处理点击事件。
在该函数中检查当前玩家并根据该玩家调用 erstes 或零函数。

let currentPlayer = "player1";
function handleClick(box) {
  if(currentPlayer === "player1"){
    erstes(box);
    currentPlayer = "player2";
  }else{
    zero(box);
    currentPlayer = "player1";
  }
}
function erstes(box) {
  var x = box;
  if (x.innerHTML === "Blank")
   {
    x.innerHTML = "X";
    x.style.fontSize = "100px";
    x.style.fontFamily = "cursive";
  }
}
function zero(box) {
  var o = box;
  if (o.innerHTML === "Blank")
   {
    o.innerHTML = "O";
    o.style.fontSize = "100px";
    o.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="handleClick(this)">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld" onclick="handleClick(this)">Blank</button></div>
        <div><button class="drei" id="drittesfeld" onclick="handleClick(this)">Blank</button></div>
        <div><button class="vier" onclick="handleClick(this)">Blank</button></div>
        <div><button class="fünf" onclick="handleClick(this)">Blank</button></div>
        <div><button class="sechs" onclick="handleClick(this)">Blank</button></div>
        <div><button class="sieben" onclick="handleClick(this)">Blank</button></div>
        <div><button class="acht" onclick="handleClick(this)">Blank</button></div>
        <div><button class="neun" onclick="handleClick(this)">Blank</button></div>
    </div>
</body>
</html>

Answer 3

最简单的是，只需存储一个布尔标志以指示您是处于 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>

井字游戏 2 位玩家

Tic Tac Toe 2 players

html

javascript

tic-tac-toe