<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Number Matcher</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; } #header { font-size: 24px; font-weight: bold; margin: 20px 0; } #container { display: flex; gap: 20px; } #game { display: flex; flex-direction: column; align-items: center; } #numberDisplay { width: 200px; height: 100px; display: flex; align-items: center; justify-content: center; border: 2px solid black; background-color: white; font-size: 24px; font-weight: bold; margin-bottom: 20px; } #result { margin-top: 10px; font-size: 18px; } #time { margin-top: 5px; font-size: 14px; color: gray; } #controls { display: flex; align-items: center; gap: 10px; } input[type="text"] { padding: 5px; font-size: 16px; width: 150px; } button { padding: 5px 10px; font-size: 16px; cursor: pointer; } #history { width: 200px; height: 300px; border: 2px solid black; overflow-y: auto; padding: 10px; background-color: #fff; font-size: 14px; } #historyList li:first-child { color: blue; font-weight: bold; } .fastest { color: green; font-weight: bold; } </style> </head> <body> <div id="header">Number Matcher Game</div> <div id="container"> <div id="game"> <div id="numberDisplay">000000</div> <div id="controls"> <input type="text" id="inputField" placeholder="Enter numbers"> <button id="checkButton">Check</button> </div> <div id="result"></div> <div id="time"></div> </div> <div id="history"> <strong>Completion Times:</strong> <ul id="historyList" style="padding: 0; margin: 0; list-style: none;"></ul> </div> </div> <script> const numberDisplay = document.getElementById("numberDisplay"); const inputField = document.getElementById("inputField"); const checkButton = document.getElementById("checkButton"); const result = document.getElementById("result"); const time = document.getElementById("time"); const historyList = document.getElementById("historyList"); let randomNumbers = generateRandomNumbers(); let startTime = Date.now(); let fastestTime = null; function generateRandomNumbers() { const numbers = Array.from({ length: 6 }, () => Math.floor(Math.random() * 10)); numberDisplay.textContent = numbers.join(""); return numbers.join(""); } function checkMatch() { const userInput = inputField.value; inputField.value = ""; // Clear input field if (userInput === randomNumbers) { result.textContent = "Match!"; result.style.color = "green"; const elapsedTime = (Date.now() - startTime) / 1000; time.textContent = `Time taken: ${elapsedTime.toFixed(2)} seconds`; // Add time to history const historyItem = document.createElement("li"); historyItem.textContent = `${elapsedTime.toFixed(2)} seconds`; // Check if this is the fastest time if (fastestTime === null || elapsedTime < fastestTime) { fastestTime = elapsedTime; Array.from(historyList.children).forEach(item => item.classList.remove("fastest")); historyItem.classList.add("fastest"); } historyList.prepend(historyItem); // Add to the top of the list randomNumbers = generateRandomNumbers(); // Generate new random numbers startTime = Date.now(); // Reset timer } else { result.textContent = "No Match"; result.style.color = "red"; } } checkButton.addEventListener("click", checkMatch); inputField.addEventListener("keydown", (e) => { if (e.key === "Enter") { checkMatch(); } }); </script> </body> </html>
반응형