JS猜数字游戏：如何实现猜对前随机数仅生成一次

当前代码把随机目标数的生成逻辑写在了higherLower()函数内部，每次点击Guess按钮触发函数执行时，都会重新运行随机数生成语句，导致单轮游戏内目标数不断变化。

不需要新增任何按钮或输入控件，只需要把随机数的生成时机从「每次点击Guess」调整为「单轮游戏初始化（即用户输入合法数值上限）」，用全局变量存储单轮固定的目标数即可：

• 用户提交合法的自定义上限时，立刻生成本轮目标数并存入全局变量
• 点击Guess按钮时直接读取全局变量里的固定目标数做比对，不再重新生成
• 用户猜对答案后，只要重新设置上限就会自动生成新的目标数，开启下一轮

HTML代码 #

和原有代码逻辑完全一致，不需要改动：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Higher Lower</title>
  </head>

  <body>
    <h1>Higher - Lower</h1>

    <button onclick="userInput()">Input Maximum Number</button>

    <p id="ranNum"></p>

    <p id="validation"></p>

    <p>Your Guess:</p>
    <input type="text" onfocus="this.value=''" id="choice" /><br /><br />
    <button onclick="higherLower()">Guess</button>

    <p id="result"></p>

    <p id="values"></p>
  </body>
  <script src="scripts.js"></script>
</html>

JavaScript代码 #

let userMax;
// 全局存储单轮固定的目标随机数
let targetNumber;

function userInput() {
    userMax = prompt("Please enter a maximum number:");
   
    // 校验上限合法性：必须是正整数
    while (isNaN(userMax) || Number(userMax) < 1 || !Number.isInteger(Number(userMax))) {
        alert("Maximum number must be a positive integer");
        userMax = prompt("Please enter a valid maximum number:");
    }
    // 输入合法后立刻生成本轮固定目标数
    targetNumber = Math.floor(Math.random() * Number(userMax)) + 1;
    // 调试用，正式环境可删除
    console.log("Current round target:", targetNumber);
    // 清空上一轮结果提示
    document.getElementById("result").textContent = "";
    return userMax;
}

// 修复原函数未定义变量n的bug
function isFloat(num) {
    return Number(num) === num && num % 1 !== 0;
}

function higherLower() {
    // 边界判断：未设置上限时提示用户先设置
    if (!userMax || !targetNumber) {
        document.getElementById("result").textContent = "Please set a maximum number first";
        return;
    }

    const guess = Number(document.getElementById('choice').value);
    // 校验猜测值合法性
    if (isNaN(guess) || guess < 1 || guess > Number(userMax)) {
        document.getElementById("result").textContent = `Please enter a valid integer between 1 and ${userMax}`;
        return;
    }

    // 直接读取全局固定目标数比对，不再每次生成
    if(targetNumber === guess) {
        document.getElementById("result").textContent = "You got it! Click the maximum number button to start a new round.";
    } else if(targetNumber > guess) {
        document.getElementById("result").textContent = "No, try a higher number.";
    } else {
        document.getElementById("result").textContent = "No, try a lower number.";
    }
}

• 原isFloat函数引用了未定义的变量n，调用会直接报错，已修正
• 原逻辑没有处理「未设置上限就点击Guess」的边界情况，已补充提示
• 原逻辑没有校验用户输入的猜测值合法性，输入非数字、超出范围的数值会导致判断逻辑异常，已补充校验
• 原比较逻辑用了>=/<=判断大小，等于的分支已经被猜对的条件提前捕获，冗余判断已删除
• 原逻辑没有做数值类型转换，字符串格式的数字参与比较可能出现隐式转换错误，已统一转成Number类型处理

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