如何用 do-while 循环实现一个功能完整的网页端数字猜谜游戏-html教程-PHP中文网

如何用 do-while 循环实现一个功能完整的网页端数字猜谜游戏

本文详解如何使用 javascript 的 do-while 循环构建一个带 html 界面的三位尝试制数字猜谜游戏，解决常见逻辑错误（如随机数未取整、循环误判、状态重置失效），并确保提示准确、次数控制严格、用户体验流畅。

本文详解如何使用 javascript 的 do-while 循环构建一个带 html 界面的三位尝试制数字猜谜游戏，解决常见逻辑错误（如随机数未取整、循环误判、状态重置失效），并确保提示准确、次数控制严格、用户体验流畅。

在 JavaScript 中，do...while 循环常被误解为“适合处理多次用户交互”的结构——但需谨记：它适用于单次执行中需重复判断同一输入的场景；而猜谜游戏本质上是“每次点击触发一次独立验证”，不应在单次按钮点击内反复读取同一输入值。原代码的核心问题正在于此：do...while 在一次 onclick 调用中不断读取 #number 的当前值（很可能为空或未变），导致三次尝试瞬间耗尽，并始终输出“已用完所有尝试”。

✅ 正确解法是：将 do...while 用于内部状态校验逻辑（如确保输入有效），而主流程采用单次响应 + 外部状态维护。以下是经过重构、可直接运行的专业级实现：

✅ 修复要点与最佳实践

随机数必须取整：Math.random() * 100 + 1 返回 [1, 101) 区间浮点数，需用 Math.floor() 或 parseInt() 转为整数；
attempts 和 ans 必须声明在函数外：保持跨调用状态，避免每次点击都重置目标数字；
do...while 的合理用途：此处我们用它确保用户输入非空且为有效数字（增强健壮性），而非包裹整个游戏逻辑；
UI 反馈要清晰：成功后重置计数器与答案；失败后明确告知正确答案并自动重启。

✅ 完整可运行代码（含 HTML + JS）



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Guess the Number Game</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"><div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card shadow-sm">
          <div class="card-header bg-primary text-white text-center">
            <h2>? Number Guessing Game</h2>
          </div>
          <div class="card-body">
            <p class="lead text-center">You have <strong id="attempts-left">3</strong> attempts to guess a number between 1 and 100.</p>

            <div class="mb-4">
              <label for="number" class="form-label">Enter your guess:</label>
              <div class="input-group">
                <span class="input-group-text">#</span>
                <input type="number" class="form-control" id="number" min="1" max="100" placeholder="e.g., 42">
</div>
            </div>

            <button class="btn btn-success w-100 py-2" onclick="checkans()">
              <i class="bi bi-lock"></i> Lock Answer
            </button>

            <div id="result" class="mt-4 p-3 bg-white border rounded text-center" style="min-height: 60px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // ✅ 全局状态：维持游戏核心变量（不随每次点击重置）
    const ansField = document.getElementById("number");
    const resultEl = document.getElementById("result");
    const attemptsEl = document.getElementById("attempts-left");

    let targetNumber = Math.floor(Math.random() * 100) + 1; // [1, 100] 整数
    let attempts = 3;

    function getRandomInt() {
      return Math.floor(Math.random() * 100) + 1;
    }

    function checkans() {
      // ✅ 使用 do-while 确保获取有效数字输入（防空/非法输入）
      let userGuess;
      let inputValid = false;
      do {
        const rawInput = ansField.value.trim();
        userGuess = parseInt(rawInput, 10);
        if (!isNaN(userGuess) && userGuess >= 1 && userGuess <= 100) {
          inputValid = true;
        } else {
          resultEl.innerHTML = '<div class="alert alert-warning mb-0">⚠️ Please enter a valid number between 1 and 100.';
          ansField.focus();
          return; // 中断后续逻辑
        }
      } while (!inputValid);

      // ✅ 核心逻辑：单次验证 + 状态更新
      attempts--;
      attemptsEl.textContent = attempts;

      if (userGuess === targetNumber) {
        resultEl.innerHTML = `<div class="alert alert-success mb-0">
          ? Hooray! You won! <strong>${targetNumber} is the correct answer!
        `;
        // ✅ 成功后重置游戏
        setTimeout(() => {
          targetNumber = getRandomInt();
          attempts = 3;
          attemptsEl.textContent = attempts;
          ansField.value = '';
          resultEl.innerHTML = '';
        }, 2000);
      } 
      else if (userGuess < targetNumber) {
        resultEl.innerHTML = `<div class="alert alert-info mb-0">
          ? Hint: Your guess is <strong>too small. Try a larger number.
        `;
      } 
      else {
        resultEl.innerHTML = `<div class="alert alert-info mb-0">
          ? Hint: Your guess is <strong>too large. Try a smaller number.
        `;
      }

      // ✅ 尝试用尽：显示答案并重启
      if (attempts === 0) {
        resultEl.innerHTML += `<div class="alert alert-danger mt-2 mb-0">
          ❌ Game Over! You've used all 3 attempts. The correct number was <strong>${targetNumber}.
        `;
        setTimeout(() => {
          targetNumber = getRandomInt();
          attempts = 3;
          attemptsEl.textContent = attempts;
          ansField.value = '';
          resultEl.innerHTML = '';
        }, 2500);
      }
    }

    // ✅ 回车键支持（提升 UX）
    ansField.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') checkans();
    });
  </script>