Gioco di memoria numerica - Codice JavaScript

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

21 December 2024

Frammento di codice di animazione CSS Dopamine Drip

16 April 2025

<!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>

Gioco di memoria numerica - Codice JavaScript

Consigliato

password di accesso

Frammento di codice di animazione CSS Dopamine Drip

Un codice di anhtuanle2004yst

HTML

CSS

JS

Consigliato

password di accesso

Frammento di codice di animazione CSS Dopamine Drip

Un codice di anhtuanle2004yst

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS