如何在模块内为井字棋格子的event listener实现交替落子功能？

核心实现逻辑 #

• 用内部状态变量记录当前落子方（currentPlayer，值为'x'或'o'）
• 点击棋盘格子时，先校验位置是否已被占用、棋盘是否填满，通过校验后同步更新board数组和页面显示
• 每完成一次有效落子，自动切换玩家

模块化代码实现 #

假设你的模块已具备基础结构，补充落子逻辑后的完整代码如下：

const TicTacToeModule = (() => {
  // 初始化9格空棋盘数组
  let board = Array(9).fill(null);
  // 默认先手为x
  let currentPlayer = 'x';
  // 获取所有棋盘格子DOM元素
  const cells = document.querySelectorAll('.board-cell');

  // 初始化事件监听
  const init = () => {
    cells.forEach((cell, index) => {
      cell.addEventListener('click', () => handleCellClick(index));
    });
  };

  // 格子点击处理函数
  const handleCellClick = (index) => {
    // 跳过已落子或棋盘已满的情况
    if (board[index] || isBoardFull()) return;

    // 更新board数组
    board[index] = currentPlayer;
    // 同步更新页面显示
    cells[index].textContent = currentPlayer;
    // 切换下一位玩家
    currentPlayer = currentPlayer === 'x' ? 'o' : 'x';
  };

  // 校验棋盘是否已填满
  const isBoardFull = () => {
    return board.every(cell => cell !== null);
  };

  // 暴露初始化方法供外部调用
  return {
    init
  };
})();

// 页面加载完成后初始化游戏
document.addEventListener('DOMContentLoaded', () => {
  TicTacToeModule.init();
});

关键细节说明 #

• 模块化隔离：所有内部状态（board、currentPlayer）和工具函数（isBoardFull）都封装在IIFE模块内，不会污染全局作用域
• 防重复落子：通过board[index]判断目标位置是否已有内容，避免无效操作
• 数据视图同步：修改board数组后立即更新对应DOM元素的文本，保证数据与页面展示一致
• 交替落子逻辑：利用三元表达式快速切换currentPlayer，实现x和o轮流落子

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