Build a Snake game as a polished single-page web app in this directory: index.html, sty…

pigpt-5.5 · 18 steps · 2m 23s · 3 filessession 811c7405-5b3@agentsage
Build a Snake game as a polished single-page web app in this directory: index.html, style.css, game.js (vanilla JS, no deps). Canvas grid; snake grows on eating food; dies on wall or self collision; live score and a high score persisted in localStorage; speed ramps up as the score climbs; arrow keys AND wasd; spacebar to pause; a game-over overlay with a restart button; and a sharp dark neon theme. Make it genuinely nice.
same matchpi · 18 steps codex · 73 steps claude-code · 55 steps antigravity · 22 steps
compare in arena
step 14 / 18
game.jschange 1/2
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
 
const scoreEl = document.getElementById('score');
const highScoreEl = document.getElementById('highScore');
const pauseButton = document.getElementById('pauseButton');
const restartButton = document.getElementById('restartButton');
const overlay = document.getElementById('overlay');
const overlayKicker = document.getElementById('overlayKicker');
const overlayTitle = document.getElementById('overlayTitle');
const overlayMessage = document.getElementById('overlayMessage');
const statusDot = document.getElementById('statusDot');
const statusText = document.getElementById('statusText');
 
const GRID_SIZE = 24;
const CELL_SIZE = canvas.width / GRID_SIZE;
const START_DELAY = 140;
const MIN_DELAY = 56;
const SPEED_STEP = 4;
const HIGH_SCORE_KEY = 'neonSnakeHighScore';
 
let snake;
let food;
let direction;
let queuedDirection;
let score;
let highScore = Number(localStorage.getItem(HIGH_SCORE_KEY)) || 0;
let gameTimer = null;
let running = false;
let paused = false;
let gameOver = false;
let hueShift = 0;
 
highScoreEl.textContent = highScore;
 
function resetGame() {
  const center = Math.floor(GRID_SIZE / 2);
  snake = [
    { x: center, y: center },
    { x: center - 1, y: center },
    { x: center - 2, y: center },
  ];
  direction = { x: 1, y: 0 };
  queuedDirection = { x: 1, y: 0 };
  score = 0;
  food = createFood();
  gameOver = false;
  paused = false;
  running = true;
  updateScore();
  setStatus('Live', 'live');
  hideOverlay();
  scheduleTick();
  draw();
}
 
function scheduleTick() {
  clearTimeout(gameTimer);
  if (!running || paused || gameOver) return;
  gameTimer = setTimeout(() => {
    update();
    draw();
    scheduleTick();
  }, currentDelay());
}
 
function currentDelay() {
  return Math.max(MIN_DELAY, START_DELAY - Math.floor(score / SPEED_STEP) * 10);
}
 
function update() {
  direction = queuedDirection;
  const head = snake[0];
  const nextHead = { x: head.x + direction.x, y: head.y + direction.y };
 
  if (hitsWall(nextHead) || hitsSelf(nextHead)) {
    endGame();
    return;
  }
 
  snake.unshift(nextHead);
 
  if (nextHead.x === food.x && nextHead.y === food.y) {
    score += 1;
    updateScore();
    food = createFood();
  } else {
    snake.pop();
  }
}
 
function hitsWall(cell) {
  return cell.x < 0 || cell.x >= GRID_SIZE || cell.y < 0 || cell.y >= GRID_SIZE;
}
 
function hitsSelf(cell) {
  return snake.some(segment => segment.x === cell.x && segment.y === cell.y);
}
 
function createFood() {
  let candidate;
  do {
    candidate = {
      x: Math.floor(Math.random() * GRID_SIZE),
      y: Math.floor(Math.random() * GRID_SIZE),
    };
  } while (snake?.some(segment => segment.x === candidate.x && segment.y === candidate.y));
  return candidate;
}
 
function updateScore() {
  scoreEl.textContent = score;
  if (score > highScore) {
    highScore = score;
    localStorage.setItem(HIGH_SCORE_KEY, highScore);
    highScoreEl.textContent = highScore;
  }
}
 
function endGame() {
  running = false;
  gameOver = true;
  clearTimeout(gameTimer);
  setStatus('Signal lost', 'dead');
  showOverlay('Game Over', 'Run Terminated', `Final score: ${score}. ${score >= highScore && score > 0 ? 'New personal best!' : 'Hit restart for another run.'}`, 'Restart');
}
 
function togglePause() {
  if (gameOver || !running) return;
  paused = !paused;
  pauseButton.textContent = paused ? 'Resume' : 'Pause';
  if (paused) {
    clearTimeout(gameTimer);
    setStatus('Paused', 'paused');
    showOverlay('Paused', 'Grid Suspended', 'Press Space or Resume to continue the run.', 'Resume');
  } else {
    setStatus('Live', 'live');
    hideOverlay();
    scheduleTick();
  }
}
 
function showOverlay(kicker, title, message, buttonText) {
  overlayKicker.textContent = kicker;
  overlayTitle.textContent = title;
  overlayMessage.textContent = message;
  restartButton.textContent = buttonText;
  overlay.classList.add('show');
}
 
function hideOverlay() {
  pauseButton.textContent = 'Pause';
  overlay.classList.remove('show');
}
 
function setStatus(text, state) {
  statusText.textContent = text;
  statusDot.className = 'status-dot';
  if (state === 'paused') statusDot.classList.add('paused');
  if (state === 'dead') statusDot.classList.add('dead');
}
 
function setDirection(next) {
  if (!running || paused || gameOver) return;
  const reversing = next.x + direction.x === 0 && next.y + direction.y === 0;
  if (!reversing) queuedDirection = next;
}
 
function draw() {
  hueShift += 0.012;
  drawBoard();
  drawFood();
  drawSnake();
}
 
function drawBoard() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
  const gradient = ctx.createRadialGradient(300, 260, 60, 300, 300, 430);
  gradient.addColorStop(0, '#0b1d38');
  gradient.addColorStop(1, '#050914');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
  ctx.save();
  ctx.strokeStyle = 'rgba(40, 247, 255, 0.065)';
  ctx.lineWidth = 1;
  for (let i = 0; i <= GRID_SIZE; i++) {
    const pos = i * CELL_SIZE + 0.5;
    ctx.beginPath();
    ctx.moveTo(pos, 0);
    ctx.lineTo(pos, canvas.height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, pos);
    ctx.lineTo(canvas.width, pos);
    ctx.stroke();
  }
  ctx.restore();
 
  ctx.strokeStyle = 'rgba(255, 61, 242, 0.22)';
  ctx.lineWidth = 8;
  ctx.strokeRect(4, 4, canvas.width - 8, canvas.height - 8);
}
 
function drawSnake() {
  snake.forEach((segment, index) => {
    const inset = index === 0 ? 3 : 4;
    const x = segment.x * CELL_SIZE + inset;
    const y = segment.y * CELL_SIZE + inset;
    const size = CELL_SIZE - inset * 2;
    const intensity = 1 - index / Math.max(snake.length, 1);
 
    ctx.save();
    ctx.shadowBlur = index === 0 ? 24 : 14;
    ctx.shadowColor = index === 0 ? '#28f7ff' : '#5cff9d';
    const grad = ctx.createLinearGradient(x, y, x + size, y + size);
    grad.addColorStop(0, index === 0 ? '#f3ffff' : `rgba(92, 255, 157, ${0.55 + intensity * 0.45})`);
    grad.addColorStop(1, index === 0 ? '#28f7ff' : `rgba(40, 247, 255, ${0.25 + intensity * 0.55})`);
    ctx.fillStyle = grad;
    roundRect(x, y, size, size, index === 0 ? 8 : 7);
    ctx.fill();
 
    if (index === 0) {
      drawEyes(segment);
    }
    ctx.restore();
  });
}
 
function drawEyes(head) {
  const cx = head.x * CELL_SIZE;
  const cy = head.y * CELL_SIZE;
  const eyeOffset = CELL_SIZE * 0.28;
  const forwardX = direction.x * CELL_SIZE * 0.12;
  const forwardY = direction.y * CELL_SIZE * 0.12;
  const eyes = direction.x !== 0
    ? [{ x: CELL_SIZE / 2 + forwardX, y: eyeOffset }, { x: CELL_SIZE / 2 + forwardX, y: CELL_SIZE - eyeOffset }]
    : [{ x: eyeOffset, y: CELL_SIZE / 2 + forwardY }, { x: CELL_SIZE - eyeOffset, y: CELL_SIZE / 2 + forwardY }];
 
  ctx.fillStyle = '#031015';
  eyes.forEach(eye => {
    ctx.beginPath();
    ctx.arc(cx + eye.x, cy + eye.y, 2.5, 0, Math.PI * 2);
    ctx.fill();
  });
}
 
function drawFood() {
  const cx = food.x * CELL_SIZE + CELL_SIZE / 2;
  const cy = food.y * CELL_SIZE + CELL_SIZE / 2;
  const pulse = Math.sin(hueShift * 8) * 2;
 
  ctx.save();
  ctx.shadowBlur = 28;
  ctx.shadowColor = '#ff3df2';
  const grad = ctx.createRadialGradient(cx - 4, cy - 5, 2, cx, cy, CELL_SIZE / 2);
  grad.addColorStop(0, '#ffffff');
  grad.addColorStop(0.35, '#ff8bfa');
  grad.addColorStop(1, '#ff3df2');
  ctx.fillStyle = grad;
  ctx.beginPath();
  ctx.arc(cx, cy, CELL_SIZE * 0.32 + pulse, 0, Math.PI * 2);
  ctx.fill();
  ctx.restore();
}
 
function roundRect(x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.arcTo(x + width, y, x + width, y + height, radius);
  ctx.arcTo(x + width, y + height, x, y + height, radius);
  ctx.arcTo(x, y + height, x, y, radius);
  ctx.arcTo(x, y, x + width, y, radius);
  ctx.closePath();
}
 
const keyMap = {
  ArrowUp: { x: 0, y: -1 },
  ArrowDown: { x: 0, y: 1 },
  ArrowLeft: { x: -1, y: 0 },
  ArrowRight: { x: 1, y: 0 },
  w: { x: 0, y: -1 },
  s: { x: 0, y: 1 },
  a: { x: -1, y: 0 },
  d: { x: 1, y: 0 },
};
 
document.addEventListener('keydown', (event) => {
  const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
 
  if (key === ' ') {
    event.preventDefault();
    togglePause();
    return;
  }
 
  if (keyMap[key]) {
    event.preventDefault();
    setDirection(keyMap[key]);
  }
});
 
pauseButton.addEventListener('click', togglePause);
restartButton.addEventListener('click', () => {
  if (paused && running) {
    togglePause();
  } else {
    resetGame();
  }
});
 
// Paint the attract screen immediately.
snake = [
  { x: 12, y: 12 },
  { x: 11, y: 12 },
  { x: 10, y: 12 },
  { x: 9, y: 12 },
];
direction = { x: 1, y: 0 };
queuedDirection = direction;
food = { x: 16, y: 12 };
score = 0;
draw();
 
325 linesjs
Edits game.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @agentsage.
#css #game #gpt #gpt-5.5 #graphics #html #javascript #performance #pi #quick #ui
snake
← all sessions