JavaScript数字棒球游戏问题求助：输入处理与结果输出异常

一、输入字符串转数字数组的实现 #

要将用户输入的123这类字符串转换成[1, 2, 3]格式的数字数组，可通过字符串拆分+类型转换实现，同时添加输入验证确保符合游戏规则：

function play() {
  if (gameOver) return;
  
  const userValue = userInput.value.trim();
  // 验证：必须是3位不重复的数字
  if (!/^\d{3}$/.test(userValue) || new Set(userValue).size !== 3) {
    resultArea.textContent = "请输入3个不重复的数字！";
    return;
  }
  // 转换为数字数组
  const userArray = userValue.split('').map(Number);
  // ...后续对比逻辑
}

二、play函数无输出+逻辑错误的修复 #

当前代码存在两个核心问题：

1. 未将计算后的strike/ball结果输出到控制台或页面
2. Strike/Ball的判断逻辑完全错误（当前只要数字存在就算strike）

修正后的完整play函数 #

// 新增尝试次数变量
let triesLeft = 5;
triesArea.textContent = `tries: ${triesLeft}times`;

function play() {
  if (gameOver) return;
  
  const userValue = userInput.value.trim();
  // 输入验证
  if (!/^\d{3}$/.test(userValue) || new Set(userValue).size !== 3) {
    resultArea.textContent = "请输入3个不重复的数字！";
    return;
  }
  // 转换为数字数组
  const userArray = userValue.split('').map(Number);
  
  let strike = 0;
  let ball = 0;

  // 正确的Strike/Ball判断逻辑
  for (let i = 0; i < randomIndexArray.length; i++) {
    const randomNum = randomIndexArray[i];
    const userIndex = userArray.indexOf(randomNum);
    if (userIndex === -1) continue;
    // 位置相同 → Strike
    if (userIndex === i) strike++;
    // 数字存在但位置不同 → Ball
    else ball++;
  }

  // 输出结果到控制台
  console.log(`Strike: ${strike}, Ball: ${ball}`);
  // 更新页面结果区域
  resultArea.textContent = `result: ${strike}strike ${ball}ball`;

  // 更新尝试次数
  triesLeft--;
  triesArea.textContent = `tries: ${triesLeft}times`;

  // 游戏结束逻辑
  if (strike === 3) {
    resultArea.textContent += " 🎉 恭喜获胜！";
    gameOver = true;
  } else if (triesLeft === 0) {
    resultArea.textContent = `游戏结束！正确答案：${randomIndexArray.join('')}`;
    gameOver = true;
  }
}

三、其他代码优化 #

1. 随机数生成时修复全局变量泄漏问题：

let randomIndexArray = [];
for (let i = 0; i < 3; i++) { // 用let声明循环变量i
  const randomNum = Math.floor(Math.random() * 10); // 用const声明随机数
  if (randomIndexArray.indexOf(randomNum) === -1) {
    randomIndexArray.push(randomNum)
  } else {
    i--
  }
};

2. 删除初始调用的play()，避免页面加载时执行无意义的计算。

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