<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reaction Time Game</title>
  <style>
    /* Full-screen styles */
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden; /* Prevent scrolling */
    }

    /* Cool gradient background */
    body {
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }

    /* Game container */
    .game-container {
      text-align: center;
      background: rgba(255, 255, 255, 0.1);
      padding: 30px;
      border-radius: 15px;
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      width: 100%;
      max-width: 600px; /* Limit width for better readability */
    }

    /* Stylish title */
    h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      font-family: 'Orbitron', sans-serif;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Reaction button */
    #reaction-button {
      padding: 50px;
      font-size: 1.5rem;
      background-color: #666; /* Default color */
      color: #fff;
      border: none;
      border-radius: 15px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      margin: 20px;
    }

    #reaction-button:active {
      transform: scale(0.95); /* Button press effect */
    }

    /* Stats text */
    #stats {
      font-size: 1.2rem;
      margin-top: 20px;
    }

    /* Add a cool font for the title */
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
  </style>
</head>
<body>
  <div class="game-container">
    <h1>Reaction Time Game</h1>
    <button id="reaction-button">Wait for Green...</button>
    <div id="stats">
      <p>Your Reaction Time: <span id="reaction-time">-</span> ms</p>
      <p>Best Time: <span id="best-time">-</span> ms</p>
    </div>
  </div>

  <script>
    const reactionButton = document.getElementById("reaction-button");
    const reactionTimeDisplay = document.getElementById("reaction-time");
    const bestTimeDisplay = document.getElementById("best-time");

    let startTime;
    let bestTime = Infinity; // Track the best (fastest) time
    let timeoutId; // Store the timeout ID for clearing

    // Function to start the game
    function startGame() {
      // Reset button text and color
      reactionButton.textContent = "Wait for Green...";
      reactionButton.style.backgroundColor = "#666";

      // Clear any existing timeout
      if (timeoutId) {
        clearTimeout(timeoutId);
      }

      // Wait for a random delay (1 to 5 seconds)
      const delay = Math.random() * 4000 + 1000; // Between 1 and 5 seconds
      timeoutId = setTimeout(() => {
        // Change button color to green
        reactionButton.style.backgroundColor = "#4CAF50";
        reactionButton.textContent = "Click Now!";
        startTime = Date.now(); // Record the start time
      }, delay);
    }

    // Function to handle button click
    reactionButton.addEventListener("click", () => {
      if (reactionButton.style.backgroundColor === "rgb(76, 175, 80)") { // Check if the button is green
        const endTime = Date.now();
        const reactionTime = endTime - startTime; // Calculate reaction time

        // Display reaction time
        reactionTimeDisplay.textContent = reactionTime;

        // Update best time
        if (reactionTime < bestTime) {
          bestTime = reactionTime;
          bestTimeDisplay.textContent = bestTime;
        }

        // Restart the game
        startGame();
      } else {
        alert("Too soon! Wait for the button to turn green.");
        startGame(); // Restart the game if clicked too soon
      }
    });

    // Start the game when the page loads
    startGame();
  </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.