在井字棋游戏中切换用户

Question

我目前正在使用 javascript html css 开发 tic tac toe 项目。 问题是我确实通过用户的输入设置了构造函数，但是 我玩游戏时无法切换用户

我的期望是当你轮到你的时候能够切换用户。 我尝试了 if else 将当前玩家分配给玩家 1 如果玩家 1 - 我想将其更改为玩家 2

const gameBoard = (function() {
  // Select DOM elements
  const playerInput1 = document.querySelector("#player-select1");
  const playerButton = document.querySelector(".add-player");
  const playerInput2 = document.querySelector("#player-select2");
  const playerPara1 = document.querySelector(".player1");
  const playerPara2 = document.querySelector(".player2");
  const showPlayers = document.querySelector(".player-shows");
  const boxes = document.querySelectorAll(".box");

  // Game markers
  const gameMarker = ["O", "X"];
  let currentPlayer;
  let player1, player2;

  // Player factory function
  const playerSelection = (name, marker) => {
    let score = 0;
    return {
      name,
      marker,
      getScore: function() {
        return score;
      },
      scorePlus: function() {
        score++;
        return score;
      }
    };
  };

  // Initialize players
  player1 = playerSelection("Name", gameMarker[0]);
  player2 = playerSelection("Name", gameMarker[1]);

  // Event listener for player names
  playerButton.addEventListener("click", () => {
    player2.name = playerInput2.value.trim();
    player1.name = playerInput1.value.trim();

    if (player1.name === "" || player2.name === "") {
      alert("Please enter a name");
    } else {
      playerPara1.textContent = `First Player is: ${player1.name} (${player1.marker})`;
      playerPara2.textContent = `Second Player is: ${player2.name} (${player2.marker})`;
      showPlayers.innerHTML = "";
      showPlayers.append(playerPara1);
      showPlayers.append(playerPara2);

      // Start the game by setting the initial player
      playGame();
    }
  });

  // Add event listeners to boxes
  boxes.forEach((element) => {
    element.addEventListener("click", () => {
      if (element.textContent === "" && currentPlayer) { // Ensure box is empty and a player is set
        element.textContent = currentPlayer.marker; // Mark the box with the current player's marker
        playGame(); // Switch to the next player
      }
    });
  });

  // Function to switch current player
  const playGame = () => {
    if (currentPlayer === player1) {
      player1
    } else if (currentPlayer === player2) {
      player2
    }


  };

  // Return public methods
  return {
    playerSelection,
    playGame
  };
})();

<input type="text" id="player-select1">
<buttton class="add-player">Add</button>
<input type="text" id="player-select2">
<p class="player1"></p>
<p class="player2"></p>

<div class="player-shows"></div>

<div id="board">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
</div>

Answer 1

我使用@mplungjan 的片段作为出发点。首先，我修复了 CSS，以便我们可以实际看到一些东西。接下来，我意识到你检查当前玩家是否等于player1，在这种情况下你评估player1而不是将当前玩家设置为player2，反之亦然，其次，你错过了初始初始化，你需要处理当前玩家的情况仍然未定义，最后，您在任何点击以及点击方块时都调用游戏，因此当有人点击一个框时您会切换玩家两次，因为这是对框的点击以及本身的点击.

const gameBoard = (function() {
  // Select DOM elements
  const playerInput1 = document.querySelector("#player-select1");
  const playerButton = document.querySelector(".add-player");
  const playerInput2 = document.querySelector("#player-select2");
  const playerPara1 = document.querySelector(".player1");
  const playerPara2 = document.querySelector(".player2");
  const showPlayers = document.querySelector(".player-shows");
  const boxes = document.querySelectorAll(".box");

  // Game markers
  const gameMarker = ["O", "X"];
  let currentPlayer;
  let player1, player2;

  // Player factory function
  const playerSelection = (name, marker) => {
    let score = 0;
    return {
      name,
      marker,
      getScore: function() {
        return score;
      },
      scorePlus: function() {
        score++;
        return score;
      }
    };
  };

  // Initialize players
  player1 = playerSelection("Name", gameMarker[0]);
  player2 = playerSelection("Name", gameMarker[1]);
let initialized = false;
  // Event listener for player names
  playerButton.addEventListener("click", () => {
    player2.name = playerInput2.value.trim();
    player1.name = playerInput1.value.trim();

    if (player1.name === "" || player2.name === "") {
      
    } else {
      playerPara1.textContent = `First Player is: ${player1.name} (${player1.marker})`;
      playerPara2.textContent = `Second Player is: ${player2.name} (${player2.marker})`;
      showPlayers.innerHTML = "";
      showPlayers.append(playerPara1);
      showPlayers.append(playerPara2);

      // Start the game by setting the initial player
      if (!initialized) playGame();
      initialized = true;
    }
  });

  // Add event listeners to boxes
  boxes.forEach((element) => {
    element.addEventListener("click", () => {
      if (element.textContent === "" && currentPlayer) { // Ensure box is empty and a player is set
        element.textContent = currentPlayer.marker; // Mark the box with the current player's marker
        playGame(); // Switch to the next player
      }
    });
  });
  
  // Function to switch current player
  const playGame = () => {
    if (!currentPlayer) {
      currentPlayer = player1
    } else if (currentPlayer === player1) {
      currentPlayer = player2
    } else if (currentPlayer === player2) {
      currentPlayer = player1
    }


  };

  // Return public methods
  return {
    playerSelection,
    playGame
  };
})();

#board {
    display: table;
}

#board .row {
    display: table-row;
}

.box {
    background-color: gray;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: table-cell;
}

<input type="text" id="player-select1" placeholder="please enter a name">
<buttton class="add-player">Add</button>
<input type="text" id="player-select2" placeholder="please enter a name">
<p class="player1"></p>
<p class="player2"></p>

<div class="player-shows"></div>

<div id="board">
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>