Square Levels Game: HTML, CSS, JavaScript

Open In Editor Video 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

Portfolio Website Template HTML CSS JavaScript

Image Slider HTML CSS JavaScript

HTML Canvas Snake Game JavaScript Source Code

HTML

CSS

JS

Recommended

Portfolio Website Template HTML CSS JavaScript

Image Slider HTML CSS JavaScript

HTML Canvas Snake Game JavaScript Source Code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS