Home
QQ-VVN
random design

random design

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Other

Author QQ-VVN

160

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Cyber Snake</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'cyber-black': '#0a0e17',
                        'cyber-blue': '#00ffe7',
                        'cyber-pink': '#ff2a6d',
                        'cyber-purple': '#d300c5',
                        'cyber-yellow': '#f7f700',
                        'cyber-green': '#05ffa1',
                    },
                    animation: {
                        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'float': 'float 3s ease-in-out infinite',
                        'glitch': 'glitch 1s linear infinite',
                        'scanline': 'scanline 6s linear infinite',
                        'rotate-slow': 'rotate 15s linear infinite',
                        'rotate-medium': 'rotate 10s linear infinite',
                        'rotate-fast': 'rotate 5s linear infinite',
                    },
                    keyframes: {
                        glow: {
                            '0%': { 'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #05ffa1, 0 0 20px #05ffa1' },
                            '100%': { 'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #05ffa1, 0 0 40px #05ffa1' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        glitch: {
                            '0%, 100%': { transform: 'translate(0)' },
                            '20%': { transform: 'translate(-2px, 2px)' },
                            '40%': { transform: 'translate(-2px, -2px)' },
                            '60%': { transform: 'translate(2px, 2px)' },
                            '80%': { transform: 'translate(2px, -2px)' },
                        },
                        scanline: {
                            '0%': { top: '0%' },
                            '100%': { top: '100%' },
                        },
                        rotate: {
                            '0%': { transform: 'rotate(0deg)' },
                            '100%': { transform: 'rotate(360deg)' },
                        }
                    },
                    boxShadow: {
                        'neon-blue': '0 0 5px #00ffe7, 0 0 10px #00ffe7, 0 0 20px #00ffe7',
                        'neon-pink': '0 0 5px #ff2a6d, 0 0 10px #ff2a6d, 0 0 20px #ff2a6d',
                        'neon-green': '0 0 5px #05ffa1, 0 0 10px #05ffa1, 0 0 20px #05ffa1',
                        'neon-purple': '0 0 5px #d300c5, 0 0 10px #d300c5, 0 0 20px #d300c5',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Orbitron', sans-serif;
            background-color: #0a0e17;
            overflow: hidden;
            color: white;
        }
        
        .cyber-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .cyber-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
        }
        
        .cyber-btn:hover::before {
            left: 100%;
        }
        
        .cyber-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        .cyber-btn:active {
            transform: translateY(0);
        }
        
        .scanline {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: rgba(5, 255, 161, 0.1);
            z-index: 999;
            animation: scanline 6s linear infinite;
            pointer-events: none;
        }
        
        .glitch-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/png;base64,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');
            opacity: 0.03;
            pointer-events: none;
            z-index: 998;
        }
        
        .noise {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==');
            opacity: 0.05;
            pointer-events: none;
            z-index: 997;
        }
        
        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(5, 255, 161, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(5, 255, 161, 0.05) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            z-index: 996;
        }
        
        .game-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            background: radial-gradient(circle, rgba(5, 255, 161, 1) 0%, rgba(5, 255, 161, 0) 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 995;
        }
        
        .hexagon {
            position: absolute;
            width: 100px;
            height: 57.74px;
            background-color: rgba(5, 255, 161, 0.1);
            margin: 28.87px 0;
            border-left: solid 1px rgba(5, 255, 161, 0.3);
            border-right: solid 1px rgba(5, 255, 161, 0.3);
            pointer-events: none;
        }
        
        .hexagon:before,
        .hexagon:after {
            content: "";
            position: absolute;
            z-index: 1;
            width: 70.71px;
            height: 70.71px;
            transform: scaleY(0.5774) rotate(-45deg);
            background-color: inherit;
            left: 14.64px;
        }
        
        .hexagon:before {
            top: -35.3553px;
            border-top: solid 1.4142px rgba(5, 255, 161, 0.3);
            border-right: solid 1.4142px rgba(5, 255, 161, 0.3);
        }
        
        .hexagon:after {
            bottom: -35.3553px;
            border-bottom: solid 1.4142px rgba(5, 255, 161, 0.3);
            border-left: solid 1.4142px rgba(5, 255, 161, 0.3);
        }
        
        .perspective-container {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        
        .rotating-element {
            transform-style: preserve-3d;
            animation: rotate 15s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(360deg); }
        }
        
        .score-digit {
            display: inline-block;
            width: 30px;
            height: 50px;
            margin: 0 2px;
            background-color: rgba(5, 255, 161, 0.1);
            border: 1px solid rgba(5, 255, 161, 0.5);
            border-radius: 4px;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
            font-weight: bold;
            color: #05ffa1;
            text-shadow: 0 0 5px #05ffa1;
            box-shadow: 0 0 10px rgba(5, 255, 161, 0.3);
            transition: all 0.3s ease;
        }
        
        .score-digit.changing {
            animation: digit-change 0.3s ease;
        }
        
        @keyframes digit-change {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        
        .hologram {
            position: relative;
            overflow: hidden;
        }
        
        .hologram::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom,
                transparent 0%,
                rgba(5, 255, 161, 0.1) 50%,
                transparent 100%
            );
            animation: hologram-scan 3s linear infinite;
            transform: rotate(30deg);
            pointer-events: none;
        }
        
        @keyframes hologram-scan {
            0% { transform: rotate(30deg) translateY(-100%); }
            100% { transform: rotate(30deg) translateY(100%); }
        }
        
        .cyber-panel {
            background-color: rgba(10, 14, 23, 0.8);
            border: 1px solid rgba(5, 255, 161, 0.5);
            border-radius: 5px;
            box-shadow: 0 0 15px rgba(5, 255, 161, 0.3);
            backdrop-filter: blur(5px);
            position: relative;
            overflow: hidden;
        }
        
        .cyber-panel::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent 65%, rgba(5, 255, 161, 0.1) 70%, transparent 75%);
            background-size: 200% 200%;
            animation: panel-shine 3s linear infinite;
            pointer-events: none;
        }
        
        @keyframes panel-shine {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .cyber-corner {
            position: absolute;
            width: 10px;
            height: 10px;
            border-color: #05ffa1;
            border-style: solid;
            border-width: 0;
        }
        
        .cyber-corner.top-left {
            top: 0;
            left: 0;
            border-top-width: 2px;
            border-left-width: 2px;
        }
        
        .cyber-corner.top-right {
            top: 0;
            right: 0;
            border-top-width: 2px;
            border-right-width: 2px;
        }
        
        .cyber-corner.bottom-left {
            bottom: 0;
            left: 0;
            border-bottom-width: 2px;
            border-left-width: 2px;
        }
        
        .cyber-corner.bottom-right {
            bottom: 0;
            right: 0;
            border-bottom-width: 2px;
            border-right-width: 2px;
        }
        
        .cyber-loader {
            width: 100%;
            height: 4px;
            background-color: rgba(5, 255, 161, 0.2);
            position: relative;
            overflow: hidden;
            border-radius: 2px;
        }
        
        .cyber-loader::after {
            content: '';
            position: absolute;
            top: 0;
            left: -50%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, #05ffa1, transparent);
            animation: loader 1.5s linear infinite;
        }
        
        @keyframes loader {
            0% { left: -50%; }
            100% { left: 150%; }
        }
İşte kodun devamı:

```html
    </style>
</head>
<body class="bg-cyber-black text-white">
    
    <div class="scanline"></div>
    <div class="glitch-overlay"></div>
    <div class="noise"></div>
    <div class="grid-overlay"></div>
    
    
    <div id="canvas-container" class="w-full h-screen"></div>
    
    
    <div class="fixed inset-0 pointer-events-none">
        
        <div class="absolute top-0 left-0 right-0 p-4 flex justify-between items-center pointer-events-auto">
            <div class="cyber-panel p-3 flex items-center">
                <div class="cyber-corner top-left"></div>
                <div class="cyber-corner top-right"></div>
                <div class="cyber-corner bottom-left"></div>
                <div class="cyber-corner bottom-right"></div>
                <div class="text-cyber-green animate-pulse mr-3">LEVEL</div>
                <div id="level" class="text-cyber-green text-2xl font-bold">1</div>
            </div>
            
            <div class="perspective-container">
                <div class="rotating-element">
                    <div class="text-cyber-green text-xl font-bold animate-glow">CYBER SNAKE</div>
                </div>
            </div>
            
            <div class="cyber-panel p-3 flex items-center">
                <div class="cyber-corner top-left"></div>
                <div class="cyber-corner top-right"></div>
                <div class="cyber-corner bottom-left"></div>
                <div class="cyber-corner bottom-right"></div>
                <div class="text-cyber-green animate-pulse mr-3">SCORE</div>
                <div id="score-container" class="flex">
                    <div class="score-digit">0</div>
                    <div class="score-digit">0</div>
                    <div class="score-digit">0</div>
                    <div class="score-digit">0</div>
                </div>
            </div>
        </div>
        
        
        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 grid grid-cols-3 gap-2 w-48 pointer-events-auto">
            <div></div>
            <button id="upBtn" class="cyber-btn bg-cyber-black text-cyber-green border border-cyber-green p-3 rounded-lg flex items-center justify-center shadow-neon-green">
                ▲
            </button>
            <div></div>
            <button id="leftBtn" class="cyber-btn bg-cyber-black text-cyber-green border border-cyber-green p-3 rounded-lg flex items-center justify-center shadow-neon-green">
                ◄
            </button>
            <button id="downBtn" class="cyber-btn bg-cyber-black text-cyber-green border border-cyber-green p-3 rounded-lg flex items-center justify-center shadow-neon-green">
                ▼
            </button>
            <button id="rightBtn" class="cyber-btn bg-cyber-black text-cyber-green border border-cyber-green p-3 rounded-lg flex items-center justify-center shadow-neon-green">
                ►
            </button>
        </div>
        
        
        <div class="absolute top-20 right-4 cyber-panel p-4 w-64 pointer-events-auto">
            <div class="cyber-corner top-left"></div>
            <div class="cyber-corner top-right"></div>
            <div class="cyber-corner bottom-left"></div>
            <div class="cyber-corner bottom-right"></div>
            
            <h3 class="text-cyber-green text-lg font-bold mb-2">SYSTEM STATUS</h3>
            
            <div class="mb-3">
                <div class="flex justify-between text-sm mb-1">
                    <span>ENERGY</span>
                    <span id="energy-value">100%</span>
                </div>
                <div class="cyber-loader" id="energy-bar"></div>
            </div>
            
            <div class="mb-3">
                <div class="flex justify-between text-sm mb-1">
                    <span>SPEED</span>
                    <span id="speed-value">NORMAL</span>
                </div>
                <div class="cyber-loader" id="speed-bar"></div>
            </div>
            
            <div class="mb-3">
                <div class="flex justify-between text-sm mb-1">
                    <span>OBJECTIVE</span>
                    <span id="objective-value">COLLECT</span>
                </div>
                <div class="cyber-loader" id="objective-bar"></div>
            </div>
            
            <div class="mt-4">
                <button id="pauseBtn" class="cyber-btn bg-cyber-black text-cyber-blue border border-cyber-blue px-4 py-2 rounded-lg w-full hover:bg-cyber-blue hover:text-cyber-black transition-all duration-300 shadow-neon-blue">
                    PAUSE
                </button>
            </div>
        </div>
    </div>
    
    
    <div id="startScreen" class="fixed inset-0 flex flex-col items-center justify-center bg-cyber-black z-50">
        <div class="text-6xl text-cyber-green font-bold animate-glow mb-8">CYBER SNAKE</div>
        <div class="hologram mb-12">
            <div class="w-64 h-64 relative">
                <div class="hexagon animate-rotate-slow absolute" style="top: 30%; left: 30%; opacity: 0.3;"></div>
                <div class="hexagon animate-rotate-medium absolute" style="top: 20%; left: 40%; opacity: 0.2;"></div>
                <div class="hexagon animate-rotate-fast absolute" style="top: 40%; left: 20%; opacity: 0.1;"></div>
                
                
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="text-cyber-green text-9xl animate-pulse">S</div>
                </div>
            </div>
        </div>
        
        <div class="cyber-panel p-6 max-w-md w-full">
            <div class="cyber-corner top-left"></div>
            <div class="cyber-corner top-right"></div>
            <div class="cyber-corner bottom-left"></div>
            <div class="cyber-corner bottom-right"></div>
            
            <h2 class="text-2xl text-cyber-green font-bold mb-4">SELECT DIFFICULTY</h2>
            
            <div class="grid grid-cols-3 gap-4 mb-6">
                <button class="difficulty-btn cyber-btn bg-cyber-black text-cyber-green border border-cyber-green py-2 rounded-lg hover:bg-cyber-green hover:text-cyber-black transition-all duration-300" data-difficulty="easy">EASY</button>
                <button class="difficulty-btn cyber-btn bg-cyber-black text-cyber-yellow border border-cyber-yellow py-2 rounded-lg hover:bg-cyber-yellow hover:text-cyber-black transition-all duration-300" data-difficulty="medium">MEDIUM</button>
                <button class="difficulty-btn cyber-btn bg-cyber-black text-cyber-pink border border-cyber-pink py-2 rounded-lg hover:bg-cyber-pink hover:text-cyber-black transition-all duration-300" data-difficulty="hard">HARD</button>
            </div>
            
            <button id="startBtn" class="cyber-btn bg-cyber-black text-cyber-purple border-2 border-cyber-purple px-8 py-4 rounded-lg w-full hover:bg-cyber-purple hover:text-cyber-black transition-all duration-300 text-xl font-bold shadow-neon-purple">
                START GAME
            </button>
            
            <p class="text-white text-sm mt-6 text-center">Use arrow keys or buttons to play</p>
        </div>
    </div>
    
    
    <div id="gameOverScreen" class="fixed inset-0 flex flex-col items-center justify-center bg-cyber-black bg-opacity-90 z-50 hidden">
        <div class="text-6xl text-cyber-pink font-bold animate-glitch mb-8">GAME OVER</div>
        
        <div class="cyber-panel p-6 max-w-md w-full">
            <div class="cyber-corner top-left"></div>
            <div class="cyber-corner top-right"></div>
            <div class="cyber-corner bottom-left"></div>
            <div class="cyber-corner bottom-right"></div>
            
            <h2 class="text-2xl text-cyber-green font-bold mb-4">MISSION REPORT</h2>
            
            <div class="mb-6 grid grid-cols-2 gap-4">
                <div>
                    <div class="text-sm text-cyber-blue mb-1">FINAL SCORE</div>
                    <div id="finalScore" class="text-3xl text-cyber-green font-bold">0</div>
                </div>
                <div>
                    <div class="text-sm text-cyber-blue mb-1">HIGHEST SCORE</div>
                    <div id="highScore" class="text-3xl text-cyber-yellow font-bold">0</div>
                </div>
                <div>
                    <div class="text-sm text-cyber-blue mb-1">LEVEL REACHED</div>
                    <div id="finalLevel" class="text-3xl text-cyber-green font-bold">1</div>
                </div>
                <div>
                    <div class="text-sm text-cyber-blue mb-1">ITEMS COLLECTED</div>
                    <div id="itemsCollected" class="text-3xl text-cyber-green font-bold">0</div>
                </div>
            </div>
            
            <button id="restartBtn" class="cyber-btn bg-cyber-black text-cyber-green border-2 border-cyber-green px-8 py-4 rounded-lg w-full hover:bg-cyber-green hover:text-cyber-black transition-all duration-300 text-xl font-bold shadow-neon-green">
                RESTART MISSION
            </button>
        </div>
    </div>
    
    <script>
        // Three.js Setup
        let scene, camera, renderer, snake = [], food, gridSize = 20;
        let direction = 'right', nextDirection = 'right';
        let score = 0, level = 1, itemsCollected = 0;
        let gameSpeed = 150, isPaused = false, isGameOver = false;
        let difficulty = 'medium';
        let highScore = localStorage.getItem('cyberSnakeHighScore') || 0;
        
        // DOM Elements
        const startScreen = document.getElementById('startScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const startBtn = document.getElementById('startBtn');
        const restartBtn = document.getElementById('restartBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const difficultyBtns = document.querySelectorAll('.difficulty-btn');
        const upBtn = document.getElementById('upBtn');
        const downBtn = document.getElementById('downBtn');
        const leftBtn = document.getElementById('leftBtn');
        const rightBtn = document.getElementById('rightBtn');
        const scoreDigits = document.querySelectorAll('.score-digit');
        const levelElement = document.getElementById('level');
        const finalScoreElement = document.getElementById('finalScore');
        const highScoreElement = document.getElementById('highScore');
        const finalLevelElement = document.getElementById('finalLevel');
        const itemsCollectedElement = document.getElementById('itemsCollected');
        const energyValueElement = document.getElementById('energy-value');
        const speedValueElement = document.getElementById('speed-value');
        const objectiveValueElement = document.getElementById('objective-value');
        
        // Initialize Three.js Scene
        function initThreeJS() {
            // Create scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x0a0e17);
            
            // Create camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 30;
            
            // Create renderer
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('canvas-container').appendChild(renderer.domElement);
            
            // Add grid helper
            const gridHelper = new THREE.GridHelper(gridSize * 2, gridSize, 0x05ffa1, 0x05ffa1);
            gridHelper.position.y = -0.5;
            scene.add(gridHelper);
            
            // Add ambient light
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            
            // Add directional light
            const directionalLight = new THREE.DirectionalLight(0x05ffa1, 1);
            directionalLight.position.set(5, 10, 7.5);
            scene.add(directionalLight);
            
            // Add point lights for neon effect
            const pointLight1 = new THREE.PointLight(0xff2a6d, 1, 50);
            pointLight1.position.set(10, 10, 10);
            scene.add(pointLight1);
            
            const pointLight2 = new THREE.PointLight(0x05ffa1, 1, 50);
            pointLight2.position.set(-10, -10, 10);
            scene.add(pointLight2);
            
            // Handle window resize
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });
            
            // Start animation loop
            animate();
        }
        
        // Create Snake Segment
        function createSnakeSegment(x, y, z, isHead = false) {
            const geometry = isHead 
                ? new THREE.SphereGeometry(0.5, 16, 16) 
                : new THREE.BoxGeometry(0.9, 0.9, 0.9);
                
            const material = new THREE.MeshStandardMaterial({ 
                color: isHead ? 0x05ffa1 : 0x00ffe7,
                emissive: isHead ? 0x05ffa1 : 0x00ffe7,
                emissiveIntensity: isHead ? 0.7 : 0.5,
                metalness: 0.8,
                roughness: 0.2
            });
            
            const segment = new THREE.Mesh(geometry, material);
            segment.position.set(x, y, z);
            scene.add(segment);
            
            return {
                mesh: segment,
                x: x,
                y: y,
                z: z
            };
        }
        
        // Create Food
        function createFood() {
            // Remove existing food if any
            if (food) {
                scene.remove(food.mesh);
            }
            
            // Generate random position
            let validPosition = false;
            let x, y, z;
            
            while (!validPosition) {
                x = Math.floor(Math.random() * gridSize) - gridSize / 2;
                z = Math.floor(Math.random() * gridSize) - gridSize / 2;
                y = 0;
                
                // Check if position is not occupied by snake
                validPosition = true;
                for (const segment of snake) {
                    if (segment.x === x && segment.z === z) {
                        validPosition = false;
                        break;
                    }
                }
            }
            
            // Create food mesh
            const geometry = new THREE.OctahedronGeometry(0.5, 0);
            const material = new THREE.MeshStandardMaterial({ 
                color: 0xff2a6d,
                emissive: 0xff2a6d,
                emissiveIntensity: 0.7,
                metalness: 0.8,
                roughness: 0.2
            });
            
            const mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(x, y, z);
            scene.add(mesh);
            
            // Create point light for food
            const light = new THREE.PointLight(0xff2a6d, 1, 3);
            light.position.set(x, y, z);
            scene.add(light);
            
            return {
                mesh: mesh,
                light: light,
                x: x,
                y: y,
                z: z
            };
        }
        
        // Initialize Game
        function initGame() {
            // Clear previous game state
            snake.forEach(segment => {
                scene.remove(segment.mesh);
            });
            
            if (food) {
                scene.remove(food.mesh);
                scene.remove(food.light);
            }
            
            // Reset game variables
            snake = [];
            direction = 'right';
            nextDirection = 'right';
            score = 0;
            level = 1;
            itemsCollected = 0;
            isGameOver = false;
            
            // Set game speed based on difficulty
            switch (difficulty) {
                case 'easy':
                    gameSpeed = 200;
                    break;
                case 'medium':
                    gameSpeed = 150;
                    break;
                case 'hard':
                    gameSpeed = 100;
                    break;
            }
            
            // Create initial snake
            snake.push(createSnakeSegment(0, 0, 0, true)); // Head
            snake.push(createSnakeSegment(-1, 0, 0));
            snake.push(createSnakeSegment(-2, 0, 0));
            
            // Create food
            food = createFood();
            
            // Update UI
            updateScore(0);
            levelElement.textContent = level;
            energyValueElement.textContent = '100%';
            speedValueElement.textContent = difficulty.toUpperCase();
            objectiveValueElement.textContent = 'COLLECT';
            
            // Hide start screen and game over screen
            startScreen.classList.add('hidden');
            gameOverScreen.classList.add('hidden');
            
            // Start game loop
            if (gameInterval) clearInterval(gameInterval);
            gameInterval = setInterval(gameLoop, gameSpeed);
        }
        
        // Game Loop
        let gameInterval;
        function gameLoop() {
            if (isPaused || isGameOver) return;
            
            // Update direction
            direction = nextDirection;
            
            // Calculate new head position
            const head = snake[0];
            let newX = head.x;
            let newY = head.y;
            let newZ = head.z;
            
            switch (direction) {
                case 'right':
                    newX += 1;
                    break;
                case 'left':
                    newX -= 1;
                    break;
                case 'up':
                    newZ -= 1;
                    break;
                case 'down':
                    newZ += 1;
                    break;
            }
            
            // Check collision with walls
            if (
                newX < -gridSize / 2 || 
                newX >= gridSize / 2 || 
                newZ < -gridSize / 2 || 
                newZ >= gridSize / 2
            ) {
                gameOver();
                return;
            }
            
            // Check collision with self
            for (let i = 0; i < snake.length; i++) {
                if (snake[i].x === newX && snake[i].z === newZ) {
                    gameOver();
                    return;
                }
            }
            
            // Create new head
            const newHead = createSnakeSegment(newX, newY, newZ, true);
            snake.unshift(newHead);
            
            // Check if food is eaten
            if (newX === food.x && newZ === food.z) {
                eatFood();
            } else {
                // Remove tail
                const tail = snake.pop();
                scene.remove(tail.mesh);
            }
            
            // Animate snake
            animateSnake();
        }
        
        // Animate Snake
        function animateSnake() {
            // Add subtle movement to snake segments
            snake.forEach((segment, index) => {
                if (index > 0) {
                    // Make body segments follow the head with slight delay
                    const targetX = snake[index - 1].x;
                    const targetZ = snake[index - 1].z;
                    
                    // Smooth movement using GSAP
                    gsap.to(segment.mesh.position, {
                        x: targetX,
                        z: targetZ,
                        duration: gameSpeed / 1000,
                        ease: "power1.out"
                    });
                    
                    // Update segment position
                    segment.x = targetX;
                    segment.z = targetZ;
                }
                
                // Add subtle floating animation
                segment.mesh.position.y = Math.sin(Date.now() * 0.003 + index * 0.5) * 0.1;
                
                // Add subtle rotation to body segments
                if (index > 0) {
                    segment.mesh.rotation.y += 0.05;
                }
            });
            
            // Animate food
            if (food) {
                food.mesh.rotation.y += 0.02;
                food.mesh.rotation.x += 0.01;
                food.mesh.position.y = Math.sin(Date.now() * 0.002) * 0.2;
            }
        }
        
        // Eat Food
        function eatFood() {
            // Increase score
            updateScore(score + 10);
            itemsCollected++;
            
            // Create particle effect at food position
            createParticles(food.x, food.y, food.z, 0xff2a6d);
            
            // Remove old food
            scene.remove(food.mesh);
            scene.remove(food.light);
            
            // Create new food
            food = createFood();
            
            // Level up every 5 food items
            if (score % 50 === 0) {
                levelUp();
            }
        }
        
        // Level Up
        function levelUp() {
            level++;
            levelElement.textContent = level;
            
            // Speed up the game
            gameSpeed = Math.max(gameSpeed * 0.9, 50);
            clearInterval(gameInterval);
            gameInterval = setInterval(gameLoop, gameSpeed);
            
            // Update speed indicator
            let speedText;
            if (gameSpeed < 80) speedText = "EXTREME";
            else if (gameSpeed < 120) speedText = "FAST";
            else if (gameSpeed < 160) speedText = "NORMAL";
            else speedText = "SLOW";
            
            speedValueElement.textContent = speedText;
            
            // Create level up effect
            const levelUpText = document.createElement('div');
            levelUpText.className = 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl text-cyber-yellow font-bold animate-glow z-40';
            levelUpText.textContent = 'LEVEL UP!';
            document.body.appendChild(levelUpText);
            
            // Remove level up text after animation
            setTimeout(() => {
                document.body.removeChild(levelUpText);
            }, 2000);
        }
        
        // Create Particles
        function createParticles(x, y, z, color) {
            const particleCount = 15;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // Random size between 5px and 15px
                const size = Math.random() * 10 + 5;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // Convert 3D position to screen coordinates
                const vector = new THREE.Vector3(x, y, z);
                vector.project(camera);
                
                const screenX = (vector.x * 0.5 + 0.5) * window.innerWidth;
                const screenY = (vector.y * -0.5 + 0.5) * window.innerHeight;
                
                // Set initial position
                particle.style.left = `${screenX}px`;
                particle.style.top = `${screenY}px`;
                
                // Set color
                particle.style.backgroundColor = color;
                
                // Add to DOM
                document.body.appendChild(particle);
                
                // Animate particle
                const angle = Math.random() * Math.PI * 2;
                const speed = Math.random() * 100 + 50;
                const vx = Math.cos(angle) * speed;
                const vy = Math.sin(angle) * speed;
                
                gsap.to(particle, {
                    x: vx,
                    y: vy,
                    opacity: 0,
                    scale: 0,
                    duration: 1,
                    ease: "power2.out",
                    onComplete: () => {
                        document.body.removeChild(particle);
                    }
                });
            }
        }
        
        // Update Score
        function updateScore(newScore) {
            const oldScore = score;
            score = newScore;
            
            // Update score digits
            const scoreStr = score.toString().padStart(4, '0');
            
            scoreDigits.forEach((digit, index) => {
                const oldDigit = oldScore.toString().padStart(4, '0')[index];
                const newDigit = scoreStr[index];
                
                if (oldDigit !== newDigit) {
                    digit.classList.add('changing');
                    setTimeout(() => {
                        digit.textContent = newDigit;
                        digit.classList.remove('changing');
                    }, 150);
                } else {
                    digit.textContent = newDigit;
                }
            });
        }
        
        // Game Over
        function gameOver() {
            isGameOver = true;
            clearInterval(gameInterval);
            
            // Update high score
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('cyberSnakeHighScore', highScore);
            }
            
            // Update game over screen
            finalScoreElement.textContent = score;
            highScoreElement.textContent = highScore;
            finalLevelElement.textContent = level;
            itemsCollectedElement.textContent = itemsCollected;
            
            // Show game over screen with delay
            setTimeout(() => {
                gameOverScreen.classList.remove('hidden');
            }, 1000);
            
            // Create game over effect
            createParticles(snake[0].x, snake[0].y, snake[0].z, 0xff2a6d);
        }
        
        // Toggle Pause
        function togglePause() {
            isPaused = !isPaused;
            pauseBtn.textContent = isPaused ? 'RESUME' : 'PAUSE';
        }
        
        // Change Direction
        function changeDirection(newDirection) {
            // Prevent 180-degree turns
            if (
                (direction === 'up' && newDirection === 'down') ||
                (direction === 'down' && newDirection === 'up') ||
                (direction === 'left' && newDirection === 'right') ||
                (direction === 'right' && newDirection === 'left')
            ) {
                return;
            }
            
            nextDirection = newDirection;
        }
        
        // Animation Loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        
        // Event Listeners
        startBtn.addEventListener('click', initGame);
        restartBtn.addEventListener('click', initGame);
        pauseBtn.addEventListener('click', togglePause);
        
        difficultyBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                difficulty = btn.dataset.difficulty;
                
                // Update active button
                difficultyBtns.forEach(b => {
                    b.classList.remove('bg-cyber-green', 'bg-cyber-yellow', 'bg-cyber-pink');
                    b.classList.add('bg-cyber-black');
                });
                
                if (difficulty === 'easy') {
                    btn.classList.remove('bg-cyber-black');
                    btn.classList.add('bg-cyber-green');
                } else if (difficulty === 'medium') {
                    btn.classList.remove('bg-cyber-black');
                    btn.classList.add('bg-cyber-yellow');
                } else {
                    btn.classList.remove('bg-cyber-black');
                    btn.classList.add('bg-cyber-pink');
                }
            });
        });
        
        // Direction controls
        upBtn.addEventListener('click', () => changeDirection('up'));
        downBtn.addEventListener('click', () => changeDirection('down'));
        leftBtn.addEventListener('click', () => changeDirection('left'));
        rightBtn.addEventListener('click', () => changeDirection('right'));
        
        // Keyboard controls
        document.addEventListener('keydown', (e) => {
            if (isGameOver) return;
            
            switch (e.key) {
                case 'ArrowUp':
                    changeDirection('up');
                    e.preventDefault();
                    break;
                case 'ArrowDown':
                    changeDirection('down');
                    e.preventDefault();
                    break;
                case 'ArrowLeft':
                    changeDirection('left');
                    e.preventDefault();
                    break;
                case 'ArrowRight':
                    changeDirection('right');
                    e.preventDefault();
                    break;
                case ' ':
                    togglePause();
                    e.preventDefault();
                    break;
            }
        });
        
        // Initialize Three.js
        initThreeJS();
        
        // Add hexagons to background
        function addBackgroundHexagons() {
            const count = 10;
            
            for (let i = 0; i < count; i++) {
                const hexagon = document.createElement('div');
                hexagon.className = 'hexagon';
                
                // Random position
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                
                // Random size
                const size = Math.random() * 50 + 50;
                hexagon.style.width = `${size}px`;
                hexagon.style.height = `${size * 0.5774}px`;
                
                // Random rotation
                const rotation = Math.random() * 360;
                hexagon.style.transform = `rotate(${rotation}deg)`;
                
                // Random opacity
                const opacity = Math.random() * 0.1
                                // Random opacity
                const opacity = Math.random() * 0.1 + 0.05;
                hexagon.style.opacity = opacity.toString();
                
                // Position
                hexagon.style.left = `${x}vw`;
                hexagon.style.top = `${y}vh`;
                
                // Add to body
                document.body.appendChild(hexagon);
            }
        }
        
        // Add floating particles
        function addFloatingParticles() {
            const count = 30;
            
            for (let i = 0; i < count; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // Random size between 2px and 6px
                const size = Math.random() * 4 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // Random position
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                
                // Random opacity
                const opacity = Math.random() * 0.3 + 0.1;
                particle.style.opacity = opacity.toString();
                
                // Position
                particle.style.left = `${x}vw`;
                particle.style.top = `${y}vh`;
                
                // Add to body
                document.body.appendChild(particle);
                
                // Animate particle
                gsap.to(particle, {
                    y: `+=${Math.random() * 20 - 10}vh`,
                    x: `+=${Math.random() * 20 - 10}vw`,
                    opacity: Math.random() * 0.3,
                    duration: Math.random() * 10 + 10,
                    ease: "none",
                    repeat: -1,
                    yoyo: true
                });
            }
        }
        
        // Add scanlines effect
        function addScanlines() {
            const count = 50;
            const container = document.createElement('div');
            container.className = 'fixed inset-0 pointer-events-none z-30 overflow-hidden opacity-10';
            
            for (let i = 0; i < count; i++) {
                const scanline = document.createElement('div');
                scanline.className = 'w-full h-px bg-cyber-green';
                
                // Position
                const y = (i / count) * 100;
                scanline.style.top = `${y}%`;
                
                // Add to container
                container.appendChild(scanline);
            }
            
            // Add to body
            document.body.appendChild(container);
        }
        
        // Add glitch effect
        function addGlitchEffect() {
            // Periodically add glitch effect to the screen
            setInterval(() => {
                if (Math.random() > 0.9) {
                    const glitch = document.createElement('div');
                    glitch.className = 'fixed inset-0 bg-cyber-pink opacity-5 z-50 pointer-events-none';
                    document.body.appendChild(glitch);
                    
                    // Remove after short duration
                    setTimeout(() => {
                        document.body.removeChild(glitch);
                    }, 100);
                }
            }, 2000);
        }
        
        // Initialize visual effects
        function initVisualEffects() {
            addBackgroundHexagons();
            addFloatingParticles();
            addScanlines();
            addGlitchEffect();
        }
        
        // Initialize high score display
        highScoreElement.textContent = highScore;
        
        // Initialize visual effects
        initVisualEffects();
        
        // Add ambient sound effects (optional)
        function initAudio() {
            // Background ambient sound
            const ambientSound = new Audio();
            ambientSound.src = 'https://assets.codepen.io/21542/Ambient-electronic-track.mp3'; // Replace with actual URL
            ambientSound.loop = true;
            ambientSound.volume = 0.2;
            
            // Food collection sound
            const collectSound = new Audio();
            collectSound.src = 'https://assets.codepen.io/21542/click.mp3'; // Replace with actual URL
            
            // Game over sound
            const gameOverSound = new Audio();
            gameOverSound.src = 'https://assets.codepen.io/21542/negative_beeps.mp3'; // Replace with actual URL
            
            // Play ambient sound on user interaction
            document.addEventListener('click', () => {
                ambientSound.play().catch(e => console.log('Audio play failed:', e));
            }, { once: true });
            
            return {
                playCollect: () => collectSound.play().catch(e => console.log('Audio play failed:', e)),
                playGameOver: () => gameOverSound.play().catch(e => console.log('Audio play failed:', e))
            };
        }
        
        // Initialize audio (uncomment to enable)
        // const audio = initAudio();
        
        // Add camera effects
        function initCameraEffects() {
            // Camera shake effect
            function shakeCamera(intensity = 1, duration = 0.5) {
                gsap.to(camera.position, {
                    x: `+=${Math.random() * 0.5 * intensity - 0.25 * intensity}`,
                    y: `+=${Math.random() * 0.5 * intensity - 0.25 * intensity}`,
                    z: `+=${Math.random() * 0.5 * intensity - 0.25 * intensity}`,
                    duration: 0.1,
                    repeat: Math.floor(duration / 0.1),
                    yoyo: true,
                    ease: "none",
                    onComplete: () => {
                        // Reset camera position
                        gsap.to(camera.position, {
                            x: 0,
                            y: 0,
                            z: 30,
                            duration: 0.2
                        });
                    }
                });
            }
            
            // Camera zoom effect
            function zoomCamera(targetZ, duration = 0.5) {
                gsap.to(camera.position, {
                    z: targetZ,
                    duration: duration,
                    ease: "power2.inOut"
                });
            }
            
            return {
                shake: shakeCamera,
                zoom: zoomCamera
            };
        }
        
        // Initialize camera effects
        const cameraEffects = initCameraEffects();
        
        // Add dynamic lighting effects
        function initLightingEffects() {
            // Create ambient light that changes color
            const ambientLight = new THREE.AmbientLight(0x05ffa1, 0.5);
            scene.add(ambientLight);
            
            // Animate ambient light color
            function animateAmbientLight() {
                const hue = (Date.now() * 0.0001) % 1;
                const color = new THREE.Color().setHSL(hue, 0.8, 0.5);
                ambientLight.color = color;
            }
            
            // Add to animation loop
            return {
                update: animateAmbientLight
            };
        }
        
        // Initialize lighting effects
        const lightingEffects = initLightingEffects();
        
        // Update animation loop to include effects
        function animate() {
            requestAnimationFrame(animate);
            
            // Update lighting effects
            lightingEffects.update();
            
            // Render scene
            renderer.render(scene, camera);
        }
        
        // Add 3D text for game over
        function create3DText(text, color, size, position) {
            const loader = new THREE.FontLoader();
            
            // Use a callback approach since FontLoader is asynchronous
            loader.load('https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', function(font) {
                const geometry = new THREE.TextGeometry(text, {
                    font: font,
                    size: size,
                    height: 0.2,
                    curveSegments: 12,
                    bevelEnabled: true,
                    bevelThickness: 0.03,
                    bevelSize: 0.02,
                    bevelOffset: 0,
                    bevelSegments: 5
                });
                
                const material = new THREE.MeshStandardMaterial({
                    color: color,
                    emissive: color,
                    emissiveIntensity: 0.5,
                    metalness: 0.8,
                    roughness: 0.2
                });
                
                const textMesh = new THREE.Mesh(geometry, material);
                
                // Center the text
                geometry.computeBoundingBox();
                const textWidth = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
                textMesh.position.set(position.x - textWidth / 2, position.y, position.z);
                
                scene.add(textMesh);
                
                // Animate the text
                gsap.from(textMesh.position, {
                    y: position.y + 5,
                    duration: 1.5,
                    ease: "bounce.out"
                });
                
                gsap.to(textMesh.rotation, {
                    y: Math.PI * 2,
                    duration: 10,
                    repeat: -1,
                    ease: "none"
                });
                
                return textMesh;
            });
        }
        
        // Enhanced game over function with 3D text
        function gameOver() {
            isGameOver = true;
            clearInterval(gameInterval);
            
            // Update high score
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('cyberSnakeHighScore', highScore);
            }
            
            // Update game over screen
            finalScoreElement.textContent = score;
            highScoreElement.textContent = highScore;
            finalLevelElement.textContent = level;
            itemsCollectedElement.textContent = itemsCollected;
            
            // Create 3D "GAME OVER" text
            create3DText("GAME OVER", 0xff2a6d, 3, { x: 0, y: 5, z: 0 });
            
            // Camera effects
            cameraEffects.shake(2, 1);
            cameraEffects.zoom(20, 2);
            
            // Play game over sound (if audio is enabled)
            // if (audio) audio.playGameOver();
            
            // Create explosion effect at snake head
            createParticles(snake[0].x, snake[0].y, snake[0].z, 0xff2a6d);
            
            // Show game over screen with delay
            setTimeout(() => {
                gameOverScreen.classList.remove('hidden');
            }, 2000);
        }
        
        // Enhanced eat food function with effects
        function eatFood() {
            // Increase score
            updateScore(score + 10);
            itemsCollected++;
            
            // Create particle effect at food position
            createParticles(food.x, food.y, food.z, 0xff2a6d);
            
            // Camera effects
            cameraEffects.shake(0.5, 0.3);
            
            // Play collect sound (if audio is enabled)
            // if (audio) audio.playCollect();
            
            // Remove old food
            scene.remove(food.mesh);
            scene.remove(food.light);
            
            // Create new food
            food = createFood();
            
            // Level up every 5 food items
            if (score % 50 === 0) {
                levelUp();
            }
            
            // Update energy value
            const energy = Math.min(100, 50 + itemsCollected * 5);
            energyValueElement.textContent = `${energy}%`;
        }
    </script>
</body>
</html>

Related Examples

Payment Cards

Author:
Shammi Nethupul

11 months ago

2.2k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

3 months ago

531
Product hunt showcase

Author:
Lukas Müller

2 years ago

12k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

2 months ago

662
Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

6 months ago

2.2k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

14.8k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

8 months ago

1.1k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

1 month ago

165
blog component
good blog

Author:
Uwera Dorcas

1 month ago

295
Apple Dock Navigation Bar

Author:
Cristian

6 months ago

961
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

1 month ago

208
cards
cards with background animation

Author:
Anonymous

1 year ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components