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

245

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,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');
            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

trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

9 months ago

1.2k
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

2 months ago

323
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

7 months ago

1.3k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

1 month ago

581
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

5 months ago

2.1k
image

Author:
pablitodgb

1 month ago

112
App Hero Section With header

Author:
Abdul Baset Bappy

1 month ago

351
Invoice template

Author:
Shakti

2 years ago

27.2k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

847
Homepage event

Author:
Anonymous

1 month ago

164
responsive home page
the best home page

Author:
irahoza daniel

2 months ago

484
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

4 months ago

980

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components