js实现一个猜数字游戏

2023年6月11日上午10:59 • JavaScript

下面是JS实现猜数字游戏的完整攻略。

步骤

1. 随机生成一个数字

首先，我们需要随机生成一个1~100之间的数字作为游戏答案，可以使用Math.random()和Math.floor()函数来实现：

let answer = Math.floor(Math.random() * 100) + 1; // 生成1~100之间的整数

2. 获取用户输入

然后，我们需要获取用户的输入。可以使用window.prompt()函数来弹出一个对话框，让用户输入数字：

let guess = parseInt(window.prompt("请输入你猜的数字（1~100）"));

3. 判断猜测是否正确

接下来，我们需要判断用户输入的数字是否与答案一致。可以使用if语句来实现：

if (guess === answer) {
  console.log("猜对了！");
} else if (guess > answer) {
  console.log("猜大了！");
} else {
  console.log("猜小了！");
}

4. 循环猜测

最后，我们需要让用户可以多次猜测，直到猜对为止。可以使用while循环来实现：

let answer = Math.floor(Math.random() * 100) + 1; // 生成1~100之间的整数

while (true) {
  let guess = parseInt(window.prompt("请输入你猜的数字（1~100）"));

  if (guess === answer) {
    console.log("猜对了！");
    break;
  } else if (guess > answer) {
    console.log("猜大了！");
  } else {
    console.log("猜小了！");
  }
}

上面这段代码中，使用了break关键字来跳出循环，当用户猜对时，就会执行break语句，退出循环。

示例说明

示例1

以下代码演示了如何使用alert()函数来弹窗提示用户：

let answer = Math.floor(Math.random() * 100) + 1; // 生成1~100之间的整数

while (true) {
  let guess = parseInt(window.prompt("请输入你猜的数字（1~100）"));

  if (guess === answer) {
    alert("猜对了！");
    break;
  } else if (guess > answer) {
    alert("猜大了！");
  } else {
    alert("猜小了！");
  }
}

示例2

以下代码演示了如何在HTML中显示提示信息，并且使用setTimeout()函数来延时显示猜对的提示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>猜数字游戏</title>
    <script>
      let answer = Math.floor(Math.random() * 100) + 1; // 生成1~100之间的整数

      function guessNumber() {
        let guess = parseInt(document.getElementById("guessInput").value);

        if (guess === answer) {
          document.getElementById("result").innerHTML = "猜对了！";
          setTimeout(function () {
            document.getElementById("result").innerHTML = "";
            answer = Math.floor(Math.random() * 100) + 1;
          }, 3000);
        } else if (guess > answer) {
          document.getElementById("result").innerHTML = "猜大了！";
        } else {
          document.getElementById("result").innerHTML = "猜小了！";
        }
      }
    </script>
  </head>
  <body>
    <h1>猜数字游戏</h1>
    <p>请输入你猜的数字（1~100）：</p>
    <input type="text" id="guessInput" />
    <button onclick="guessNumber()">猜一下</button>
    <p id="result"></p>
  </body>
</html>

上面这段代码中，使用了document.getElementById()函数来获取HTML中的元素，并且使用了innerHTML属性来修改元素的内容。同时，使用了setTimeout()函数来延时3秒钟后重新生成一个新的答案。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现一个猜数字游戏 - Python技术站