random design

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

Other

Author QQ-VVN

Tailwind v3.4 1.2k 5

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

Payment success page example

Anonymous

1 year ago

2.3k
Question & Answer
questions and answers

Anonymous

3 years ago

9.3k
Image - Figure with figcaption design

Maxim

1 year ago

1.4k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.4k
Show credit card details

Manuela Bianka

3 years ago

13.2k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Kirsten F

1 year ago

1.5k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

789
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Anonymous

3 years ago

9.6k
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Mario Williams

1 year ago

850
Neon container

Anonymous

2 years ago

4.4k
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Vikas Kushwah

1 year ago

1.9k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2k