ULTIMATE SNAKE

(click to https://quantum-snake.netlify.app/
)ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid,find

Breadcrumb Image gallery Search Bar

Author Code Master(Mfuranziza Dusabe Hamza)

853

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate Snake Game</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Rajdhani', sans-serif;
            overflow: hidden;
            position: relative;
        }

/* Animated starfield background */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
        }

.star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

.star:nth-child(odd) { animation-delay: 1s; }
        .star:nth-child(3n) { animation-delay: 2s; }

@keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

/* Floating particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
        }

.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(0, 255, 255, 0.6);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }

@keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }

/* Main game container */
        .game-container {
            position: relative;
            z-index: 1;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 30px;
            border: 3px solid rgba(0, 255, 255, 0.4);
            box-shadow: 
                0 0 80px rgba(0, 255, 255, 0.3),
                inset 0 0 80px rgba(0, 255, 255, 0.1);
            animation: containerGlow 4s ease-in-out infinite alternate;
            max-width: 95vw;
            max-height: 95vh;
        }

@keyframes containerGlow {
            from { 
                border-color: rgba(0, 255, 255, 0.4);
                box-shadow: 0 0 80px rgba(0, 255, 255, 0.3), inset 0 0 80px rgba(0, 255, 255, 0.1);
            }
            to { 
                border-color: rgba(0, 255, 255, 0.8);
                box-shadow: 0 0 120px rgba(0, 255, 255, 0.5), inset 0 0 80px rgba(0, 255, 255, 0.2);
            }
        }

.game-title {
            font-family: 'Orbitron', monospace;
            font-size: 4rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00, #00ffff);
            background-size: 500% 500%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 4s ease-in-out infinite;
            text-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
            position: relative;
        }

.game-title::after {
            content: 'ULTIMATE SNAKE';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shine 3s infinite;
        }

@keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

@keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

/* Game mode selector */
        .game-modes {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

.mode-btn {
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 200, 0.3));
            border: 2px solid rgba(0, 255, 255, 0.5);
            padding: 10px 20px;
            border-radius: 15px;
            color: #00ffff;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Orbitron', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.mode-btn:hover, .mode-btn.active {
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.4), rgba(0, 200, 200, 0.5));
            border-color: #00ffff;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            transform: translateY(-2px);
        }

.game-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

.stat-card {
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid rgba(0, 255, 255, 0.3);
            border-radius: 20px;
            padding: 15px;
            text-align: center;
            backdrop-filter: blur(15px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            transition: transform 0.6s;
        }

.stat-card:hover {
            background: rgba(0, 255, 255, 0.15);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
        }

.stat-card:hover::before {
            transform: rotate(45deg) translate(50%, 50%);
        }

.stat-label {
            font-size: 0.9rem;
            color: #00ffff;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

.stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            font-family: 'Orbitron', monospace;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
        }

/* Enhanced speed controls */
        .controls-section {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
        }

.speed-controls, .size-controls {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

.control-label {
            color: #00ffff;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Orbitron', monospace;
        }

.control-btn {
            background: linear-gradient(45deg, #00ffff, #0088aa);
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: white;
            font-size: 1.4rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }

.control-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

.control-btn:hover::before {
            width: 100%;
            height: 100%;
        }

.control-btn:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.6);
            background: linear-gradient(45deg, #00cccc, #0099bb);
        }

.control-btn:active {
            transform: translateY(0) scale(0.95);
        }

.control-btn:disabled {
            background: rgba(100, 100, 100, 0.3);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

.control-display {
            background: rgba(0, 255, 255, 0.15);
            border: 2px solid rgba(0, 255, 255, 0.4);
            border-radius: 15px;
            padding: 10px 20px;
            color: white;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: 1.1rem;
            min-width: 80px;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

/* Game board with dynamic sizing */
        .board-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
        }

.game-board {
            border: 4px solid #00ffff;
            border-radius: 20px;
            background: linear-gradient(45deg, #001122 0%, #002244 50%, #001133 100%);
            box-shadow: 
                inset 0 0 120px rgba(0, 255, 255, 0.15),
                0 0 60px rgba(0, 255, 255, 0.4);
            position: relative;
            display: block;
        }

.game-board::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00, #00ffff);
            background-size: 500% 500%;
            border-radius: 24px;
            z-index: -1;
            animation: borderGlow 4s ease-in-out infinite;
        }

@keyframes borderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Power-up indicators */
        .powerups {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }

.powerup-indicator {
            background: rgba(255, 255, 0, 0.1);
            border: 2px solid rgba(255, 255, 0, 0.3);
            border-radius: 15px;
            padding: 8px 15px;
            color: #ffff00;
            font-weight: 600;
            font-size: 0.9rem;
            text-align: center;
            transition: all 0.3s ease;
        }

.powerup-indicator.active {
            background: rgba(255, 255, 0, 0.3);
            border-color: #ffff00;
            box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
            animation: powerupPulse 1s infinite;
        }

@keyframes powerupPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

/* Game status */
        .game-status {
            text-align: center;
            margin-bottom: 15px;
            padding: 12px;
            border-radius: 15px;
            background: rgba(0, 255, 0, 0.1);
            border: 2px solid rgba(0, 255, 0, 0.3);
            color: #00ff00;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Orbitron', monospace;
            transition: all 0.3s ease;
        }

.game-status.waiting {
            background: rgba(255, 255, 0, 0.1);
            border-color: rgba(255, 255, 0, 0.3);
            color: #ffff00;
        }

.game-status.paused {
            background: rgba(255, 165, 0, 0.1);
            border-color: rgba(255, 165, 0, 0.3);
            color: #ffa500;
        }

.controls {
            margin-top: 20px;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1rem;
            line-height: 1.8;
        }

.control-key {
            display: inline-block;
            background: rgba(0, 255, 255, 0.2);
            border: 1px solid rgba(0, 255, 255, 0.4);
            padding: 6px 12px;
            border-radius: 10px;
            margin: 3px;
            font-family: 'Orbitron', monospace;
            font-weight: 600;
            color: #00ffff;
            transition: all 0.3s ease;
        }

.control-key:hover {
            background: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }

/* Game Over Overlay */
        .game-over-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(15px);
        }

.game-over-card {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border: 4px solid #ff4444;
            border-radius: 25px;
            padding: 50px;
            text-align: center;
            box-shadow: 0 0 150px rgba(255, 68, 68, 0.6);
            animation: gameOverPulse 1.2s ease-in-out;
            position: relative;
            overflow: hidden;
        }

.game-over-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 68, 68, 0.1), transparent);
            animation: gameOverShine 2s infinite;
        }

@keyframes gameOverPulse {
            0% { transform: scale(0.8) rotate(-5deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

@keyframes gameOverShine {
            0% { transform: rotate(45deg) translate(-200%, -200%); }
            100% { transform: rotate(45deg) translate(200%, 200%); }
        }

.game-over-title {
            font-family: 'Orbitron', monospace;
            font-size: 3.5rem;
            color: #ff4444;
            font-weight: 900;
            text-shadow: 0 0 30px #ff4444;
            margin-bottom: 25px;
            animation: textFlicker 2s infinite;
            position: relative;
            z-index: 1;
        }

@keyframes textFlicker {
            0%, 100% { opacity: 1; text-shadow: 0 0 30px #ff4444; }
            50% { opacity: 0.8; text-shadow: 0 0 50px #ff4444, 0 0 80px #ff6666; }
        }

.final-stats {
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

.final-score {
            font-size: 1.6rem;
            color: white;
            margin-bottom: 10px;
            font-weight: 600;
            font-family: 'Orbitron', monospace;
        }

.restart-btn {
            background: linear-gradient(45deg, #ff4444, #cc3333);
            border: none;
            padding: 18px 35px;
            border-radius: 15px;
            color: white;
            font-size: 1.3rem;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.restart-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

.restart-btn:hover::before {
            width: 300%;
            height: 300%;
        }

.restart-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(255, 68, 68, 0.6);
            background: linear-gradient(45deg, #ff6666, #ff4444);
        }

/* Responsive design */
        @media (max-width: 1024px) {
            .game-title { font-size: 3rem; }
            .game-container { padding: 25px; }
            .controls-section { flex-direction: column; }
        }

@media (max-width: 768px) {
            .game-container { padding: 20px; margin: 10px; }
            .game-title { font-size: 2.5rem; }
            .game-stats { grid-template-columns: repeat(2, 1fr); }
            .game-modes { flex-wrap: wrap; }
            .mode-btn { padding: 8px 15px; font-size: 0.9rem; }
        }

@media (max-width: 480px) {
            .game-title { font-size: 2rem; }
            .controls { font-size: 0.9rem; }
            .game-stats { grid-template-columns: 1fr; }
            .stat-value { font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    
    <div class="stars" id="stars"></div>
    <div class="particles" id="particles"></div>
    
    <div class="game-container">
        <h1 class="game-title">ULTIMATE SNAKE</h1>
        
        
        <div class="game-modes">
            <button class="mode-btn active" onclick="setGameMode('classic')">Classic</button>
            <button class="mode-btn" onclick="setGameMode('survival')">Survival</button>
            <button class="mode-btn" onclick="setGameMode('speed')">Speed Run</button>
            <button class="mode-btn" onclick="setGameMode('giant')">Giant Mode</button>
        </div>
        
        <div class="game-stats">
            <div class="stat-card">
                <div class="stat-label">Score</div>
                <div class="stat-value" id="score">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">High Score</div>
                <div class="stat-value" id="highScore">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Length</div>
                <div class="stat-value" id="length">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Level</div>
                <div class="stat-value" id="level">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Time</div>
                <div class="stat-value" id="gameTime">0:00</div>
            </div>
        </div>

<div class="controls-section">
            <div class="speed-controls">
                <span class="control-label">Speed:</span>
                <button class="control-btn" id="decreaseSpeed" onclick="changeSpeed(-1)">−</button>
                <div class="control-display" id="speedDisplay">5</div>
                <button class="control-btn" id="increaseSpeed" onclick="changeSpeed(1)">+</button>
            </div>
            <div class="size-controls">
                <span class="control-label">Size:</span>
                <button class="control-btn" id="decreaseSize" onclick="changeBoardSize(-1)">−</button>
                <div class="control-display" id="sizeDisplay">M</div>
                <button class="control-btn" id="increaseSize" onclick="changeBoardSize(1)">+</button>
            </div>
        </div>

<div class="powerups">
            <div class="powerup-indicator" id="speedBoost">Speed Boost: OFF</div>
            <div class="powerup-indicator" id="scoreMultiplier">Score x1</div>
            <div class="powerup-indicator" id="invincible">Shield: OFF</div>
        </div>

<div class="game-status waiting" id="gameStatus">Press any arrow key or WASD to start</div>
        
        
        <div class="board-container">
            <canvas id="board" class="game-board"></canvas>
        </div>
        
        <div class="controls">
            <strong>Controls:</strong><br>
            <span class="control-key">↑</span> <span class="control-key">↓</span> <span class="control-key">←</span> <span class="control-key">→</span> or <span class="control-key">WASD</span> to move<br>
            <span class="control-key">SPACE</span> to pause/resume • <span class="control-key">R</span> to restart<br><br>
            
            <strong>Power-ups:</strong> Collect special items for temporary abilities!<br>
            <strong>🟡 Speed Boost</strong> • <strong>🟢 Score Multiplier</strong> • <strong>🔵 Invincibility Shield</strong> • <strong>🟣 Size Reducer</strong>
        </div>
    </div>

<div class="game-over-overlay" id="gameOverOverlay">
        <div class="game-over-card">
            <div class="game-over-title">GAME OVER</div>
            <div class="final-stats">
                <div class="final-score">Final Score: <span id="finalScore">0</span></div>
                <div class="final-score">Snake Length: <span id="finalLength">1</span></div>
                <div class="final-score">Level Reached: <span id="finalLevel">1</span></div>
                <div class="final-score">Time Played: <span id="finalTime">0:00</span></div>
                <div class="final-score">Game Mode: <span id="finalMode">Classic</span></div>
            </div>
            <button class="restart-btn" onclick="restartGame()">PLAY AGAIN</button>
        </div>
    </div>

// Snake variables
        let snakeX, snakeY;
        let speedX = 0, speedY = 0;
        let snakeBody = [];

// Game state
        let foodX, foodY;
        let powerupX, powerupY, powerupType = null, powerupTimer = 0;
        let gameOver = false;
        let gameStarted = false;
        let gamePaused = false;
        let gameMode = 'classic';
        
        // Stats
        let score = 0;
        let level = 1;
        let gameSpeed = 5;
        let highScore = 0;
        let gameTime = 0;
        let gameTimer;
        let gameInterval;
        
        // Power-up states
        let speedBoost = false, scoreMultiplier = 1, invincible = false;
        let powerupTimers = { speed: 0, score: 0, invincible: 0 };

// Game settings
        const MIN_SPEED = 1, MAX_SPEED = 10;
        const BASE_INTERVAL = 200;
        const POWERUP_DURATION = 5000; // 5 seconds

// Initialize
        function createBackground() {
            // Create stars
            const starsContainer = document.getElementById('stars');
            for (let i = 0; i < 150; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.width = Math.random() * 3 + 1 + 'px';
                star.style.height = star.style.width;
                star.style.animationDelay = Math.random() * 3 + 's';
                starsContainer.appendChild(star);
            }

// Create floating particles
            const particlesContainer = document.getElementById('particles');
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

function initializeBoard() {
            const size = boardSizes[currentSize];
            total_row = size.rows;
            total_col = size.cols;
            blockSize = size.blockSize;

board.height = total_row * blockSize;
            board.width = total_col * blockSize;
            
            // Center snake
            snakeX = Math.floor(total_col / 2) * blockSize;
            snakeY = Math.floor(total_row / 2) * blockSize;
        }

Related Examples

Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

847
gallary
html , css

Author:
Hacker Development

8 months ago

736
Animated Search Input
Expand on focus with smooth animation

Author:
Anonymous

1 year ago

2.4k
Glassmorphic Animated Searchabar
This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

Author:
Muhamad Rufaid kv

8 months ago

1.1k
Search form

Author:
Laurits

3 years ago

11.7k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

1 year ago

2k
Home

Author:
Ramkesh Gupta

1 month ago

77
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

1 year ago

2k
Breadcrumbs

Author:
Prajwal Hallale

3 years ago

8.5k
Search input

Author:
Leon Bachmann

3 years ago

10.9k
Breadcrumbs
Basic navigation trail with SVG icon

Author:
Anja Müller

2 years ago

8.4k
Default breadcrumb
Use the following breadcrumb example to show the hierarchical structure of pages

Author:
Md. Tofayel islam

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components