基于JS/HTML/CSS的井字棋游戏玩家切换功能异常求助

问题概述 #

我用JavaScript、HTML和CSS开发井字棋项目，已经完成玩家输入构造，但游戏中无法实现回合制玩家切换。尝试用if-else语句在当前玩家为player1时切换到player2，但没成功。

问题根源与修复方案 #

你的playGame函数仅做了玩家判断，没有执行实际切换赋值，且首次调用时未初始化先手玩家。具体修复点：

• 首次调用playGame时，将currentPlayer设为player1（先手玩家）
• 完善切换逻辑：判断当前玩家后，将currentPlayer赋值为另一位玩家

修改后的JavaScript代码 #

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 = () => {
    // 初始化先手玩家为player1
    if (!currentPlayer) {
      currentPlayer = player1;
    } else if (currentPlayer === player1) {
      currentPlayer = player2; // 切换到player2
    } else {
      currentPlayer = player1; // 切换回player1
    }
  };

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

HTML笔误修复 #

原HTML中按钮标签拼写错误（<buttton>），修复后代码：

<input type="text" id="player-select1">
<button 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>

内容的提问来源于stack exchange，提问作者deniz