Number Memory Game - JavaScript Code

846 iroger7

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Number Memory Game</title>  
      
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            background: #f8f8f8;  
            margin: 0;  
            padding: 0;  
            display: flex;  
            flex-direction: column;  
            min-height: 100vh;  
            align-items: center;  
            justify-content: center;  
        }  
        main {  
            background: #fff;  
            padding: 2em;  
            border-radius: 10px;  
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);  
            max-width: 350px;  
            width: 100%;  
            text-align: center;  
        }  
        #number-sequence {  
            font-size: 2em;  
            letter-spacing: 0.2em;  
            margin: 1em 0;  
        }  
        input[type="text"] {  
            font-size: 1.2em;  
            padding: 0.5em;  
            margin-bottom: 1em;  
            width: 100%;  
            box-sizing: border-box;  
        }  
        button {  
            font-size: 1em;  
            padding: 0.5em 1.5em;  
            margin: 0.5em 0.2em;  
            border: none;  
            background: #007bff;  
            color: #fff;  
            border-radius: 5px;  
            cursor: pointer;  
        }  
        button:disabled {  
            background: #ccc;  
            cursor: default;  
        }  
        #feedback {  
            margin-top: 1em;  
            min-height: 2em;  
            font-weight: bold;  
        }  
    </style>  
</head>  
<body>  
    <main>  
        <h1>Number Memory Game</h1>  
        <p id="instructions">Memorize the sequence of numbers. After 5 seconds, enter the sequence to continue. A new number is added each round!</p>  
          
        <div id="number-sequence" aria-live="polite"></div>  
          
          
        <form id="guess-form" autocomplete="off" style="display:none;">  
            <label for="user-guess" id="guess-label">Enter the sequence:</label><br>  
            <input type="text" id="user-guess" aria-labelledby="guess-label" inputmode="numeric" pattern="[0-9 ]*"  
                   placeholder="e.g., 3 5 1" required />  
            <br>  
            <button type="submit">Submit</button>  
        </form>  
        <button id="start-btn">Start Game</button>  
        <div id="feedback" aria-live="polite"></div>  
        <div id="score"></div>  
    </main>  
    <script>  
        // Memory Game Logic

// Game state variables  
        let sequence = [];  
        let round = 0;  
        const numberSequenceDiv = document.getElementById('number-sequence');  
        const startBtn = document.getElementById('start-btn');  
        const guessForm = document.getElementById('guess-form');  
        const userGuessInput = document.getElementById('user-guess');  
        const feedbackDiv = document.getElementById('feedback');  
        const scoreDiv = document.getElementById('score');

// Generate a random digit (0-9)  
        function getRandomDigit() {  
            return Math.floor(Math.random() * 10);  
        }

// Helper: Show the sequence for 5 seconds, then hide it  
        function showSequence() {  
            numberSequenceDiv.textContent = sequence.join(' ');  
            numberSequenceDiv.style.visibility = 'visible';  
            guessForm.style.display = 'none';  
            userGuessInput.value = '';  
            feedbackDiv.textContent = '';  
            scoreDiv.textContent = `Round: ${round}`;  
            // Hide sequence after 5 seconds and prompt user for guess  
            setTimeout(() => {  
                numberSequenceDiv.style.visibility = 'hidden';  
                guessForm.style.display = 'block';  
                userGuessInput.focus();  
            }, 5000);  
        }

// Start a new round  
        function nextRound() {  
            round++;  
            // Add a new random digit to the sequence  
            sequence.push(getRandomDigit());  
            showSequence();  
        }

// Reset the game  
        function resetGame() {  
            sequence = [];  
            round = 0;  
            scoreDiv.textContent = '';  
            feedbackDiv.textContent = '';  
            numberSequenceDiv.textContent = '';  
            numberSequenceDiv.style.visibility = 'hidden';  
            guessForm.style.display = 'none';  
        }

// Handle the user's guess submission  
        guessForm.addEventListener('submit', function(event) {  
            event.preventDefault();  
            const guess = userGuessInput.value.trim().split(/\s+/).map(Number);  
            if (guess.length !== sequence.length || guess.some(isNaN)) {  
                feedbackDiv.textContent = 'Please enter the correct number of digits, separated by spaces.';  
                return;  
            }  
            // Check if user's guess matches the sequence  
            const correct = sequence.every((num, idx) => num === guess[idx]);  
            if (correct) {  
                feedbackDiv.textContent = 'Correct! Get ready for the next round...';  
                setTimeout(() => {  
                    nextRound();  
                }, 1200);  
            } else {  
                feedbackDiv.textContent = `Game Over! You reached round ${round}. Sequence was: ${sequence.join(' ')}`;  
                startBtn.style.display = 'inline-block';  
                guessForm.style.display = 'none';  
                scoreDiv.textContent = '';  
            }  
        });

// Start button handler  
        startBtn.addEventListener('click', function() {  
            startBtn.style.display = 'none';  
            resetGame();  
            nextRound();  
        });

// Allow Enter key to start the game  
        document.addEventListener('keydown', function(e) {  
            if (e.key === 'Enter' && startBtn.style.display !== 'none') {  
                startBtn.click();  
            }  
        });

// Accessibility: Focus input after sequence hides  
        userGuessInput.addEventListener('focus', function() {  
            this.select();  
        });  
    </script>  
</body>  
</html>

CSS

Number Memory Game - JavaScript Code

Recommended