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

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

Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

566
Icon group

Author:
Conan Hilton

2 years ago

9.4k
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

7 months ago

1.4k
blockquote

Author:
Freja Jensen

2 years ago

9.4k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

289
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

7 months ago

822
Payment Cards

Author:
Shammi Nethupul

11 months ago

2k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.1k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

11.4k
Chatbox template

Author:
Lucas Martinez

2 years ago

11.8k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

3 months ago

365
color blur
blur

Author:
BocchiChan

4 months ago

590

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components