Jogo da Memória com Números - Código JavaScript

347 iroger7

Abrir no Editor Video Publique Seu Código

Jogo da Memória com Números - Código JavaScript

Recomendado

8 November 2025

Exemplo de código HTML simples para calculadora

27 December 2025

Envelope de carta de amor animado em HTML com GSAP

7 December 2024

Um código por creativebug722

HTML

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

Jogo da Memória com Números - Código JavaScript

Recomendado

Exemplo de código HTML simples para calculadora

Envelope de carta de amor animado em HTML com GSAP

Um código por creativebug722

HTML

CSS

JS

Recomendado

Exemplo de código HTML simples para calculadora

Envelope de carta de amor animado em HTML com GSAP

Um código por creativebug722

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS