单选按钮控制游戏逻辑的实现方法

本文深入剖析了JavaScript中单选按钮动态切换游戏模式时频繁出现的“函数未定义”等顽疾，直击作用域混乱、嵌套函数不可见、状态重复声明等核心陷阱，并以井字棋PvP/PvC双模式为例，提供一套结构清晰、即插即用的模块化解决方案——通过将gameMode设为全局配置开关，把落子、判胜、AI决策等逻辑解耦为独立可复用函数，再由统一入口startGame按需编排执行流程，既彻底规避运行时错误，又大幅提升代码可读性、可维护性与扩展性，让多模式交互开发真正变得稳健而优雅。

本文详解 JavaScript 中单选按钮（radio）触发条件化函数执行的核心原理，重点解决因作用域、函数声明位置、执行时机不当导致的“函数未定义”“嵌套函数不可用”等常见问题，并提供可直接运行的模块化解决方案。

在开发如井字棋（Tic-Tac-Toe）这类支持「玩家对战（PvP）」和「玩家对电脑（PvC）」双模式的游戏时，一个典型需求是：用户通过单选按钮选择游戏类型后，点击“开始”按钮，程序应据此加载并执行对应的游戏逻辑分支。但初学者常遇到 pvp is not defined 或 boxClick is not a function 等报错——这并非语法错误，而是对 JavaScript 执行上下文与作用域机制理解不足所致。

? 问题根源：嵌套函数 ≠ 可导出逻辑单元

在原始代码中，pvp() 被定义为一个包含完整游戏逻辑的外层函数，其内部又声明了 boxClick、updateBox、isWinner 等嵌套函数：

function pvp() {
  // ⚠️ 所有变量和函数在此作用域内声明
  var x = "x";
  var o = "o";
  var options = ["", "", "", "", "", "", "", "", ""];

  function boxClick() { /* ... */ }
  function updateBox() { /* ... */ }
  function isWinner() { /* ... */ }
}

该设计存在三大致命缺陷：

1. 作用域隔离：boxClick 等函数仅在 pvp() 调用时才被创建，且对外部完全不可见；而事件监听器（如 box.addEventListener('click', boxClick)）需引用一个全局或至少在初始化阶段可访问的函数；
2. 未实际调用：pvp() 本身从未被显式调用（仅定义），其内部逻辑自然永不执行；
3. 变量重复声明：options、running 等状态变量在 pvp() 内重复定义，与全局 init() 中已初始化的同名变量冲突，造成逻辑混乱。

✅ 正确思路：将游戏模式视为配置项，而非函数封装体。所有核心逻辑（如落子、胜负判定）应保持全局/模块级可访问性，再通过统一入口函数（如 startGame()）根据 gameMode 值动态启用/禁用特定行为（例如 PvC 需调用 AI 决策，而 PvP 不需要）。

✅ 推荐实践：解耦模式选择与逻辑执行

以下是一个结构清晰、符合生产规范的重构方案（兼容原 HTML 结构）：

1. 统一状态管理与初始化

// ? 全局状态（避免重复声明）
let gameMode = 'none'; // 'pvp' | 'pvc' | 'none'
let options = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'x';
let running = false;
const boxs = document.querySelectorAll('.box');
const statusTxt = document.querySelector('#status');

// 初始化事件监听（一次注册，终身有效）
function initGame() {
  boxs.forEach(box => box.addEventListener('click', handleBoxClick));
  document.getElementById('start').addEventListener('click', startGame);
  document.getElementById('newGame').addEventListener('click', clearGameSelection);
  document.getElementById('restart').addEventListener('click', restartGame);
}

2. 模式选择逻辑（无副作用，纯读取）

function getSelectedGameMode() {
  const pvpRadio = document.getElementById('pvp');
  const pvcRadio = document.getElementById('pvc');

  if (pvpRadio.checked) return 'pvp';
  if (pvcRadio.checked) return 'pvc';
  return 'none';
}

function clearGameSelection() {
  document.getElementById('pvp').checked = false;
  document.getElementById('pvc').checked = false;
  document.getElementById('messageGame').textContent = 'Pick a game!';
  gameMode = 'none';
}

3. 核心游戏逻辑（独立、可复用）

// ✅ 关键：所有函数均为顶层声明，可被任意处调用
function handleBoxClick(e) {
  if (!running || gameMode === 'none') return;

  const index = e.target.dataset.index;
  if (options[index] !== '') return;

  // 执行通用落子逻辑
  options[index] = currentPlayer;
  e.target.innerHTML = currentPlayer;

  // 判胜（通用）
  if (checkWinner()) {
    statusTxt.textContent = `Player ${currentPlayer} wins!`;
    running = false;
    stopCount();
  } 
  // 判平（通用）
  else if (!options.includes('')) {
    statusTxt.textContent = 'The Game is Tied';
    running = false;
  } 
  // 切换玩家（PvP）或触发 AI（PvC）
  else {
    nextPlayer();
    if (gameMode === 'pvc' && currentPlayer === 'o') {
      setTimeout(makeComputerMove, 500); // 模拟AI思考延迟
    }
  }
}

function nextPlayer() {
  currentPlayer = currentPlayer === 'x' ? 'o' : 'x';
  statusTxt.textContent = `Player ${currentPlayer}'s turn`;
}

function checkWinner() {
  const winPatterns = [
    [0,1,2], [3,4,5], [6,7,8], [0,3,6], 
    [1,4,7], [2,5,8], [0,4,8], [2,4,6]
  ];

  for (const [a,b,c] of winPatterns) {
    if (options[a] && options[a] === options[b] && options[a] === options[c]) {
      boxs[a].classList.add('win');
      boxs[b].classList.add('win');
      boxs[c].classList.add('win');
      return true;
    }
  }
  return false;
}

// PvC 专属逻辑（仅当 gameMode === 'pvc' 时生效）
function makeComputerMove() {
  const emptyBoxes = options.map((val, i) => val === '' ? i : -1).filter(i => i !== -1);
  if (emptyBoxes.length === 0) return;

  const randomIndex = emptyBoxes[Math.floor(Math.random() * emptyBoxes.length)];
  options[randomIndex] = 'o';
  boxs[randomIndex].innerHTML = 'o';
}

4. 启动入口：根据模式配置行为

function startGame() {
  gameMode = getSelectedGameMode();

  if (gameMode === 'none') {
    alert('Please select a game mode first!');
    return;
  }

  document.getElementById('messageGame').textContent = 
    gameMode === 'pvp' 
      ? 'Player vs Player Game!' 
      : 'Player vs Computer Game!';

  // 重置游戏状态
  options.fill('');
  running = true;
  currentPlayer = Math.random() > 0.5 ? 'x' : 'o';
  statusTxt.textContent = `Player ${currentPlayer}'s turn`;

  // 清空棋盘高亮
  boxs.forEach(box => box.classList.remove('win'));

  // 启动计时器（如有）
  startCount();
}

⚠️ 注意事项与最佳实践

• 不要在函数内重复声明全局变量：如 var options = [...] 在 pvp() 中会遮蔽外部 options，导致状态不一致；
• 事件监听器必须指向可访问函数：box.addEventListener('click', boxClick) 要求 boxClick 是声明在作用域链上层的函数，而非嵌套在某个未调用函数内的局部函数；
• 模式切换应是状态变更，而非逻辑重载：gameMode 是一个轻量配置开关，所有分支逻辑通过 if (gameMode === 'pvc') { ... } 显式控制，而非试图“动态加载函数”；
• HTML 中避免内联 JS（如 onclick="..."）：全部移至