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 Acode 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 Acode Master(Mfuranziza Dusabe Hamza)

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:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

139
image gallery
image gallery [lightbox]

Author:
Anonymous

1 year ago

18.6k
Large search bar with icon

Author:
Prajwal Hallale

2 years ago

10.2k
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

10 months ago

2.6k
Search input

Author:
Leon Bachmann

2 years ago

10.2k
Simple search bar

Author:
TailwindFlex

2 years ago

11.4k
Basic breadcrumb

Author:
Ava Brown

2 years ago

9.1k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

3 weeks ago

86
Responsive search bar

Author:
Samuel Dawson

2 years ago

17k
Image Gallery with Alpine.Js

Author:
Maxim

4 months ago

284
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Acode Master(Mfuranziza Dusabe Hamza)

2 weeks ago

276
an off line game of catching afox
an off line game of catching afox

Author:
Bonimater

2 weeks ago

18

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components