JavaScript/練習/反應時間

測試你的反應時間

HTML + CSS

該應用程式顯示了一個包含 16 個綠色區域的網格。遊戲開始時，其中兩個區域會變成紅色。嘗試儘快點選它們。你的反應時間將在底部顯示。

首先，我們需要一個 HTML 檔案加 CSS 來實現使用者介面。它應該包含

一個標題。
一個 4x4 的網格，包含 16 個區域。
一個用於開始遊戲的按鈕。
一個用於顯示反應時間的反饋區域。

HTML 可能看起來像這樣

點選檢視解決方案

<!DOCTYPE html>
<html>
<head>

  <!--
    There is a grid with many areas. Some of these areas have
    a different color. Those shall be clicked. The program
    will show you how much time you need.
  -->

  <title>Fast Reaction</title>
  <script>
  // ...
  </script>

  <style>
    .containerGrid {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-auto-rows: 40px;
      gap: 40px;
    }
    .cell {
      background-color: lime;
    }
    .containerLine {
      display: flex;
      margin-top: 2em;
    }
    .button {
      padding: 0.6em 2em 0.6em 2em;
      margin-right: 2em;
      font-size: 1em;
    }
    .feedback {
      padding-top: 5px;
      margin-left: 10px;
      font-size: 1.4em;
    }
  </style>

</head>

<body style="padding:0em 2em 0em 2em">

  <!-- Captions -->
  <h1 style="text-align: center">Test your reaction time</h1>
  <h4 style="text-align: center">Click on the two red areas</h4>

  <!--  The containter with the clickable areas  -->
  <div class="containerGrid">
    <div class="cell" id="b1"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b2"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b3"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b4"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b5"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b6"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b7"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b8"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b9"  onclick="areaClicked(event)"/></div>
    <div class="cell" id="b10" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b11" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b12" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b13" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b14" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b15" onclick="areaClicked(event)"/></div>
    <div class="cell" id="b16" onclick="areaClicked(event)"/></div>
  </div>

  <div class="containerLine">
    <!-- button to start the game -->
    <button id="start" class="button" onClick="start()">Start</button>
    <!-- feedback from the script to the player -->
    <div               class="feedback">Reaction Time (ms): </div>
    <div id="feedback" class="feedback"></div>
  </div>

</body>
</html>

JavaScript

接下來，我們必須在 JavaScript 中實現遊戲的邏輯。我們需要

用於儲存開始和結束時間戳的變數。
事件處理程式來響應區域上的“點選”事件。如果所有區域使用相同的事件處理程式，而不是有 16 個單獨的事件處理程式，這將很有幫助。
一個事件處理程式來響應“開始”按鈕。
一個隨機選擇一個區域並將其顏色更改為紅色的函式。
一個計算有多少區域是紅色的函式。

JavaScript 部分可能看起來像這樣

點選檢視解決方案

  "use strict";

  // --------------------------------------------
  // global variables
  // --------------------------------------------

  // the number of red areas
  const GOAL = 2;
  // an array with all area-IDs
  const arrayAreas =
        ["b1",  "b2",  "b3",  "b4",  "b5",
         "b6",  "b7",  "b8",  "b9",  "b10",
         "b11", "b12", "b13", "b14", "b15", "b16"];
  // the start timestamp
  let startDate;

  // the feedback area
  let feedback;

  // --------------------------------------------
  // functions
  // --------------------------------------------

  // initialize everything
  function start() {
  feedback = document.getElementById("feedback");

    // reset the colors
    arrayAreas.forEach((area) => {
       document.getElementById(area).style.backgroundColor = "lime";
    });

    // mark some random areas with red color
    for (let i = 0; i < GOAL; i++) {
      // a number from 0 to 15
      const tmp = Math.floor(Math.random() * 16);
      const area = document.getElementById(arrayAreas[tmp]);
      if (area.style.backgroundColor === "red") {
        // it's already red; try again
        i--;
        continue;
      }
      area.style.backgroundColor = "red";
    }

    // save the starting timestamp
    startDate = new Date();
  }

  // a single function for events on all areas
  function areaClicked(event) {
    const area = document.getElementById(event.target.id);
    area.style.backgroundColor = "lime";

    // are all red areas clicked?
    if (numberOfRed() === 0) {
      const endDate = new Date();
      const ms = endDate - startDate;
      feedback.innerHTML = ms;
    }
  }

  // function to count the red areas
  function numberOfRed() {
    let tmp = 0;
    arrayAreas.forEach((area) => {
       if (document.getElementById(area).style.backgroundColor === "red") {
         tmp++;
       }
    });
    return tmp;
  }

擴充套件

您可以透過不同的方式擴充套件應用程式。

透過使用更多區域、更小的區域或兩個以上的紅色區域，使其更復雜。
顯示所有嘗試的列表，可能按反應時間排序。