Jogo de Níveis Quadrados: HTML, CSS, JavaScript

21 iroger7

Abrir no Editor Publique Seu Código

Jogo de Níveis Quadrados: HTML, CSS, JavaScript

Recomendado

23 July 2025

Estrutura HTML do reprodutor de iPod neumórfico

28 June 2025

Modelo de site de aluguel de bicicletas em HTML

28 May 2025

Caneta de pena

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Square Levels Game</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
      
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            background: #1a1a1a;  
            color: #fff;  
            margin: 0;  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            min-height: 100vh;  
        }  
        header {  
            margin: 2rem 0 1rem;  
            text-align: center;  
        }  
        .game-board {  
            display: grid;  
            grid-template-columns: repeat(5, 50px); /* 5x5 square board */  
            grid-template-rows: repeat(5, 50px);  
            gap: 6px;  
            background: #222;  
            padding: 16px;  
            border-radius: 12px;  
            margin-bottom: 2rem;  
        }  
        .square {  
            width: 50px;  
            height: 50px;  
            background: #444;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            font-size: 1.5rem;  
            border-radius: 8px;  
            cursor: pointer;  
            transition: background 0.2s;  
        }  
        .square.active {  
            background: #ff7043;  
        }  
        .square.correct {  
            background: #43ff70;  
        }  
        .controls {  
            display: flex;  
            gap: 1rem;  
            margin-bottom: 2rem;  
        }  
        button {  
            padding: 0.7rem 1.5rem;  
            font-size: 1rem;  
            border: none;  
            border-radius: 8px;  
            background: #333;  
            color: #fff;  
            cursor: pointer;  
            transition: background 0.2s;  
        }  
        button:active {  
            background: #555;  
        }  
        .level-info {  
            margin-bottom: 1rem;  
        }  
        @media (max-width: 600px) {  
            .game-board {  
                grid-template-columns: repeat(5, 32px);  
                grid-template-rows: repeat(5, 32px);  
                padding: 8px;  
            }  
            .square {  
                width: 32px;  
                height: 32px;  
                font-size: 1rem;  
            }  
        }  
    </style>  
</head>  
<body>  
      
    <header>  
        <h1>Square Levels Game</h1>  
        <p>Click the highlighted squares in the correct order to advance.<br>  
        Each level gets harder!</p>  
    </header>

<div class="level-info" aria-live="polite">  
        Level: <span id="level">1</span> / 40  
        —  
        Score: <span id="score">0</span>  
    </div>

<div class="game-board" id="game-board" role="grid" aria-label="Game Board"></div>

<div class="controls">  
        <button id="prev-level" aria-label="Previous Level">← Prev</button>  
        <button id="next-level" aria-label="Next Level">Next →</button>  
        <button id="restart" aria-label="Restart Game">Restart</button>  
    </div>

<script>  
    // Number of levels: original + 30 more (e.g., 40 total)  
    const TOTAL_LEVELS = 40;  
    const BOARD_SIZE = 5 * 5; // 5x5 square board  
    const board = document.getElementById('game-board');  
    const levelDisplay = document.getElementById('level');  
    const scoreDisplay = document.getElementById('score');  
    let currentLevel = 1;  
    let score = 0;  
    let sequence = [];  
    let userStep = 0;  
    let acceptingInput = false;

// Function to generate a sequence based on level (gets longer/harder)  
    function generateSequence(level) {  
        // Start with 3 squares, increase by 1 every 2 levels up to 15  
        const length = Math.min(3 + Math.floor(level/2), 15);  
        const seq = [];  
        for (let i = 0; i < length; i++) {  
            let idx;  
            do {  
                idx = Math.floor(Math.random() * BOARD_SIZE);  
            } while (seq.includes(idx)); // prevent repeats  
            seq.push(idx);  
        }  
        return seq;  
    }

// Render the board and highlight the sequence  
    function renderBoard(activeIdx = null, correctIdxs = []) {  
        board.innerHTML = '';  
        for (let i = 0; i < BOARD_SIZE; i++) {  
            const div = document.createElement('div');  
            div.classList.add('square');  
            div.setAttribute('role', 'button');  
            div.setAttribute('tabindex', '0');  
            div.setAttribute('aria-label', `Square ${i+1}`);  
            if (i === activeIdx) div.classList.add('active');  
            if (correctIdxs.includes(i)) div.classList.add('correct');  
            div.addEventListener('click', () => handleSquareClick(i));  
            board.appendChild(div);  
        }  
    }

// Show the sequence to the user  
    function showSequence(seq) {  
        acceptingInput = false;  
        let i = 0;  
        function highlightNext() {  
            renderBoard(seq[i]);  
            i++;  
            if (i < seq.length) {  
                setTimeout(highlightNext, 600 - Math.min(currentLevel * 10, 400));  
            } else {  
                setTimeout(() => {  
                    renderBoard();  
                    acceptingInput = true;  
                }, 600);  
            }  
        }  
        highlightNext();  
    }

// Handle user clicks  
    function handleSquareClick(idx) {  
        if (!acceptingInput) return;  
        if (idx === sequence[userStep]) {  
            userStep++;  
            renderBoard(null, sequence.slice(0, userStep));  
            if (userStep === sequence.length) {  
                score += 10 * currentLevel;  
                scoreDisplay.textContent = score;  
                setTimeout(nextLevel, 700);  
            }  
        } else {  
            // Wrong square, reset level  
            acceptingInput = false;  
            alert('Wrong square! Try the level again.');  
            setTimeout(startLevel, 700);  
        }  
    }

// Start a level  
    function startLevel() {  
        levelDisplay.textContent = currentLevel;  
        userStep = 0;  
        sequence = generateSequence(currentLevel);  
        renderBoard();  
        setTimeout(() => showSequence(sequence), 600);  
    }

// Next/Prev/Restart controls  
    function nextLevel() {  
        if (currentLevel < TOTAL_LEVELS) {  
            currentLevel++;  
            startLevel();  
        } else {  
            alert('Congratulations! You completed all levels!');  
            restartGame();  
        }  
    }  
    function prevLevel() {  
        if (currentLevel > 1) {  
            currentLevel--;  
            startLevel();  
        }  
    }  
    function restartGame() {  
        currentLevel = 1;  
        score = 0;  
        scoreDisplay.textContent = score;  
        startLevel();  
    }

// Event listeners  
    document.getElementById('next-level').onclick = nextLevel;  
    document.getElementById('prev-level').onclick = prevLevel;  
    document.getElementById('restart').onclick = restartGame;

// Initialize game  
    startLevel();  
    </script>  
      
</body>  
</html>

Recomendado

Estrutura HTML do reprodutor de iPod neumórfico

Modelo de site de aluguel de bicicletas em HTML

Caneta de pena

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS