Claude Opus 5.5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snake</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden}
  body{
    background:radial-gradient(ellipse at top,#1b2440 0%,#0b0f1c 70%);
    color:#e8ecff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    user-select:none;
  }
  h1{font-size:clamp(20px,4vw,30px);letter-spacing:.25em;font-weight:800;
     background:linear-gradient(90deg,#7cf29c,#3ad1e8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .bar{display:flex;gap:12px}
  .pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;
        padding:6px 16px;text-align:center;min-width:100px}
  .pill small{display:block;font-size:11px;letter-spacing:.15em;opacity:.6;text-transform:uppercase}
  .pill b{font-size:22px;font-variant-numeric:tabular-nums}
  #wrap{position:relative;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 2px rgba(124,242,156,.25)}
  canvas{display:block;border-radius:14px}
  #overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
     gap:10px;text-align:center;border-radius:14px;pointer-events:none;transition:opacity .25s;padding:16px}
  #overlay.dim{background:rgba(8,11,22,.72);backdrop-filter:blur(2px)}
  #overlay h2{font-size:clamp(22px,5vw,38px);font-weight:800}
  #overlay p{opacity:.85;font-size:clamp(13px,2.5vw,16px)}
  .blink{animation:bl 1.2s infinite}
  @keyframes bl{50%{opacity:.35}}
  .hint{font-size:12px;opacity:.5;text-align:center;padding:0 10px}
  .tag{background:rgba(124,242,156,.15);color:#7cf29c;border-radius:8px;padding:4px 12px;font-weight:700;letter-spacing:.1em;font-size:13px}
</style>
</head>
<body>
<h1>SNAKE</h1>
<div class="bar">
  <div class="pill"><small>Score</small><b id="score">0</b></div>
  <div class="pill"><small>Best</small><b id="best">0</b></div>
</div>
<div id="wrap">
  <canvas id="c"></canvas>
  <div id="overlay"></div>
</div>
<div class="hint">Arrows / WASD to move · P to pause · Space / Enter to restart</div>
<script>
(() => {
const N = 20;
const cv = document.getElementById('c'), ctx = cv.getContext('2d');
const wrap = document.getElementById('wrap'), overlay = document.getElementById('overlay');
const scoreEl = document.getElementById('score'), bestEl = document.getElementById('best');
let size = 400, cell = 20;

function resize(){
  size = Math.floor(Math.max(200, Math.min(window.innerWidth - 32, window.innerHeight - 190, 620)));
  cell = size / N;
  const dpr = window.devicePixelRatio || 1;
  cv.width = size * dpr; cv.height = size * dpr;
  cv.style.width = size + 'px'; cv.style.height = size + 'px';
  ctx.setTransform(dpr,0,0,dpr,0,0);
}
window.addEventListener('resize', resize); resize();

const DIRS = {up:{x:0,y:-1},down:{x:0,y:1},left:{x:-1,y:0},right:{x:1,y:0}};
const KEYMAP = {ArrowUp:'up',KeyW:'up',ArrowDown:'down',KeyS:'down',ArrowLeft:'left',KeyA:'left',ArrowRight:'right',KeyD:'right'};

let snake, prev, dir, queue, food, score = 0, best = 0, state = 'demo', acc = 0, particles = [], deathTimer = 0, shake = 0;

function reset(){
  const c = Math.floor(N/2);
  snake = [{x:c,y:c},{x:c-1,y:c},{x:c-2,y:c}];
  prev = snake.map(s => ({...s}));
  dir = DIRS.right; queue = []; score = 0; acc = 0;
  updateScore(); placeFood();
}
function placeFood(){
  const free = [];
  for (let y=0;y<N;y++) for (let x=0;x<N;x++)
    if (!snake.some(s => s.x===x && s.y===y)) free.push({x,y});
  food = free.length ? free[Math.floor(Math.random()*free.length)] : null;
}
function updateScore(){
  scoreEl.textContent = score;
  if (state !== 'demo' && score > best) best = score;
  bestEl.textContent = best;
}
function tickMs(){ return Math.max(65, 125 - Math.floor(score/10)*2.5); }

function queueDir(d){
  const last = queue.length ? queue[queue.length-1] : dir;
  if ((d.x === -last.x && d.y === -last.y) || (d.x === last.x && d.y === last.y)) return;
  if (queue.length < 3) queue.push(d);
}

// ---------- AI ----------
function blocked(x,y,body){
  if (x<0||y<0||x>=N||y>=N) return true;
  for (let i=0;i<body.length-1;i++) if (body[i].x===x && body[i].y===y) return true;
  return false;
}
function flood(sx,sy,body){
  const seen = new Set([sx+','+sy]), st=[[sx,sy]]; let n=0;
  while (st.length && n < 400){
    const [x,y] = st.pop(); n++;
    for (const d of Object.values(DIRS)){
      const nx=x+d.x, ny=y+d.y, k=nx+','+ny;
      if (!seen.has(k) && !blocked(nx,ny,body)){ seen.add(k); st.push([nx,ny]); }
    }
  }
  return n;
}
function aiMove(){
  const h = snake[0];
  const opts = Object.values(DIRS).filter(d => !(d.x===-dir.x && d.y===-dir.y) && !blocked(h.x+d.x,h.y+d.y,snake));
  if (!opts.length) return;
  // BFS to food
  let first = null;
  if (food){
    const q=[[h.x,h.y,null]], seen=new Set([h.x+','+h.y]);
    while(q.length){
      const [x,y,f]=q.shift();
      if (x===food.x && y===food.y){ first=f; break; }
      for (const d of Object.values(DIRS)){
        const nx=x+d.x, ny=y+d.y, k=nx+','+ny;
        if (seen.has(k) || blocked(nx,ny,snake)) continue;
        if (f===null && d.x===-dir.x && d.y===-dir.y) continue;
        seen.add(k); q.push([nx,ny,f||d]);
      }
    }
  }
  if (first && flood(h.x+first.x,h.y+first.y,snake) >= snake.length){ dir = first; return; }
  let bestD = opts[0], bestA = -1;
  for (const d of opts){ const a = flood(h.x+d.x,h.y+d.y,snake); if (a>bestA){bestA=a;bestD=d;} }
  dir = bestD;
}

// ---------- step ----------
function step(){
  if (state === 'demo') aiMove();
  else if (queue.length) dir = queue.shift();
  const h = snake[0], nh = {x:h.x+dir.x, y:h.y+dir.y};
  const eating = food && nh.x===food.x && nh.y===food.y;
  const bodyCheck = eating ? snake : snake.slice(0,-1);
  if (nh.x<0||nh.y<0||nh.x>=N||nh.y>=N||bodyCheck.some(s=>s.x===nh.x&&s.y===nh.y)){
    die(); return;
  }
  prev = snake.map(s => ({...s}));
  snake.unshift(nh);
  if (eating){
    score += 10; updateScore(); burst(food.x, food.y); placeFood();
  } else snake.pop();
}
function die(){
  shake = 10;
  const h = snake[0];
  burst(h.x, h.y, '#ff6b7a', 30);
  prev = snake.map(s => ({...s}));
  if (state === 'demo'){ deathTimer = 900; state = 'demoDead'; }
  else { state = 'over'; updateScore(); showOverlay(); }
}
function burst(cx, cy, color, n=18){
  for (let i=0;i<n;i++){
    const a = Math.random()*Math.PI*2, sp = 1.5+Math.random()*4;
    particles.push({x:(cx+.5)*cell, y:(cy+.5)*cell, vx:Math.cos(a)*sp, vy:Math.sin(a)*sp,
      life:1, r:2+Math.random()*3, c: color || (Math.random()<.5?'#ffd166':'#ff7aa2')});
  }
}

// ---------- overlay ----------
function showOverlay(){
  overlay.className = '';
  if (state === 'demo' || state === 'demoDead'){
    overlay.className = '';
    overlay.innerHTML = `<span class="tag">DEMO</span><h2 style="text-shadow:0 2px 12px #000">Snake</h2>
      <p class="blink" style="text-shadow:0 2px 8px #000;font-weight:600">Click or press a key to start</p>`;
  } else if (state === 'paused'){
    overlay.className = 'dim';
    overlay.innerHTML = `<h2>Paused</h2><p>Press P to resume</p>`;
  } else if (state === 'over'){
    overlay.className = 'dim';
    overlay.innerHTML = `<h2 style="color:#ff6b7a">Game Over</h2><p>Score: <b>${score}</b> · Best: <b>${best}</b></p>
      <p class="blink">Press Space or Enter to restart</p>`;
  } else overlay.innerHTML = '';
}
function startPlaying(){ state='playing'; reset(); particles=[]; showOverlay(); }

document.addEventListener('keydown', e => {
  const d = KEYMAP[e.code];
  if (d || e.code==='Space') e.preventDefault();
  if (state === 'demo' || state === 'demoDead'){
    startPlaying(); if (d) queueDir(DIRS[d]); return;
  }
  if (state === 'over'){
    if (e.code==='Space' || e.code==='Enter' || e.code==='NumpadEnter') startPlaying();
    return;
  }
  if (e.code === 'KeyP'){
    state = state==='paused' ? 'playing' : 'paused'; showOverlay(); return;
  }
  if (state === 'playing'){
    if (d) queueDir(DIRS[d]);
    else if (e.code==='Space' || e.code==='Enter') startPlaying();
  }
});
wrap.addEventListener('click', () => {
  if (state==='demo'||state==='demoDead'||state==='over') startPlaying();
});
// touch swipe
let ts=null;
wrap.addEventListener('touchstart', e => { ts = e.touches[0]; }, {passive:true});
wrap.addEventListener('touchend', e => {
  if (!ts) return; const t = e.changedTouches[0], dx=t.clientX-ts.clientX, dy=t.clientY-ts.clientY; ts=null;
  if (Math.max(Math.abs(dx),Math.abs(dy)) < 20) return;
  if (state!=='playing') return;
  queueDir(Math.abs(dx)>Math.abs(dy) ? (dx>0?DIRS.right:DIRS.left) : (dy>0?DIRS.down:DIRS.up));
});

// ---------- render ----------
function lerp(a,b,t){ return a+(b-a)*t; }
function draw(t, time){
  ctx.save();
  if (shake > 0){ ctx.translate((Math.random()-.5)*shake,(Math.random()-.5)*shake); }
  // board
  for (let y=0;y<N;y++) for (let x=0;x<N;x++){
    ctx.fillStyle = (x+y)%2 ? '#141c33' : '#18213b';
    ctx.fillRect(x*cell,y*cell,cell+.5,cell+.5);
  }
  // food
  if (food){
    const fx=(food.x+.5)*cell, fy=(food.y+.5)*cell, pulse = 1+Math.sin(time/180)*.08;
    const g = ctx.createRadialGradient(fx,fy,0,fx,fy,cell);
    g.addColorStop(0,'rgba(255,90,120,.45)'); g.addColorStop(1,'rgba(255,90,120,0)');
    ctx.fillStyle=g; ctx.fillRect(fx-cell,fy-cell,cell*2,cell*2);
    ctx.fillStyle='#ff5a78';
    ctx.beginPath(); ctx.arc(fx,fy+cell*.04,cell*.34*pulse,0,Math.PI*2); ctx.fill();
    ctx.fillStyle='rgba(255,255,255,.55)';
    ctx.beginPath(); ctx.arc(fx-cell*.11,fy-cell*.08,cell*.08*pulse,0,Math.PI*2); ctx.fill();
    ctx.strokeStyle='#6bdc7a'; ctx.lineWidth=Math.max(1.5,cell*.08); ctx.lineCap='round';
    ctx.beginPath(); ctx.moveTo(fx,fy-cell*.28); ctx.quadraticCurveTo(fx+cell*.1,fy-cell*.45,fx+cell*.2,fy-cell*.42); ctx.stroke();
  }
  // snake points
  const pts = snake.map((s,i) => {
    const p = prev[i] || prev[prev.length-1];
    return {x:(lerp(p.x,s.x,t)+.5)*cell, y:(lerp(p.y,s.y,t)+.5)*cell};
  });
  const L = pts.length, dead = state==='over'||state==='demoDead';
  ctx.lineCap='round'; ctx.lineJoin='round';
  // shadow
  ctx.strokeStyle='rgba(0,0,0,.35)'; ctx.lineWidth=cell*.78;
  ctx.beginPath(); pts.forEach((p,i)=> i?ctx.lineTo(p.x+2,p.y+3):ctx.moveTo(p.x+2,p.y+3)); ctx.stroke();
  for (let i=L-1;i>0;i--){
    const k = i/(L-1);
    const w = cell*(0.8 - k*0.22);
    ctx.strokeStyle = dead ? `hsl(355,${60-k*20}%,${55-k*15}%)` : `hsl(${140+k*45},70%,${58-k*18}%)`;
    ctx.lineWidth = w;
    ctx.beginPath(); ctx.moveTo(pts[i].x,pts[i].y); ctx.lineTo(pts[i-1].x,pts[i-1].y); ctx.stroke();
  }
  // belly highlight
  ctx.strokeStyle='rgba(255,255,255,.12)'; ctx.lineWidth=cell*.18;
  ctx.beginPath(); pts.forEach((p,i)=> i?ctx.lineTo(p.x-cell*.08,p.y-cell*.1):ctx.moveTo(p.x-cell*.08,p.y-cell*.1)); ctx.stroke();
  // head
  const h = pts[0];
  ctx.fillStyle = dead ? '#ff6b7a' : '#8af5a5';
  ctx.beginPath(); ctx.arc(h.x,h.y,cell*.46,0,Math.PI*2); ctx.fill();
  const dx=dir.x, dy=dir.y, px=-dy, py=dx;
  for (const s of [-1,1]){
    const ex = h.x + dx*cell*.14 + px*s*cell*.2, ey = h.y + dy*cell*.14 + py*s*cell*.2;
    ctx.fillStyle='#fff'; ctx.beginPath(); ctx.arc(ex,ey,cell*.13,0,Math.PI*2); ctx.fill();
    ctx.fillStyle='#0b0f1c';
    if (dead){
      ctx.strokeStyle='#0b0f1c'; ctx.lineWidth=Math.max(1,cell*.05); const r=cell*.07;
      ctx.beginPath(); ctx.moveTo(ex-r,ey-r); ctx.lineTo(ex+r,ey+r); ctx.moveTo(ex+r,ey-r); ctx.lineTo(ex-r,ey+r); ctx.stroke();
    } else {
      ctx.beginPath(); ctx.arc(ex+dx*cell*.05,ey+dy*cell*.05,cell*.065,0,Math.PI*2); ctx.fill();
    }
  }
  // tongue
  if (!dead && Math.sin(time/150) > .3){
    const tx=h.x+dx*cell*.45, ty=h.y+dy*cell*.45;
    ctx.strokeStyle='#ff5a78'; ctx.lineWidth=Math.max(1,cell*.06);
    ctx.beginPath(); ctx.moveTo(tx,ty); ctx.lineTo(tx+dx*cell*.2,ty+dy*cell*.2);
    ctx.moveTo(tx+dx*cell*.2,ty+dy*cell*.2); ctx.lineTo(tx+dx*cell*.28+px*cell*.08,ty+dy*cell*.28+py*cell*.08);
    ctx.moveTo(tx+dx*cell*.2,ty+dy*cell*.2); ctx.lineTo(tx+dx*cell*.28-px*cell*.08,ty+dy*cell*.28-py*cell*.08);
    ctx.stroke();
  }
  // particles
  for (const p of particles){
    ctx.globalAlpha = Math.max(0,p.life);
    ctx.fillStyle = p.c;
    ctx.beginPath(); ctx.arc(p.x,p.y,p.r*p.life+.5,0,Math.PI*2); ctx.fill();
  }
  ctx.globalAlpha = 1;
  ctx.restore();
}

let last = performance.now();
function loop(now){
  const dt = Math.min(50, now - last); last = now;
  const running = state==='playing' || state==='demo';
  if (running){
    acc += dt;
    const ms = tickMs();
    while (acc >= ms && (state==='playing'||state==='demo')){ acc -= ms; step(); }
  }
  if (state==='demoDead'){
    deathTimer -= dt;
    if (deathTimer <= 0){ state='demo'; reset(); }
  }
  if (state!=='paused'){
    for (const p of particles){ p.x+=p.vx; p.y+=p.vy; p.vx*=.93; p.vy*=.93; p.life-=dt/600; }
    particles = particles.filter(p => p.life > 0);
    if (shake>0) shake = Math.max(0, shake - dt*.03);
  }
  const t = (state==='playing'||state==='demo') ? Math.min(1, acc / tickMs()) : 1;
  draw(t, now);
  requestAnimationFrame(loop);
}
reset(); showOverlay();
requestAnimationFrame(loop);
})();
</script>
</body>
</html>