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;
  }

扩展

您可以通过不同的方式扩展应用程序。

通过使用更多区域、更小的区域或两个以上的红色区域，使其更复杂。
显示所有尝试的列表，可能按反应时间排序。