Home
QQ-VVN
Snake Game tailwind

Snake Game tailwind

snake game

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

756

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Snake Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'neon-green': '#39FF14',
                        'neon-pink': '#FF10F0',
                        'neon-blue': '#00FFFF',
                        'neon-purple': '#9D00FF',
                        'cyber-black': '#0A0A0A',
                    },
                    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',
                        'blink': 'blink 1s step-end infinite',
                    },
                    keyframes: {
                        glow: {
                            '0%': { 'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #39FF14, 0 0 20px #39FF14' },
                            '100%': { 'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #39FF14, 0 0 40px #39FF14' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        blink: {
                            '0%, 100%': { opacity: '1' },
                            '50%': { opacity: '0' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        body {
            font-family: 'Press Start 2P', cursive;
            background-color: #0A0A0A;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(57, 255, 20, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
            overflow: hidden;
        }
        
        .game-grid {
            display: grid;
            position: relative;
            box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
        }
        
        .snake-cell {
            border-radius: 2px;
            box-shadow: 0 0 8px currentColor;
            z-index: 10;
        }
        
        .food-cell {
            border-radius: 50%;
            box-shadow: 0 0 15px currentColor;
            animation: pulse 1s infinite alternate;
            z-index: 5;
        }
        
        .grid-lines {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.1;
            background-image: 
                linear-gradient(to right, rgba(57, 255, 20, 0.5) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(57, 255, 20, 0.5) 1px, transparent 1px);
        }
        
        .control-btn {
            transition: all 0.2s ease;
        }
        
        .control-btn:active {
            transform: scale(0.9);
        }
        
        .game-over-overlay {
            background-color: rgba(10, 10, 10, 0.85);
            backdrop-filter: blur(4px);
        }
        
        .neon-text {
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #39FF14, 0 0 20px #39FF14;
        }
        
        .neon-border {
            box-shadow: 0 0 5px #39FF14, 0 0 10px #39FF14, inset 0 0 5px #39FF14;
        }
        
        @keyframes pulse {
            0% { transform: scale(0.95); opacity: 0.7; }
            100% { transform: scale(1.05); opacity: 1; }
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <div class="max-w-4xl w-full mx-auto">
        
        <div class="text-center mb-6">
            <h1 class="text-4xl md:text-6xl font-bold text-neon-green animate-glow mb-4">SNAKE</h1>
            <div class="flex justify-center items-center space-x-8">
                <div class="text-neon-blue">
                    <span class="text-sm">SCORE</span>
                    <div id="score" class="text-2xl md:text-3xl">0</div>
                </div>
                <div class="text-neon-pink">
                    <span class="text-sm">HIGH SCORE</span>
                    <div id="highScore" class="text-2xl md:text-3xl">0</div>
                </div>
            </div>
        </div>
        
        
        <div class="relative bg-cyber-black border-2 border-neon-green rounded-lg overflow-hidden neon-border">
            
            <div id="gameContainer" class="relative aspect-square w-full max-w-2xl mx-auto">
                <div id="gameGrid" class="game-grid w-full h-full"></div>
                <div class="grid-lines"></div>
                
                
                <div id="gameOverScreen" class="game-over-overlay absolute inset-0 flex flex-col items-center justify-center hidden">
                    <h2 class="text-4xl text-neon-pink animate-glow mb-6">GAME OVER</h2>
                    <div class="text-neon-blue mb-4">
                        <span>FINAL SCORE:</span>
                        <span id="finalScore" class="text-2xl ml-2">0</span>
                    </div>
                    <button id="restartBtn" class="bg-cyber-black text-neon-green border-2 border-neon-green px-6 py-3 rounded-lg neon-border hover:bg-neon-green hover:text-cyber-black transition-all duration-300 mt-4">
                        PLAY AGAIN
                    </button>
                </div>
                
                
                <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-cyber-black">
                    <h2 class="text-3xl text-neon-green animate-glow mb-8">PRESS START</h2>
                    <button id="startBtn" class="bg-cyber-black text-neon-pink border-2 border-neon-pink px-8 py-4 rounded-lg neon-border hover:bg-neon-pink hover:text-cyber-black transition-all duration-300">
                        START GAME
                    </button>
                    <p class="text-white text-sm mt-8">Use arrow keys or buttons below to play</p>
                </div>
            </div>
            
            
            <div class="p-4 flex flex-col items-center">
                
                <div class="grid grid-cols-3 gap-2 w-48 mb-4">
                    <div></div>
                    <button id="upBtn" class="control-btn bg-cyber-black text-neon-green border border-neon-green p-3 rounded-lg flex items-center justify-center">
                        ▲
                    </button>
                    <div></div>
                    <button id="leftBtn" class="control-btn bg-cyber-black text-neon-green border border-neon-green p-3 rounded-lg flex items-center justify-center">
                        ◄
                    </button>
                    <button id="downBtn" class="control-btn bg-cyber-black text-neon-green border border-neon-green p-3 rounded-lg flex items-center justify-center">
                        ▼
                    </button>
                    <button id="rightBtn" class="control-btn bg-cyber-black text-neon-green border border-neon-green p-3 rounded-lg flex items-center justify-center">
                        ►
                    </button>
                </div>
                
                
                <div class="flex space-x-4">
                    <button id="pauseBtn" class="bg-cyber-black text-neon-blue border border-neon-blue px-4 py-2 rounded-lg hover:bg-neon-blue hover:text-cyber-black transition-all duration-300">
                        PAUSE
                    </button>
                    <select id="difficultySelect" class="bg-cyber-black text-neon-purple border border-neon-purple px-4 py-2 rounded-lg focus:outline-none">
                        <option value="easy">EASY</option>
                        <option value="medium" selected>MEDIUM</option>
                        <option value="hard">HARD</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Game Configuration
        const config = {
            gridSize: 20,
            initialSpeed: 150,
            speedLevels: {
                easy: 200,
                medium: 150,
                hard: 100
            }
        };
        
        // Game State
        let snake = [];
        let food = {};
        let direction = 'right';
        let nextDirection = 'right';
        let score = 0;
        let highScore = localStorage.getItem('snakeHighScore') || 0;
        let gameInterval;
        let isPaused = false;
        let isGameOver = false;
        let isGameStarted = false;
        
        // DOM Elements
        const gameGrid = document.getElementById('gameGrid');
        const scoreElement = document.getElementById('score');
        const highScoreElement = document.getElementById('highScore');
        const finalScoreElement = document.getElementById('finalScore');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const startScreen = document.getElementById('startScreen');
        const startBtn = document.getElementById('startBtn');
        const restartBtn = document.getElementById('restartBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const difficultySelect = document.getElementById('difficultySelect');
        const upBtn = document.getElementById('upBtn');
        const downBtn = document.getElementById('downBtn');
        const leftBtn = document.getElementById('leftBtn');
        const rightBtn = document.getElementById('rightBtn');
        
        // Initialize High Score Display
        highScoreElement.textContent = highScore;
        
        // Setup Game Grid
        function setupGrid() {
            gameGrid.style.gridTemplateColumns = `repeat(${config.gridSize}, 1fr)`;
            gameGrid.style.gridTemplateRows = `repeat(${config.gridSize}, 1fr)`;
            gameGrid.innerHTML = '';
            
            // Create grid cells
            for (let i = 0; i < config.gridSize * config.gridSize; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                gameGrid.appendChild(cell);
            }
        }
        
        // Initialize Game
        function initGame() {
            // Reset game state
            snake = [
                { x: 10, y: 10 },
                { x: 9, y: 10 },
                { x: 8, y: 10 }
            ];
            direction = 'right';
            nextDirection = 'right';
            score = 0;
            isGameOver = false;
            isPaused = false;
            
            // Update score display
            scoreElement.textContent = score;
            
            // Clear the grid
            const cells = gameGrid.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('snake-cell', 'food-cell');
                cell.style.backgroundColor = '';
            });
            
            // Generate initial food
            generateFood();
            
            // Render initial state
            renderGame();
            
            // Start game loop
            const speed = config.speedLevels[difficultySelect.value];
            if (gameInterval) clearInterval(gameInterval);
            gameInterval = setInterval(gameLoop, speed);
            
            // Hide screens
            gameOverScreen.classList.add('hidden');
            startScreen.classList.add('hidden');
            
            // Update button text
            pauseBtn.textContent = 'PAUSE';
            
            isGameStarted = true;
        }
        
        // Game Loop
        function gameLoop() {
            if (isPaused || isGameOver) return;
            
            // Update direction
            direction = nextDirection;
            
            // Move snake
            moveSnake();
            
            // Check collisions
            if (checkCollision()) {
                gameOver();
                return;
            }
            
            // Check if food is eaten
            if (snake[0].x === food.x && snake[0].y === food.y) {
                eatFood();
            } else {
                // Remove tail if no food eaten
                snake.pop();
            }
            
            // Render game
            renderGame();
        }
        
        // Move Snake
        function moveSnake() {
            const head = { ...snake[0] };
            
            // Calculate new head position
            switch (direction) {
                case 'up':
                    head.y -= 1;
                    break;
                case 'down':
                    head.y += 1;
                    break;
                case 'left':
                    head.x -= 1;
                    break;
                case 'right':
                    head.x += 1;
                    break;
            }
            
            // Add new head to snake
            snake.unshift(head);
        }
        
        // Check Collision
        function checkCollision() {
            const head = snake[0];
            
            // Check wall collision
            if (
                head.x < 0 || 
                head.x >= config.gridSize || 
                head.y < 0 || 
                head.y >= config.gridSize
            ) {
                return true;
            }
            
            // Check self collision (skip the head)
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        // Generate Food
        function generateFood() {
            let validPosition = false;
            
            while (!validPosition) {
                food = {
                    x: Math.floor(Math.random() * config.gridSize),
                    y: Math.floor(Math.random() * config.gridSize)
                };
                
                // Check if food is not on snake
                validPosition = true;
                for (const segment of snake) {
                    if (segment.x === food.x && segment.y === food.y) {
                        validPosition = false;
                        break;
                    }
                }
            }
        }
        
        // Eat Food
        function eatFood() {
            // Increase score
            score += 10;
            scoreElement.textContent = score;
            
            // Update high score if needed
            if (score > highScore) {
                highScore = score;
                highScoreElement.textContent = highScore;
                localStorage.setItem('snakeHighScore', highScore);
            }
            
            // Generate new food
            generateFood();
            
            // Speed up slightly (optional)
            if (score % 50 === 0) {
                clearInterval(gameInterval);
                const currentSpeed = config.speedLevels[difficultySelect.value];
                const newSpeed = Math.max(currentSpeed * 0.9, 50);
                gameInterval = setInterval(gameLoop, newSpeed);
            }
        }
        
        // Render Game
        function renderGame() {
            // Clear previous state
            const cells = gameGrid.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('snake-cell', 'food-cell');
                cell.style.backgroundColor = '';
            });
            
            // Render snake
            snake.forEach((segment, index) => {
                if (segment.x >= 0 && segment.x < config.gridSize && segment.y >= 0 && segment.y < config.gridSize) {
                    const cellIndex = segment.y * config.gridSize + segment.x;
                    const cell = gameGrid.querySelector(`[data-index="${cellIndex}"]`);
                    
                    if (cell) {
                        cell.classList.add('snake-cell');
                        
                        // Head has different color
                        if (index === 0) {
                            cell.style.backgroundColor = '#39FF14'; // Neon green
                        } else {
                            // Gradient from green to blue for body
                            const hue = 120 - (index * 2) % 240;
                            cell.style.backgroundColor = `hsl(${hue}, 100%, 60%)`;
                        }
                    }
                }
            });
            
            // Render food
            const foodIndex = food.y * config.gridSize + food.x;
            const foodCell = gameGrid.querySelector(`[data-index="${foodIndex}"]`);
            if (foodCell) {
                foodCell.classList.add('food-cell');
                foodCell.style.backgroundColor = '#FF10F0'; // Neon pink
            }
        }
        
        // Game Over
        function gameOver() {
            isGameOver = true;
            clearInterval(gameInterval);
            
            // Update final score
            finalScoreElement.textContent = score;
            
            // Show game over screen
            gameOverScreen.classList.remove('hidden');
        }
        
        // Toggle Pause
        function togglePause() {
            if (!isGameStarted || isGameOver) return;
            
            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;
        }
        
        // Change Difficulty
        function changeDifficulty() {
            if (isGameStarted && !isGameOver) {
                clearInterval(gameInterval);
                const speed = config.speedLevels[difficultySelect.value];
                gameInterval = setInterval(gameLoop, speed);
            }
        }
        
        // Event Listeners
        startBtn.addEventListener('click', initGame);
        restartBtn.addEventListener('click', initGame);
        pauseBtn.addEventListener('click', togglePause);
        difficultySelect.addEventListener('change', changeDifficulty);
        
        // 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 (!isGameStarted) {
                if (e.key === 'Enter') initGame();
                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 the game grid
        setupGrid();
    </script>
</body>
</html>

</div>

Related Examples

Product cards
Product cards for eCommerce

Author:
ehmasuk

3 months ago

464
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

9 months ago

1.4k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.4k
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

751
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.9k
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Author:
Hamza Atig

1 month ago

154
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

10 months ago

713
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

8 months ago

809
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

7 months ago

410
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

10 months ago

1.2k
Verify OTP
Verify OTP

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

86

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components