猜数字游戏开发：如何让while循环在3次尝试后自动终止

现有代码问题分析 #

• 剩余尝试次数变量tries定义在点击事件回调内部，每次点击都会被重置为3，无法实现跨点击的次数累计
• 代码中使用while循环会导致单次点击就直接耗尽3次次数，反复读取同一次输入的数值，完全不符合「每点击提交一次算一次尝试」的交互逻辑
• 存在拼写错误：提示词里的hight应为high
• 缺少游戏结束的判定逻辑：次数耗尽后没有失败提示，也没有阻止后续提交的机制
• 后续替换随机数要注意：直接用Math.floor(Math.random())生成的结果永远是0，要生成指定范围的随机数比如1-10，应该写为Math.floor(Math.random() * 10) + 1

调整后完整代码 #

JavaScript代码 #

const btn = document.querySelector('.btn')
const result = document.querySelector('.output')
const input = document.querySelector('.input')
// 后续可替换为 let num = Math.floor(Math.random() * 10) + 1 生成1-10的随机数
let num = 4
// 剩余尝试次数定义在全局，跨点击累计
let tries = 3

btn.addEventListener('click', function() {
  // 游戏结束后直接拦截后续提交
  if (tries <= 0) return
  const guess = Number(input.value)
  // 非空校验
  if (!guess && guess !== 0) {
    result.innerHTML = '请输入有效的数字'
    input.value = ''
    return
  }
  // 消耗一次尝试次数
  tries--
  
  if (guess === num) {
    result.innerHTML = `恭喜你猜对了！正确数字是${num}。`
    // 猜对后直接终止游戏
    tries = 0
    btn.disabled = true
  } else if (tries === 0) {
    // 次数耗尽判定失败
    result.innerHTML = `很遗憾，3次机会已用完，正确数字是${num}，游戏失败。`
    btn.disabled = true
  } else if (guess > num) {
    result.innerHTML = `你猜的数字太大了，还剩${tries}次机会`
  } else {
    result.innerHTML = `你猜的数字太小了，还剩${tries}次机会`
  }
  
  input.value = ''
})

HTML代码（基本无改动，可直接沿用） #

<input type="number" class="input">
<button class="btn">提交答案</button>
<div class="output"></div>

关键改动说明 #

• 将剩余次数变量tries移到点击事件外部，实现每次点击提交累计扣减次数
• 移除错误的while循环，改为每次点击只处理一次用户输入
• 新增游戏结束判定：猜对或者次数耗尽时都会禁用提交按钮，终止游戏
• 新增剩余次数提示、输入合法性校验，优化交互体验
• 修正了拼写错误

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