Google Snake Premium

by Sam1_THE_GREAT

HTML

<div class="container">
  <div class="ambient-bg"></div>
  <div class="grid-floor"></div>
  <div class="main-content" id="mainContent">
    <div class="title-section">
      <h1 class="glitch-title" data-text="SNAKE">SNAKE</h1>
      <p class="subtitle">PREMIUM EDITION</p>
    </div>
    <div class="menu-options">
      <div class="difficulty-selector">
        <span class="diff-label">DIFFICULTY</span>
        <div class="diff-buttons">
          <button class="diff-btn" data-speed="120">EASY</button>
          <button class="diff-btn active" data-speed="80">NORMAL</button>
          <button class="diff-btn" data-speed="50">HARD</button>
          <button class="diff-btn" data-speed="30">INSANE</button>
        </div>
      </div>
      <div class="mode-selector">
        <span class="mode-label">GAME MODE</span>
        <div class="mode-buttons">
          <button class="mode-btn active" data-mode="classic">CLASSIC</button>
          <button class="mode-btn" data-mode="noWalls">NO WALLS</button>
          <button class="mode-btn" data-mode="obstacles">OBSTACLES</button>
        </div>
      </div>
    </div>
    <button class="start-btn" id="startBtn">
      <span class="btn-bg"></span>
      <span class="btn-border"></span>
      <span class="btn-glow"></span>
      <span class="btn-text">PRESS START</span>
      <span class="btn-shine"></span>
    </button>
    <div class="hint-text">
      <span class="blink">></span> USE ARROW KEYS OR SWIPE <span class="blink">_</span>
    </div>
    <div class="stats-display">
      <div class="stat-item">
        <span class="stat-label">HIGH SCORE</span>
        <span class="stat-value" id="menuHighScore">0</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">GAMES PLAYED</span>
        <span class="stat-value" id="menuGamesPlayed">0</span>
      </div>
    </div>
  </div>
  <div class="game-world" id="gameWorld">
    <canvas...

CSS

:root {
            --primary: #00f5ff;
            --secondary: #ff00aa;
            --accent: #00ff88;
            --warning: #ffff00;
            --danger: #ff0066;
            --dark: #0a0a0f;
            --darker: #050510;
            --mouse-x: 50%;
            --mouse-y: 50%
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent
        }

        body {
            min-height: 100vh;
            background: var(--dark);
            font-family: 'Rajdhani', sans-serif;
            overflow: hidden;
            color: #fff;
            user-select: none
        }

        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .ambient-bg {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(0, 245, 255, .08) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255, 0, 170, .05) 0%, transparent 40%), radial-gradient(circle at 80% 20%, rgba(0, 255, 136, .05) 0%, transparent 40%);
            pointer-events: none
        }

        .grid-floor {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, rgba(0, 245, 255, .1) 0%, transparent 100%), repeating-linear-gradient(90deg, transparent, transparent 100px, rgba(0, 245, 255, .03) 100px, rgba(0, 245, 255, .03) 101px), repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(0, 245, 255, .03) 100px, rgba(0, 245, 255, .03) 101px);
            transform: perspective(500px) rotateX(60deg);
            transform-origin: bottom;
            pointer-events: none
        }

       ...

JavaScript

const CONFIG = Object.freeze({
  GRID: { SIZE: 20, PADDING: 40 },
  SNAKE: { INITIAL_LENGTH: 3, GROWTH_PER_FOOD: 1 },
  SPEED: {
    EASY: 120,
    NORMAL: 80,
    HARD: 50,
    INSANE: 30,
    SPEED_INCREASE_PER_LEVEL: 5,
    MIN_SPEED: 25
  },
  SCORING: {
    FOOD_BASE: 10,
    FOOD_MULTIPLIER: 1.5,
    LEVEL_BONUS: 100,
    SPECIAL_FOOD_MULTIPLIER: 5,
    SPEED_BONUS_MULTIPLIER: 2
  },
  LEVELS: { FOOD_PER_LEVEL: 5, MAX_LEVEL: 99 },
  FOOD: {
    NORMAL: { color: "#00ffff", points: 1, duration: null },
    BONUS: { color: "#ffff00", points: 3, duration: 5000 },
    SUPER: { color: "#ff00ff", points: 5, duration: 3000 },
    SPEED: { color: "#00ff00", points: 2, duration: 4000, effect: "slow" }
  },
  PARTICLES: {
    FOOD_COLLECT: 20,
    DEATH: 50,
    LEVEL_UP: 40,
    LIFETIME: 1000,
    MAX_COUNT: 300
  },
  STORAGE: {
    HIGH_SCORE: "snake_highScore",
    GAMES_PLAYED: "snake_gamesPlayed",
    SETTINGS: "snake_settings"
  },
  AUDIO: { ENABLED: true, VOLUME: 0.3 }
});

const Utils = {
  clamp: (v, min, max) => Math.max(min, Math.min(max, v)),
  random: (min, max) => Math.random() * (max - min) + min,
  randomInt: (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
  getElement: (id) => document.getElementById(id),
  toRgba(color, alpha = 1) {
    if (color.startsWith("#")) {
      const r = parseInt(color.slice(1, 3), 16),
        g = parseInt(color.slice(3, 5), 16),
        b = parseInt(color.slice(5, 7), 16);
      return `rgba(${r},${g},${b},${alpha})`;
    }
    return color.replace("rgb(", "rgba(").replace(")", `,${alpha})`);
  },
  storage: {
    get(key, def = null) {
      try {
        const v = localStorage.getItem(key);
        return v ? JSON.parse(v) : def;
      } catch {
        return def;
      }
    },
    set(key, val) {
      try {
        localStorage.setItem(key, JSON.stringify(val));
      } catch {}
    }
  },
  isMobile: () =>
   ...