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

Abrir no Editor Publique Seu Código

Recomendado

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

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

Recomendado

Um código do Ghost????

Um código por komplex

Um código por fragolahack

HTML

CSS

JS

Recomendado

Um código do Ghost????

Um código por komplex

Um código por fragolahack

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS