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

293

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

masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

4 months ago

690
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

1 month ago

99
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

318
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1k
Testimonial that What Client Says

Author:
Abdul Baset Bappy

3 weeks ago

91
Verify OTP
verification code

Author:
gidy

1 month ago

149
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.5k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

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

Author:
Ahmed Malik

2 years ago

11.5k
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.8k
Heading

Author:
KULDEEP

2 weeks ago

205
Contact Page

Author:
Sedat Kumcu

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components