Square Levels Game: HTML, CSS, JavaScript

Open In Editor Publish Your Code

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

Square Levels Game: HTML, CSS, JavaScript

Recommended

Virtual Keyboard HTML CSS JavaScript

JavaScript Stack Game

HTML

CSS

JS

Recommended

Virtual Keyboard HTML CSS JavaScript

JavaScript Stack Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS