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 07 / 18

index.htmlchange 1/1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Neon Snake</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="shell">
    <section class="hero" aria-label="Game information">
      <div>
        <p class="eyebrow">Arcade Classic</p>
        <h1>Neon Snake</h1>
        <p class="subtitle">Collect pulse cores, dodge the walls, and keep your trail intact as the grid accelerates.</p>
      </div>
      <div class="status-card">
        <span class="status-dot" id="statusDot"></span>
        <span id="statusText">Ready</span>
      </div>
    </section>
 
    <section class="game-card">
      <div class="hud" aria-label="Scores and controls">
        <div class="score-box">
          <span>Score</span>
          <strong id="score">0</strong>
        </div>
        <div class="score-box high">
          <span>Best</span>
          <strong id="highScore">0</strong>
        </div>
        <button id="pauseButton" class="ghost-button" type="button">Pause</button>
      </div>
 
      <div class="canvas-wrap">
        <canvas id="gameCanvas" width="600" height="600" aria-label="Snake game board"></canvas>
        <div id="overlay" class="overlay show">
          <div class="overlay-panel">
            <p class="overline" id="overlayKicker">Ready?</p>
            <h2 id="overlayTitle">Enter the Grid</h2>
            <p id="overlayMessage">Use arrow keys or WASD to steer. Eat the glowing cores and survive the speed climb.</p>
            <button id="restartButton" type="button">Start Game</button>
          </div>
        </div>
      </div>
 
      <div class="controls">
        <div><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> or <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> move</div>
        <div><kbd>Space</kbd> pause</div>
      </div>
    </section>
  </main>
 
  <script src="game.js"></script>
</body>
</html>
 

58 lineshtml

Writes style.css

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