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

antigravitygemini · 22 steps · 45s · 3 filessession 702da62c-ac0@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. Work ONLY in this exact directory: …/snake-antigravity

same matchpi · 18 steps codex · 73 steps claude-code · 55 steps antigravity · 22 steps

compare in arena

step 08 / 22

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 | A Premium Cyberpunk Arcade Experience</title>
    <meta name="description" content="Experience Neon Snake, a polished, high-fidelity retro arcade game with dynamic speed progression, crisp neon visuals, particles, synth sound effects, and responsive controls.">
    <!-- Google Fonts for retro/cyberpunk typography -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="stars-background"></div>
    <div class="scanlines"></div>
 
    <main class="game-container">
        <!-- Header -->
        <header class="game-header">
            <h1 class="glitch-text" data-text="NEON SNAKE">NEON SNAKE</h1>
            <p class="subtitle">RETRO-FUTURE ARCADE</p>
        </header>
 
        <!-- Scoreboard Panel -->
        <section class="scoreboard" aria-label="Game Stats">
            <div class="stat-card" id="score-card">
                <span class="stat-label">SCORE</span>
                <span class="stat-value" id="current-score">000</span>
            </div>
            <div class="stat-card" id="high-score-card">
                <span class="stat-label">HI-SCORE</span>
                <span class="stat-value" id="high-score">000</span>
            </div>
            <div class="stat-card" id="speed-card">
                <span class="stat-label">SPEED</span>
                <span class="stat-value" id="speed-level">1.0x</span>
            </div>
        </section>
 
        <!-- Game Canvas Wrapper -->
        <section class="canvas-wrapper" aria-label="Game Screen">
            <canvas id="game-canvas" width="500" height="500"></canvas>
 
            <!-- Start Game Overlay -->
            <div class="overlay active" id="start-overlay">
                <div class="overlay-content">
                    <h2 class="glow-cyan">READY PLAYER ONE</h2>
                    <p class="instruction-text">Guide the snake, eat the neon energy cores, and survive. Control the velocity using keys below.</p>
                    <button class="btn btn-primary" id="start-button">INITIALIZE GAME</button>
                </div>
            </div>
 
            <!-- Pause Overlay -->
            <div class="overlay" id="pause-overlay">
                <div class="overlay-content">
                    <h2 class="glow-yellow">SYSTEM PAUSED</h2>
                    <p class="instruction-text">Press <span class="key-badge">SPACE</span> or click below to resume simulation.</p>
                    <button class="btn btn-secondary" id="resume-button">RESUME ENGINE</button>
                </div>
            </div>
 
            <!-- Game Over Overlay -->
            <div class="overlay" id="gameover-overlay">
                <div class="overlay-content">
                    <h2 class="glow-red">SYSTEM FAIL</h2>
                    <p class="gameover-reason" id="gameover-reason">COLLISION DETECTED</p>
                    <div class="gameover-stats">
                        <div class="stat-row">
                            <span>FINAL SCORE</span>
                            <span class="highlight-text" id="final-score">0</span>
                        </div>
                        <div class="stat-row">
                            <span>ENERGY CORES</span>
                            <span class="highlight-text" id="final-cores">0</span>
                        </div>
                    </div>
                    <button class="btn btn-primary btn-glow-red" id="restart-button">REBOOT SYSTEM</button>
                </div>
            </div>
        </section>
 
        <!-- Controls / Help Panel -->
        <footer class="game-controls">
            <div class="control-group">
                <span class="control-title">NAVIGATION</span>
                <div class="control-keys">
                    <span class="key-badge">W A S D</span>
                    <span class="control-separator">/</span>
                    <span class="key-badge">▲ ◀ ▼ ▶</span>
                </div>
            </div>
            <div class="control-group">
                <span class="control-title">PAUSE ENGINE</span>
                <span class="key-badge">SPACE</span>
            </div>
            <div class="control-group">
                <span class="control-title">AUDIO</span>
                <button class="audio-toggle" id="audio-toggle-btn" aria-label="Toggle Sound Effects">
                    <span class="audio-icon" id="audio-icon">🔊</span> SOUNDS ON
                </button>
            </div>
        </footer>
    </main>
 
    <script src="game.js"></script>
</body>
</html>
 

109 lineshtml

Writes …/style.css

Files at this step

drag the rail to scrub

Discussion

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

#antigravity #css #game #gemini #graphics #html #javascript #quick

snake

← all sessions