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

479

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

Sticky fullpage pages / slides

Author:
Laurits

2 years ago

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

Author:
Ranit Saha

9 months ago

1.6k
Payment success page example

Author:
Anonymous

5 months ago

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

Author:
Abdul Baset Bappy

7 months ago

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

Author:
Abdul Baset Bappy

7 months ago

839
blockquote

Author:
Freja Jensen

2 years ago

9.8k
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

9 months ago

829
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.5k
Concert ticket

Author:
Elijah Davis

2 years ago

13.2k
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

5 months ago

449
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

4 months ago

856
Apple Dock Navigation Bar

Author:
Cristian

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components