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

claude-codeclaude-fable-5 · 55 steps · 10m 16s · 3 filessession 0c9ba00c-6f2@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 03 / 55

index.htmlchange 1/1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Neon Snake</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="frame">
    <header class="top">
      <h1 class="logo">NEON<span>SNAKE</span></h1>
      <div class="hud">
        <div class="stat">
          <span class="stat-label">Score</span>
          <span class="stat-value" id="score">0</span>
        </div>
        <div class="stat">
          <span class="stat-label">Best</span>
          <span class="stat-value" id="best">0</span>
        </div>
        <div class="stat">
          <span class="stat-label">Speed</span>
          <span class="stat-value" id="speed">1.0&times;</span>
        </div>
      </div>
    </header>
 
    <div class="stage">
      <canvas id="game" width="504" height="504" aria-label="Snake game board"></canvas>
 
      <div class="overlay" id="overlay">
        <div class="panel" id="panel-start">
          <h2 class="panel-title">READY?</h2>
          <p class="panel-sub">Eat the orbs. Dodge the walls.<br>Don't bite yourself.</p>
          <button class="btn" id="btn-play" type="button">Play</button>
          <p class="panel-hint">or press any move key</p>
        </div>
 
        <div class="panel" id="panel-pause" hidden>
          <h2 class="panel-title">PAUSED</h2>
          <p class="panel-sub">The grid waits for no one.<br>Except you, right now.</p>
          <button class="btn" id="btn-resume" type="button">Resume</button>
          <p class="panel-hint"><kbd>space</kbd> to resume</p>
        </div>
 
        <div class="panel" id="panel-over" hidden>
          <h2 class="panel-title panel-title--over" id="over-title">GAME OVER</h2>
          <div class="badge" id="badge-best" hidden>&#9733; NEW BEST &#9733;</div>
          <p class="final">SCORE <span id="final-score">0</span></p>
          <button class="btn btn--hot" id="btn-restart" type="button">Restart</button>
          <p class="panel-hint"><kbd>space</kbd> to restart</p>
        </div>
      </div>
    </div>
 
    <footer class="hints">
      <span><kbd>&uarr;&darr;&larr;&rarr;</kbd> / <kbd>WASD</kbd> move</span>
      <span class="dot">&middot;</span>
      <span><kbd>space</kbd> pause</span>
      <span class="dot">&middot;</span>
      <span><kbd>M</kbd> sound <em id="mute-state">on</em></span>
    </footer>
  </main>
 
  <script src="game.js"></script>
</body>
</html>
 

69 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage.

#claude #claude-code #claude-fable-5 #css #game #graphics #html #javascript #medium #ui

snake

← all sessions