如何在JavaScript模块间传递参数？井字棋功能故障排查

核心问题梳理 #

1. 变量初始化时机错误：gameModule加载时玩家还未选择X/O，circleTurn = playerChoice拿到的是undefined，后续回合判断逻辑完全失效。
2. 变量传递为值拷贝：startModule返回的playerChoice是原始值的拷贝，玩家点击后更新的playerChoice不会同步到gameModule的circleTurn。
3. O按钮无事件监听：代码仅处理了X按钮的点击，玩家选O时没有任何响应。
4. 缺失核心游戏函数：handleClick里调用的placeMark、checkWin等关键函数未定义，执行时直接报错。

修复方案 #

1. 给startModule添加回调通知机制

玩家选择X/O后，主动通知gameModule更新回合状态并初始化游戏。

2. 补全O按钮的点击逻辑

给O按钮添加点击事件，设置对应的playerChoice值。

3. 在gameModule中添加状态更新方法

添加专门的方法同步玩家选择到circleTurn，确保状态流转正确。

4. 补全缺失的核心函数

实现游戏必需的标记放置、胜负判断、回合切换等函数，保证逻辑闭环。

修复后完整代码 #

JavaScript部分

const startModule = (() => {
  let xButton = document.getElementById("player-choiceX");
  let oButton = document.getElementById("player-choiceO");
  let playerChoice;

  const xoChoice = (onChoiceMade) => {
    // X按钮点击逻辑
    xButton.addEventListener('click', function(e){
      playerChoice = false;
      document.getElementById("playerChoice").style.display = "none";
      onChoiceMade(playerChoice);
    });
    // O按钮点击逻辑
    oButton.addEventListener('click', function(e){
      playerChoice = true;
      document.getElementById("playerChoice").style.display = "none";
      onChoiceMade(playerChoice);
    });
  };

  return {
    xoChoice
  };
})();

const gameModule = (() => {
  const board = document.getElementById("board");
  const X_CLASS = 'x';
  const CIRCLE_CLASS = 'circle';
  const resetButton = document.getElementById("reset");
  const winningMessageElement = document.getElementById("winningMessage");
  const cellElements = document.querySelectorAll("[data-cell]");
  const winningMessageTextElement = document.querySelector("[data-winning-message-text]");
  let circleTurn;

  const WINNING_COMBINATIONS = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];

  // 放置X/O标记
  const placeMark = (cell, currentClass) => {
    cell.classList.add(currentClass);
  };

  // 交换回合
  const swapTurns = () => {
    circleTurn = !circleTurn;
  };

  // 设置棋盘hover预览样式
  const setBoardHoverClass = () => {
    board.classList.remove(X_CLASS);
    board.classList.remove(CIRCLE_CLASS);
    board.classList.add(circleTurn ? CIRCLE_CLASS : X_CLASS);
  };

  // 检查当前玩家是否获胜
  const checkWin = (currentClass) => {
    return WINNING_COMBINATIONS.some(combination => {
      return combination.every(index => {
        return cellElements[index].classList.contains(currentClass);
      });
    });
  };

  // 检查是否平局
  const isDraw = () => {
    return [...cellElements].every(cell => {
      return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS);
    });
  };

  // 结束游戏并显示结果
  const endGame = (isDraw = false) => {
    if (isDraw) {
      winningMessageTextElement.textContent = '平局！';
    } else {
      winningMessageTextElement.textContent = `${circleTurn ? 'O' : 'X'} 获胜！`;
    }
    winningMessageElement.classList.add('show');
  };

  // 更新玩家选择并启动游戏
  const setPlayerChoice = (choice) => {
    circleTurn = choice;
    startGame();
  };

  const startGame = () => {
    cellElements.forEach(cell => {
      cell.classList.remove(X_CLASS);
      cell.classList.remove(CIRCLE_CLASS);
      cell.removeEventListener('click', handleClick);
      cell.addEventListener('click', handleClick, {once: true});
    });
    setBoardHoverClass();
    winningMessageElement.classList.remove('show');
  };

  const handleClick = (e) => {
    const cell = e.target;
    const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS;
    placeMark(cell, currentClass);
    if (checkWin(currentClass)) {
      endGame();
    } else if(isDraw()) {
      endGame(true);
    } else {
      swapTurns();
      setBoardHoverClass();
    }
  };

  // 重置按钮事件监听（仅绑定一次）
  resetButton.addEventListener('click', startGame);

  return {
    startGame,
    setPlayerChoice
  };
})();

// 启动选择模块，传递回调函数处理玩家选择
startModule.xoChoice((choice) => {
  gameModule.setPlayerChoice(choice);
});

HTML部分（添加基础样式保证功能可见）

<!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">
    <script src="index2.js" defer></script>
    <title>TicTacToe</title>
    <style>
        .player-choice {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .player-choiceX, .player-choiceO {
            width: 100px;
            height: 100px;
            margin: 0 20px;
            cursor: pointer;
            color: white;
            font-size: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 5px;
            margin: 30px auto;
            width: fit-content;
        }
        .cell {
            width: 100px;
            height: 100px;
            border: 2px solid #333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
        }
        .winning-message {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            color: white;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
        .winning-message.show {
            display: flex;
        }
        #reset {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
        }
        .x {
            color: #ff4444;
        }
        .circle {
            color: #33b5e5;
        }
        .board.x .cell:not(.x):not(.circle):hover::after {
            content: 'X';
            color: #ffcccc;
        }
        .board.circle .cell:not(.x):not(.circle):hover::after {
            content: 'O';
            color: #cceeff;
        }
    </style>
</head>
<body>
    <div class="player-choice" id="playerChoice">
        <div class="xOrCircle">
                <div class="player-choiceX" id="player-choiceX">X</div>
                <div class="player-choiceO" id="player-choiceO">O</div>
        </div>
    </div>
    <div class="board" id="board">
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
        <div class="cell" data-cell></div>
    </div>
    <div class="winning-message" id="winningMessage">
        <div data-winning-message-text></div>
        <button id="reset">Reset</button>
    </div>
</body>
</html>

关键说明 #

• 用回调函数替代直接变量传递，确保玩家选择后才初始化游戏并更新回合状态
• 补全所有核心游戏函数，形成完整的逻辑闭环
• 添加基础样式让选择界面、棋盘、胜负提示可见可用
• 重置按钮事件仅绑定一次，避免重复绑定导致的多次触发问题

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