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，……。