Snake, with juice, built by Flint

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snake Juice</title>
<style>
  html, body {
    margin: 0;
    height: 100%;
    background: #05070d;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: system-ui, -apple-system, sans-serif;
  }
  #game {
    position: relative;
    width: min(92vw, 92vh, 520px);
  }
  canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #0a0f1c;
    border: 1px solid #1e2b45;
    border-radius: 12px;
  }
  #hud {
    position: absolute;
    top: 10px;
    left: 12px;
    color: #9fb4d8;
    font: 600 12px/1 system-ui, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
    text-shadow: 0 2px 8px #000;
  }
  #hud span { color: #eaf2ff; }
  #overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 6, 12, 0.72);
    backdrop-filter: blur(4px);
    color: #eaf2ff;
    text-align: center;
  }
  #overlay.visible { display: flex; }
  #overlay h1 { font-size: 40px; margin: 0 0 6px; letter-spacing: 6px; }
  #overlay p { font-size: 16px; color: #9fb4d8; margin: 6px 0; }
  #overlay .final { font-size: 64px; font-weight: 800; margin: 12px 0; color: #fff; }
  #overlay kbd {
    background: #1e2b45;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: inherit;
  }
</style>
</head>
<body>
<div id="game">
  <canvas id="game" width="384" height="384"></canvas>
  <div id="hud">SCORE <span id="score">0</span> • SPEED <span id="speed">1</span></div>
  <div id="overlay">
    <div>
      <h1 id="overlayTitle">SNAKE</h1>
      <p id="overlaySub">GAME OVER</p>
      <div class="final" id="finalScore">0</div>
      <p>Best: <span id="bestScore">0</span></p>
      <p>Press <kbd id="restartHint">SPACE</kbd> to restart</p>
    </div>
  </div>
</div>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const overlayTitle = document.getElementById('overlayTitle');
const overlaySub = document.getElementById('overlaySub');
const finalScoreEl = document.getElementById('finalScore');
const bestScoreEl = document.getElementById('bestScore');
const restartHint = document.getElementById('restartHint');
const scoreEl = document.getElementById('score');
const speedEl = document.getElementById('speed');

const COLS = 24;
const ROWS = 24;
const CELL = 16;
const W = COLS * CELL;
const H = ROWS * CELL;

let snake;
let dir;
let queue;
let food;
let score = 0;
let bestScore = 0;
let gameOver = false;
let paused = false;
let speedLevel = 1;
let interval = 150;
let acc = 0;
let last = 0;
let particles = [];
let pops = [];
let shake = 0;
let flash = 0;
let foodSeed = Math.random() * 10;

let audioCtx = null;

function ac() {
  if (!audioCtx) {
    const AC = window.AudioContext || window.webkitAudioContext;
    if (AC) audioCtx = new AC();
  }
  if (audioCtx && audioCtx.state === 'suspended') audioCtx.resume();
  return audioCtx;
}

function tone(freq, dur, type, vol, slideTo) {
  try {
    const audio = ac();
    const osc = audio.createOscillator();
    const gain = audio.createGain();
    osc.type = type;
    osc.frequency.setValueAtTime(freq, audio.currentTime);
    if (slideTo) osc.frequency.exponentialRampToValueAtTime(slideTo, audio.currentTime + dur);
    gain.gain.setValueAtTime(vol, audio.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.0001, audio.currentTime + dur);
    osc.connect(gain);
    gain.connect(audio.destination);
    osc.start();
    osc.stop(audio.currentTime + dur);
  } catch (e) {}
}

function playTick() {
  tone(700, 0.06, 'square', 0.04, 420);
}

function playEat() {
  tone(520, 0.06, 'triangle', 0.06, 780);
}

function playDie() {
  tone(200, 0.3, 'sawtooth', 0.05, 50);
}

function spawnFood() {
  const occupied = new Set();
  for (let s of snake) occupied.add(s.x + ',' + s.y);
  const free = [];
  for (let x = 0; x < COLS; x++) {
    for (let y = 0; y < ROWS; y++) {
      if (!occupied.has(x + ',' + y)) free.push({ x, y });
    }
  }
  if (free.length === 0) return { x: 0, y: 0 };
  return free[Math.floor(Math.random() * free.length)];
}

function resetGame() {
  snake = [
    { x: 12, y: 12 },
    { x: 11, y: 12 },
    { x: 10, y: 12 }
  ];
  dir = { x: 1, y: 0 };
  queue = [];
  score = 0;
  interval = 150;
  speedLevel = 1;
  acc = 0;
  last = performance.now();
  particles = [];
  pops = [];
  shake = 0;
  flash = 0;
  gameOver = false;
  paused = false;
}

function eatFood() {
  score++;
  playEat();
  burst(food.x, food.y);
  addPop(food.x, food.y, '+1');
  food = spawnFood();
  interval = Math.max(70, interval - 5);
  speedLevel = Math.min(10, speedLevel + 1);
  playTick();
}

function die() {
  gameOver = true;
  paused = false;
  showGameOver();
  bestScore = Math.max(bestScore, score);
  shake = 12;
  flash = 0.9;
  playDie();
}

function restartGame() {
  resetGame();
  hideOverlay();
}

function togglePause() {
  if (gameOver) return;
  paused = !paused;
  if (paused) showPause();
  else hideOverlay();
}

function showGameOver() {
  overlay.classList.add('visible');
  overlayTitle.textContent = 'SNAKE';
  overlaySub.textContent = 'GAME OVER';
  finalScoreEl.textContent = score;
  bestScoreEl.textContent = bestScore;
  restartHint.textContent = 'SPACE';
}

function showPause() {
  overlay.classList.add('visible');
  overlayTitle.textContent = 'SNAKE';
  overlaySub.textContent = 'PAUSED';
  finalScoreEl.textContent = score;
  bestScoreEl.textContent = bestScore;
  restartHint.textContent = 'P';
}

function hideOverlay() {
  overlay.classList.remove('visible');
}

function move() {
  while (queue.length) {
    const next = queue.shift();
    if ((next.x === -dir.x && next.y === -dir.y) || (next.x === dir.x && next.y === dir.y)) {
      continue;
    }
    dir = next;
    break;
  }

  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
  const willEat = food && head.x === food.x && head.y === food.y;
  const body = willEat ? snake : snake.slice(0, -1);
  const hitWall = head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS;
  const hitSelf = body.some(s => s.x === head.x && s.y === head.y);

  if (hitWall || hitSelf) {
    die();
    return;
  }

  snake.unshift(head);
  if (willEat) {
    eatFood();
  } else {
    snake.pop();
  }
}

function burst(x, y) {
  const colors = ['#fb7185', '#fbbf24', '#f87171', '#ffffff'];
  for (let i = 0; i < 14; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 40 + Math.random() * 140;
    particles.push({
      x,
      y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 0.5 + Math.random() * 0.3,
      maxLife: 0.8,
      size: 2 + Math.random() * 2.5,
      color: colors[Math.floor(Math.random() * colors.length)]
    });
  }
}

function addPop(x, y, text) {
  pops.push({ x, y, text, life: 0.8 });
}

function drawFood(t) {
  const pulse = 1 + Math.sin(t * 3 + foodSeed) * 0.15;
  const r = CELL * 0.24 * pulse;
  ctx.save();
  ctx.shadowColor = '#fb7185';
  ctx.shadowBlur = 12;
  ctx.fillStyle = '#fb7185';
  ctx.beginPath();
  ctx.arc(food.x * CELL + CELL / 2, food.y * CELL + CELL / 2, r, 0, Math.PI * 2);
  ctx.fill();
  ctx.shadowBlur = 0;
  ctx.fillStyle = '#fecdd3';
  ctx.beginPath();
  ctx.arc(food.x * CELL + CELL / 2, food.y * CELL + CELL / 2, r * 0.5, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
}

function drawSnake(currentDir) {
  const pts = snake;
  ctx.lineWidth = CELL * 0.72;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  ctx.strokeStyle = '#34d399';
  ctx.beginPath();
  for (let i = pts.length - 1; i >= 0; i--) {
    const p = pts[i];
    const cx = p.x * CELL + CELL / 2;
    const cy = p.y * CELL + CELL / 2;
    if (i === pts.length - 1) ctx.moveTo(cx, cy);
    else ctx.lineTo(cx, cy);
  }
  ctx.stroke();

  const head = pts[0];
  const hx = head.x * CELL + CELL / 2;
  const hy = head.y * CELL + CELL / 2;
  const angle = Math.atan2(currentDir.y, currentDir.x);
  ctx.save();
  ctx.translate(hx + currentDir.x * CELL * 0.05, hy + currentDir.y * CELL * 0.05);
  ctx.rotate(angle);
  const r = CELL * 0.34;
  ctx.fillStyle = '#bbf7d0';
  ctx.beginPath();
  ctx.arc(0, 0, r, 0, Math.PI * 2);
  ctx.fill();

  const ex = r * 0.28;
  const ey = r * 0.36;
  ctx.fillStyle = '#ffffff';
  ctx.beginPath();
  ctx.arc(ex, ey, r * 0.15, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(ex, -ey, r * 0.15, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = '#052e16';
  ctx.beginPath();
  ctx.arc(ex + currentDir.x * r * 0.06, ey, r * 0.08, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(ex + currentDir.x * r * 0.06, -ey, r * 0.08, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
}

function drawParticles() {
  for (let p of particles) {
    const a = Math.max(0, Math.min(1, p.life / p.maxLife));
    ctx.globalAlpha = a;
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x * CELL + CELL / 2, p.y * CELL + CELL / 2, p.size * (0.6 + 0.4 * a), 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;
}

function drawPops() {
  for (let p of pops) {
    const a = Math.max(0, Math.min(1, p.life / 0.8));
    ctx.save();
    ctx.globalAlpha = a;
    ctx.font = '700 14px system-ui, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillStyle = '#fde047';
    ctx.fillText(p.text, p.x * CELL + CELL / 2, p.y * CELL - 6 - (0.8 - p.life) * 30);
    ctx.restore();
  }
}

function draw() {
  ctx.fillStyle = '#070b14';
  ctx.fillRect(0, 0, W, H);

  ctx.strokeStyle = 'rgba(148, 163, 184, 0.07)';
  ctx.lineWidth = 1;
  ctx.beginPath();
  for (let x = 1; x < COLS; x++) {
    ctx.moveTo(x * CELL, 0);
    ctx.lineTo(x * CELL, H);
  }
  for (let y = 1; y < ROWS; y++) {
    ctx.moveTo(0, y * CELL);
    ctx.lineTo(W, y * CELL);
  }
  ctx.stroke();

  ctx.save();
  if (shake > 0) {
    const s = shake;
    ctx.translate((Math.random() * 2 - 1) * s, (Math.random() * 2 - 1) * s);
  }
  drawFood(performance.now() / 1000);
  drawSnake(dir);
  drawParticles();
  drawPops();
  ctx.restore();

  if (flash > 0) {
    ctx.fillStyle = `rgba(255, 255, 255, ${flash * 0.18})`;
    ctx.fillRect(0, 0, W, H);
  }
}

function frame(now) {
  const dt = Math.min(0.25, (now - last) / 1000);
  last = now;

  if (!gameOver && !paused) {
    acc += dt;
    while (acc >= interval) {
      acc -= interval;
      move();
      if (gameOver) break;
    }
  }

  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.life -= dt;
    p.x += p.vx * dt;
    p.y += p.vy * dt;
    if (p.life <= 0) particles.splice(i, 1);
  }

  for (let i = pops.length - 1; i >= 0; i--) {
    const p = pops[i];
    p.life -= dt;
    p.y -= 20 * dt;
    if (p.life <= 0) pops.splice(i, 1);
  }

  shake = Math.max(0, shake - dt * 30);
  flash = Math.max(0, flash - dt * 2);

  draw();
  requestAnimationFrame(frame);
}

const KEY_DIRS = {
  ArrowUp: { x: 0, y: -1 },
  KeyW: { x: 0, y: -1 },
  ArrowDown: { x: 0, y: 1 },
  KeyS: { x: 0, y: 1 },
  ArrowLeft: { x: -1, y: 0 },
  KeyA: { x: -1, y: 0 },
  ArrowRight: { x: 1, y: 0 },
  KeyD: { x: 1, y: 0 }
};

window.addEventListener('keydown', e => {
  const d = KEY_DIRS[e.code];
  if (d) {
    e.preventDefault();
    if (!e.repeat) handleDir(d);
  } else if (e.code === 'KeyP') {
    togglePause();
  } else if (e.code === 'Space') {
    e.preventDefault();
    if (gameOver) restartGame();
    else if (paused) togglePause();
  }
});

function handleDir(d) {
  if (gameOver || paused) return;
  if (queue.length >= 3) return;
  const lastDir = queue.length ? queue[queue.length - 1] : dir;
  if (d.x === lastDir.x && d.y === lastDir.y) return;
  queue.push({ x: d.x, y: d.y });
}

resetGame();
hideOverlay();
requestAnimationFrame(frame);
</script>
</body>
</html>