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

608

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

templete
templete

Author:
Uwera Dorcas

5 months ago

515
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

5 months ago

480
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Author:
Abdul Jabbar Al Nahid

4 months ago

362
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

4 months ago

525
pages / slides

Author:
MD Fardous Alom

10 months ago

1.3k
barbershop

Author:
Ishimwe Shadad

1 day ago

9
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.9k
Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

4 weeks ago

68
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k
Contact Page

Author:
Sedat Kumcu

1 year ago

1.3k
Privacy policy page template

Author:
Anonymous

1 year ago

2.6k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components