井字游戏 2 玩家

时间：2021-05-24 13:30:22

标签： javascript html tic-tac-toe

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

3 个答案:

答案 0 :(得分：1)

最简单的方法是存储一个布尔标志来指示您是处于 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>

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

总结！

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

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>

相关问题
最新问题