JavaScript猜数字游戏：实现猜测次数统计与展示需求

嘿，我来帮你搞定这个猜数字游戏的计数器需求！咱们先理清楚核心逻辑：需要一个变量追踪用户的猜测次数，每次触发那三个提示分支（输入无效、猜大、猜小）时计数器加1，最后猜对时展示总次数，同时维护最佳猜测记录。

我给你写一个完整的可运行版本，关键部分会做标注说明：

// 初始化游戏核心变量
let secretNumber = Math.floor(Math.random() * 100) + 1; // 生成1-100的随机数
let guessCount = 0; // 猜测次数计数器，初始为0
// 从本地存储读取最佳记录，没有的话设为无穷大（确保第一次成绩能成为最佳）
let bestScore = localStorage.getItem('bestGuessScore') || Infinity;

function checkGuess() {
    const userGuess = Number(document.getElementById('guessInput').value);
    const feedbackEl = document.getElementById('feedback');
    const resultEl = document.getElementById('result');

    // 分支1：输入不是1-100的有效数字
    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
        feedbackEl.textContent = '请输入1到100之间的有效数字哦！';
        guessCount++; // 触发分支，计数器+1
        return;
    }

    // 分支2：猜的数字比目标大
    if (userGuess > secretNumber) {
        feedbackEl.textContent = '猜大啦！试试更小的数字~';
        guessCount++; // 触发分支，计数器+1
        return;
    }

    // 分支3：猜的数字比目标小
    if (userGuess < secretNumber) {
        feedbackEl.textContent = '猜小啦！试试更大的数字~';
        guessCount++; // 触发分支，计数器+1
        return;
    }

    // 猜对的分支：最后这次猜测也要计入次数
    guessCount++;
    feedbackEl.textContent = `太棒了！你猜对了，数字就是${secretNumber}🥳`;
    resultEl.textContent = `你总共猜了${guessCount}次。`;

    // 更新并展示最佳记录
    if (guessCount < bestScore) {
        bestScore = guessCount;
        localStorage.setItem('bestGuessScore', bestScore);
        resultEl.textContent += ` 这是你的新最佳成绩！`;
    } else {
        resultEl.textContent += ` 你的最佳成绩是${bestScore}次。`;
    }

    // 重置游戏（可选，方便继续玩）
    document.getElementById('guessInput').value = '';
    secretNumber = Math.floor(Math.random() * 100) + 1;
    guessCount = 0;
}

// 绑定提交按钮的点击事件
document.getElementById('submitBtn').addEventListener('click', checkGuess);

关键细节解释： #

• 计数器初始化：把guessCount放在函数外层，确保每次游戏重置时能归零，不会和上一轮的次数混淆。
• 分支计数：三个判断分支里都加上guessCount++，不管用户是输入错误还是猜偏了，都算一次有效猜测。
• 猜对时的计数：别漏掉最后这次猜对的操作，必须先给计数器加1，再展示总次数。
• 最佳记录持久化：用localStorage保存最佳成绩，就算刷新页面也不会丢失，每次猜对后自动对比更新。

你只需要根据自己的HTML结构调整元素ID就行，比如guessInput是输入框、submitBtn是提交按钮、feedback是提示文本区、result是展示次数的区域。

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