Improve: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Snake Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            overflow: hidden;
            padding: 20px;
        }
        
        .game-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            text-align: center;
        }
        
        .header {
            margin-bottom: 20px;
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }
        
        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 5px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 2px;
        }
        
        .score-container {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 10px;
        }
        
        .score-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
        }
        
        .score-box h2 {
            color: #feb47b;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .score-box p {
            color: white;
            font-size: 1.8rem;
            font-weight: bold;
        }
        
        .game-board {
            position: relative;
            width: 100%;
            height: 70vh;
            max-height: 500px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            margin: 0 auto 20px;
            border: 3px solid rgba(255, 255, 255, 0.1);
        }
        
        canvas {
            display: block;
            background: rgba(10, 10, 25, 0.7);
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .control-btn {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            user-select: none;
        }
        
        .control-btn:active {
            transform: scale(0.95);
            background: rgba(255, 255, 255, 0.2);
        }
        
        .direction-controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            width: 210px;
            height: 210px;
            margin: 0 auto;
        }
        
        #up {
            grid-column: 2;
            grid-row: 1;
        }
        
        #down {
            grid-column: 2;
            grid-row: 3;
        }
        
        #left {
            grid-column: 1;
            grid-row: 2;
        }
        
        #right {
            grid-column: 3;
            grid-row: 2;
        }
        
        #pause {
            background: rgba(255, 100, 100, 0.3);
            font-size: 24px;
            width: 100px;
            height: 50px;
            border-radius: 25px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            grid-column: 1 / span 3;
            grid-row: 2;
        }
        
        .instructions {
            color: rgba(255, 255, 255, 0.7);
            margin-top: 20px;
            font-size: 1rem;
            line-height: 1.6;
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            90% {
                opacity: 0.4;
            }
            100% {
                transform: translateY(-100px) translateX(100px);
                opacity: 0;
            }
        }
        
        .game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            display: none;
        }
        
        .game-over h2 {
            color: #ff7e5f;
            font-size: 3rem;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(255, 126, 95, 0.5);
        }
        
        .restart-btn {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            border: none;
            padding: 15px 40px;
            border-radius: 30px;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .restart-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .score-container {
                gap: 15px;
            }
            
            .score-box {
                padding: 8px 15px;
            }
            
            .score-box h2 {
                font-size: 1rem;
            }
            
            .score-box p {
                font-size: 1.5rem;
            }
            
            .control-btn {
                width: 60px;
                height: 60px;
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>
    
    <div class="game-container">
        <div class="header">
            <h1>COLORFUL SNAKE</h1>
            <div class="score-container">
                <div class="score-box">
                    <h2>SCORE</h2>
                    <p id="score">0</p>
                </div>
                <div class="score-box">
                    <h2>APPLES</h2>
                    <p id="apples-eaten">0</p>
                </div>
            </div>
        </div>
        
        <div class="game-board">
            <canvas id="gameCanvas"></canvas>
            <div class="game-over" id="gameOver">
                <h2>GAME OVER</h2>
                <button class="restart-btn" id="restartBtn">PLAY AGAIN</button>
            </div>
        </div>
        
        <div class="controls">
            <div class="direction-controls">
                <div class="control-btn" id="up">↑</div>
                <div class="control-btn" id="left">←</div>
                <div class="control-btn" id="pause">❚❚</div>
                <div class="control-btn" id="right">→</div>
                <div class="control-btn" id="down">↓</div>
            </div>
        </div>
        
        <div class="instructions">
            <p>Eat the colorful apples! Snake wraps around walls. 3-5 apples at a time. Tap controls to move.</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Canvas setup
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');
            const gameBoard = document.querySelector('.game-board');
            const scoreDisplay = document.getElementById('score');
            const applesEatenDisplay = document.getElementById('apples-eaten');
            const gameOverScreen = document.getElementById('gameOver');
            const restartBtn = document.getElementById('restartBtn');
            
            // Set canvas size to match its container
            canvas.width = gameBoard.clientWidth;
            canvas.height = gameBoard.clientHeight;
            
            // Game constants
            const gridSize = 20;
            const gridWidth = Math.floor(canvas.width / gridSize);
            const gridHeight = Math.floor(canvas.height / gridSize);
            const minApples = 3;
            const maxApples = 5;
            
            // Game variables
            let snake = [];
            let apples = [];
            let direction = 'right';
            let nextDirection = 'right';
            let score = 0;
            let applesEaten = 0;
            let gameSpeed = 120;
            let gameRunning = false;
            let gameLoop;
            let particles = [];
            let lastRenderTime = 0;
            
            // Initialize game
            function initGame() {
                // Initialize snake in the middle
                snake = [
                    {x: Math.floor(gridWidth / 2), y: Math.floor(gridHeight / 2)},
                    {x: Math.floor(gridWidth / 2) - 1, y: Math.floor(gridHeight / 2)},
                    {x: Math.floor(gridWidth / 2) - 2, y: Math.floor(gridHeight / 2)}
                ];
                
                // Initialize apples
                apples = [];
                spawnApples();
                
                // Reset game state
                direction = 'right';
                nextDirection = 'right';
                score = 0;
                applesEaten = 0;
                gameSpeed = 120;
                gameRunning = true;
                gameOverScreen.style.display = 'none';
                
                // Update displays
                scoreDisplay.textContent = score;
                applesEatenDisplay.textContent = applesEaten;
            }
            
            // Spawn 3-5 apples at random positions
            function spawnApples() {
                const appleCount = Math.floor(Math.random() * (maxApples - minApples + 1)) + minApples;
                
                while (apples.length < appleCount) {
                    const newApple = {
                        x: Math.floor(Math.random() * gridWidth),
                        y: Math.floor(Math.random() * gridHeight),
                        color: getRandomColor()
                    };
                    
                    // Check if apple is on snake or existing apple
                    let validPosition = true;
                    
                    // Check snake
                    for (let segment of snake) {
                        if (segment.x === newApple.x && segment.y === newApple.y) {
                            validPosition = false;
                            break;
                        }
                    }
                    
                    // Check existing apples
                    for (let apple of apples) {
                        if (apple.x === newApple.x && apple.y === newApple.y) {
                            validPosition = false;
                            break;
                        }
                    }
                    
                    if (validPosition) {
                        apples.push(newApple);
                    }
                }
            }
            
            // Get random color for apples and effects
            function getRandomColor() {
                const colors = [
                    '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', 
                    '#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
                    '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }
            
            // Create particle effect
            function createParticles(x, y, color) {
                for (let i = 0; i < 15; i++) {
                    particles.push({
                        x: x * gridSize + gridSize / 2,
                        y: y * gridSize + gridSize / 2,
                        color: color,
                        size: Math.random() * 5 + 2,
                        speedX: (Math.random() - 0.5) * 10,
                        speedY: (Math.random() - 0.5) * 10,
                        life: 30
                    });
                }
            }
            
            // Update particles
            function updateParticles() {
                for (let i = particles.length - 1; i >= 0; i--) {
                    particles[i].x += particles[i].speedX;
                    particles[i].y += particles[i].speedY;
                    particles[i].life--;
                    
                    if (particles[i].life <= 0) {
                        particles.splice(i, 1);
                    }
                }
            }
            
            // Draw particles
            function drawParticles() {
                for (let particle of particles) {
                    ctx.globalAlpha = particle.life / 30;
                    ctx.fillStyle = particle.color;
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                    ctx.fill();
                }
                ctx.globalAlpha = 1;
            }
            
            // Main game loop
            function gameUpdate(currentTime) {
                if (!gameRunning) return;
                
                window.requestAnimationFrame(gameUpdate);
                
                const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000;
                if (secondsSinceLastRender < 1 / (gameSpeed / 1000)) return;
                lastRenderTime = currentTime;
                
                // Update direction
                direction = nextDirection;
                
                // Calculate new head position
                const head = {x: snake[0].x, y: snake[0].y};
                
                switch (direction) {
                    case 'up': head.y--; break;
                    case 'down': head.y++; break;
                    case 'left': head.x--; break;
                    case 'right': head.x++; break;
                }
                
                // Wrap around the walls
                if (head.x < 0) head.x = gridWidth - 1;
                if (head.x >= gridWidth) head.x = 0;
                if (head.y < 0) head.y = gridHeight - 1;
                if (head.y >= gridHeight) head.y = 0;
                
                // Check collision with self
                for (let i = 0; i < snake.length; i++) {
                    if (snake[i].x === head.x && snake[i].y === head.y) {
                        gameOver();
                        return;
                    }
                }
                
                // Add new head
                snake.unshift(head);
                
                // Check if snake ate an apple
                let ateApple = false;
                for (let i = 0; i < apples.length; i++) {
                    if (apples[i].x === head.x && apples[i].y === head.y) {
                        // Remove the apple
                        const appleColor = apples[i].color;
                        apples.splice(i, 1);
                        
                        // Create particle effect
                        createParticles(head.x, head.y, appleColor);
                        
                        // Increase score and speed
                        score += 10;
                        applesEaten++;
                        gameSpeed = Math.max(50, gameSpeed - 2); // Speed up a bit
                        
                        // Update displays
                        scoreDisplay.textContent = score;
                        applesEatenDisplay.textContent = applesEaten;
                        
                        ateApple = true;
                        break;
                    }
                }
                
                // If no apple was eaten, remove tail
                if (!ateApple) {
                    snake.pop();
                } else {
                    // Spawn new apple to replace the eaten one
                    spawnApples();
                }
                
                // Draw everything
                draw();
            }
            
            // Draw game elements
            function draw() {
                // Clear canvas
                ctx.fillStyle = 'rgba(10, 10, 25, 0.7)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Draw grid
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
                ctx.lineWidth = 0.5;
                
                for (let x = 0; x < gridWidth; x++) {
                    for (let y = 0; y < gridHeight; y++) {
                        ctx.strokeRect(x * gridSize, y * gridSize, gridSize, gridSize);
                    }
                }
                
                // Draw snake
                for (let i = 0; i < snake.length; i++) {
                    // Head is different color
                    if (i === 0) {
                        ctx.fillStyle = '#4CAF50';
                    } else {
                        // Gradient body
                        const hue = 120 + Math.floor(30 * (i / snake.length));
                        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
                    }
                    
                    ctx.fillRect(
                        snake[i].x * gridSize, 
                        snake[i].y * gridSize, 
                        gridSize, 
                        gridSize
                    );
                    
                    // Add rounded corners
                    ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
                    ctx.lineWidth = 2;
                    ctx.strokeRect(
                        snake[i].x * gridSize, 
                        snake[i].y * gridSize, 
                        gridSize, 
                        gridSize
                    );
                }
                
                // Draw apples
                for (let apple of apples) {
                    ctx.fillStyle = apple.color;
                    ctx.beginPath();
                    ctx.arc(
                        apple.x * gridSize + gridSize / 2,
                        apple.y * gridSize + gridSize / 2,
                        gridSize / 2 - 2,
                        0,
                        Math.PI * 2
                    );
                    ctx.fill();
                    
                    // Add shine effect
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
                    ctx.beginPath();
                    ctx.arc(
                        apple.x * gridSize + gridSize / 3,
                        apple.y * gridSize + gridSize / 3,
                        gridSize / 6,
                        0,
                        Math.PI * 2
                    );
                    ctx.fill();
                }
                
                // Draw particles
                updateParticles();
                drawParticles();
            }
            
            // Game over function
            function gameOver() {
                gameRunning = false;
                gameOverScreen.style.display = 'flex';
            }
            
            // Event listeners for controls
            document.getElementById('up').addEventListener('click', () => {
                if (direction !== 'down') nextDirection = 'up';
            });
            
            document.getElementById('down').addEventListener('click', () => {
                if (direction !== 'up') nextDirection = 'down';
            });
            
            document.getElementById('left').addEventListener('click', () => {
                if (direction !== 'right') nextDirection = 'left';
            });
            
            document.getElementById('right').addEventListener('click', () => {
                if (direction !== 'left') nextDirection = 'right';
            });
            
            document.getElementById('pause').addEventListener('click', () => {
                gameRunning = !gameRunning;
                if (gameRunning) {
                    lastRenderTime = performance.now();
                    window.requestAnimationFrame(gameUpdate);
                }
            });
            
            restartBtn.addEventListener('click', () => {
                initGame();
                lastRenderTime = performance.now();
                window.requestAnimationFrame(gameUpdate);
            });
            
            // Keyboard controls
            document.addEventListener('keydown', (e) => {
                switch (e.key) {
                    case 'ArrowUp':
                        if (direction !== 'down') nextDirection = 'up';
                        break;
                    case 'ArrowDown':
                        if (direction !== 'up') nextDirection = 'down';
                        break;
                    case 'ArrowLeft':
                        if (direction !== 'right') nextDirection = 'left';
                        break;
                    case 'ArrowRight':
                        if (direction !== 'left') nextDirection = 'right';
                        break;
                    case ' ':
                        gameRunning = !gameRunning;
                        if (gameRunning) {
                            lastRenderTime = performance.now();
                            window.requestAnimationFrame(gameUpdate);
                        }
                        break;
                }
            });
            
            // Create background particles
            function createBackgroundParticles() {
                const particlesContainer = document.getElementById('particles');
                for (let i = 0; i < 50; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('particle');
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.width = `${Math.random() * 10 + 2}px`;
                    particle.style.height = particle.style.width;
                    particle.style.animationDuration = `${Math.random() * 20 + 10}s`;
                    particle.style.animationDelay = `${Math.random() * 5}s`;
                    particle.style.backgroundColor = getRandomColor();
                    particlesContainer.appendChild(particle);
                }
            }
            
            // Start the game
            createBackgroundParticles();
            initGame();
            lastRenderTime = performance.now();
            window.requestAnimationFrame(gameUpdate);
        });
    </script>
</body>
</html>