JavaScript/练习/猜数字

反应时间

猜一个隐藏的数字

该应用程序会选择一个随机数，并要求用户猜出它。用户有有限的尝试次数。

首先，我们需要一个 HTML 文件加上 CSS 来实现用户界面。它应该包含

一个标题
对游戏的简短描述
一个文本区域用于读取用户的尝试，还有一个按钮用于将用户的输入发送到应用程序
另一个文本区域，应用程序在其中向用户提供响应，例如

* 隐藏数字更小

* 隐藏数字更大

* 宾果！那是隐藏的数字

一个“重置”游戏的按钮
一个展开随机数的按钮

在此阶段，HTML 不包含任何事件定义或 JavaScript。

HTML 可能看起来像这样

点击查看解决方案

<!DOCTYPE html>
<html>
<head>
  <title>Number Search</title>
  <script>
  // ...
  </script>

</head>

<body style="padding:2em">

  <!--  caption  -->
  <h1 style="text-align: center;">Guess the Number</h1>
  <p  style="font-size: 1.4em; text-align: center; margin-bottom:3em">
    I have choosen a number between 0 and 60.
  </p>

  <!--  user's input  -->
  <p>
    <label  style="margin-right:1em">Guess it. It's always <br/>possible with 6 attempts.</label>
    <input  type="number" id="userInput" min="1" max="60" />
    <button style="margin-left:1em">Go</button>
  </p>

  <!--  feedback from the script to the user  -->
  <textarea id="feedback"rows="15" cols="80"></textarea>

  <!--  command buttons  -->
  <p>
    <button>Restart</button>
    <button style="margin-left:3em">Show the hidden number</button>
  </p>

</body>
</html>

接下来，您通过在script 元素中添加按钮的事件和函数来开发应用程序的逻辑。

要生成一个随机数，您可以使用Math.floor(Math.random() * 60) + 1。
HTML body 元素应包含一个onload 事件，其事件处理程序初始化游戏。当按下“重置”时，会调用相同的函数。
要访问两个文本区域，它们必须具有id 属性。
通过“value”从文本区域读取和写入：document.getElementById("...").value。

总而言之，该应用程序可能看起来像这样

点击查看解决方案

<!DOCTYPE html>
<html>
<head>
  <title>Number Search</title>
  <script>
  "use strict";

  // grab aat start time
  let number;   // the (hidden) number 
  let attempts; // the users's attempts

  // --------  initialize the app  -----------------------------------------
  function init() {
    number = createNumber();
    attempts = 0;
    document.getElementById("userInput").value = "";
    document.getElementById("feedback").value = "";
  }

  // --------  generate a random number between 1 and 60  -------
  function createNumber() {
    return Math.floor(Math.random() * 60) + 1; 
  }

  // --------  show the (hidden) number  ----------------
  function showNumber() {
    alert("The choosen number is: " + number);
  }

  // --------  rate the user's answer  -------------------
  function go() {

    // user's input
    const value = document.getElementById("userInput").value;
    const tmp = parseFloat(value);
    if (Number.isNaN(tmp)) {
      alert("Sorry, this is not a number.");
      return;
    }
    attempts++;

    // feedback area
    const feedback = document.getElementById("feedback");
    let response = feedback.value;

    // determine response
    response += attempts + ". Your answer is: " + tmp + ". ";
    if (tmp == number) {
      response += "Congratulation! This is the hidden number.\n";
    } else if (tmp > number) {
      response += "Sorry! The hidden number is smaller.\n";
    } else {
      response += "Sorry! The hidden number is greater.\n";
    }

    // output
    feedback.value = response;
  }
  </script>

</head>

<body style="padding:2em" onload="init()">

  <!--  caption  -->
  <h1 style="text-align: center;">Guess the Number</h1>
  <p  style="font-size: 1.4em; text-align: center; margin-bottom:3em">
    I have choosen a number between 0 and 60.
  </p>

  <!--  user's input  -->
  <p>
    <label  style="margin-right:1em">Guess it. It's always <br/>possible with 6 attempts.</label>
    <input  type="number" id="userInput" min="1" max="60" />
    <button style="margin-left:1em" onclick="go()">Go</button>
  </p>

  <!--  feedback from the script to the user  -->
  <textarea id="feedback"rows="15" cols="80"></textarea>

  <!--  command buttons  -->
  <p>
    <button onclick="init()">Restart</button>
    <button style="margin-left:3em" onclick="showNumber()">Show the hidden number</button>
  </p>

</body>
</html>

提示：如果用户使用二分搜索策略，他最多可以通过 6 个问题找到这个数字：他总是用当前已知的上下限的平均值来回答，一开始是 30。如果隐藏的数字更大，他应该回答 45。如果更小，则回答 15，……。