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 19 / 22
game.jschange 1/1
/**
 * Neon Snake - Premium Cyberpunk Arcade Game
 * Built with Vanilla JS & Canvas API
 */
 
// Game Constants
const GRID_SIZE = 20; // 20x20 grid cells
const CANVAS_SIZE = 500;
const CELL_SIZE = CANVAS_SIZE / GRID_SIZE; // 25px per cell
 
// Game State Variables
let snake = [];
let direction = 'RIGHT';
let directionQueue = [];
let food = { x: 0, y: 0 };
let score = 0;
let highScore = 0;
let isPaused = false;
let gameState = 'START'; // START, PLAYING, PAUSED, GAMEOVER
let gameInterval = 140; // Physics tick rate (ms)
let speedMultiplier = 1.0;
let lastTickTime = 0;
let accumulator = 0;
let particles = [];
let audioEnabled = true;
 
// Web Audio API Elements
let audioCtx = null;
 
// HTML Elements
const canvas = document.getElementById('game-canvas');
const ctx = canvas.getContext('2d');
const scoreVal = document.getElementById('current-score');
const highScoreVal = document.getElementById('high-score');
const speedVal = document.getElementById('speed-level');
 
// Overlays
const startOverlay = document.getElementById('start-overlay');
const pauseOverlay = document.getElementById('pause-overlay');
const gameoverOverlay = document.getElementById('gameover-overlay');
const gameoverReason = document.getElementById('gameover-reason');
const finalScore = document.getElementById('final-score');
const finalCores = document.getElementById('final-cores');
 
// Interactive Buttons
const startBtn = document.getElementById('start-button');
const resumeBtn = document.getElementById('resume-button');
const restartBtn = document.getElementById('restart-button');
const audioToggleBtn = document.getElementById('audio-toggle-btn');
const audioIcon = document.getElementById('audio-icon');
 
// Initialize High Score & Audio settings from LocalStorage
function loadPreferences() {
    const savedHighScore = localStorage.getItem('neonSnakeHighScore');
    if (savedHighScore !== null) {
        highScore = parseInt(savedHighScore, 10);
        highScoreVal.textContent = padScore(highScore);
    }
    
    const savedAudioSetting = localStorage.getItem('neonSnakeAudioEnabled');
    if (savedAudioSetting !== null) {
        audioEnabled = savedAudioSetting === 'true';
        updateAudioButtonUI();
    }
}
 
function updateAudioButtonUI() {
    if (audioEnabled) {
        audioIcon.textContent = '🔊';
        audioToggleBtn.innerHTML = '<span class="audio-icon" id="audio-icon">🔊</span> SOUNDS ON';
        audioToggleBtn.style.borderColor = 'rgba(0, 240, 255, 0.4)';
    } else {
        audioIcon.textContent = '🔇';
        audioToggleBtn.innerHTML = '<span class="audio-icon" id="audio-icon">🔇</span> SOUNDS MUTED';
        audioToggleBtn.style.borderColor = 'rgba(255, 255, 255, 0.1)';
    }
}
 
// Pads score display (e.g. 7 becomes "007")
function padScore(num) {
    if (num < 10) return '00' + num;
    if (num < 100) return '0' + num;
    return num.toString();
}
 
// -------------------------------------------------------------
// Audio Synthesis (Web Audio API)
// -------------------------------------------------------------
function initAudioContext() {
    if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if (audioCtx.state === 'suspended') {
        audioCtx.resume();
    }
}
 
function playEatSound() {
    if (!audioEnabled) return;
    try {
        initAudioContext();
        
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(320, audioCtx.currentTime);
        // Quick upward sweep
        osc.frequency.exponentialRampToValueAtTime(960, audioCtx.currentTime + 0.1);
        
        gain.gain.setValueAtTime(0.12, audioCtx.currentTime);
        gain.gain.linearRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
        
        osc.start();
        osc.stop(audioCtx.currentTime + 0.1);
    } catch (e) {
        console.warn('Audio Context block:', e);
    }
}
 
function playCrashSound() {
    if (!audioEnabled) return;
    try {
        initAudioContext();
        
        const duration = 0.6;
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(140, audioCtx.currentTime);
        osc.frequency.linearRampToValueAtTime(20, audioCtx.currentTime + duration);
        
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.linearRampToValueAtTime(0.001, audioCtx.currentTime + duration);
        
        osc.start();
        osc.stop(audioCtx.currentTime + duration);
        
        // Add brown/white noise explosion texture
        const bufferSize = audioCtx.sampleRate * duration;
        const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
        const data = buffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) {
            data[i] = Math.random() * 2 - 1;
        }
        
        const noise = audioCtx.createBufferSource();
        noise.buffer = buffer;
        
        const filter = audioCtx.createBiquadFilter();
        filter.type = 'lowpass';
        filter.frequency.setValueAtTime(350, audioCtx.currentTime);
        filter.frequency.linearRampToValueAtTime(40, audioCtx.currentTime + duration);
        
        const noiseGain = audioCtx.createGain();
        noiseGain.gain.setValueAtTime(0.08, audioCtx.currentTime);
        noiseGain.gain.linearRampToValueAtTime(0.001, audioCtx.currentTime + duration);
        
        noise.connect(filter);
        filter.connect(noiseGain);
        noiseGain.connect(audioCtx.destination);
        
        noise.start();
        noise.stop(audioCtx.currentTime + duration);
    } catch (e) {
        console.warn('Noise crash audio failed:', e);
    }
}
 
function playPauseSound() {
    if (!audioEnabled) return;
    try {
        initAudioContext();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        
        osc.type = 'sine';
        osc.frequency.setValueAtTime(isPaused ? 440 : 550, audioCtx.currentTime);
        osc.frequency.setValueAtTime(isPaused ? 330 : 660, audioCtx.currentTime + 0.05);
        
        gain.gain.setValueAtTime(0.06, audioCtx.currentTime);
        gain.gain.linearRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
        
        osc.start();
        osc.stop(audioCtx.currentTime + 0.1);
    } catch (e) {
        console.warn('Pause audio failed:', e);
    }
}
 
// -------------------------------------------------------------
// Particle Emitter System (Polished eats)
// -------------------------------------------------------------
function spawnFoodParticles(cellX, cellY) {
    const centerX = cellX * CELL_SIZE + CELL_SIZE / 2;
    const centerY = cellY * CELL_SIZE + CELL_SIZE / 2;
    
    // Spawn 15 particles expanding outwards
    for (let i = 0; i < 18; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = 2 + Math.random() * 5;
        particles.push({
            x: centerX,
            y: centerY,
            vx: Math.cos(angle) * speed,
            vy: Math.sin(angle) * speed,
            color: Math.random() > 0.4 ? 'var(--neon-pink)' : '#ffffff',
            size: 2 + Math.random() * 3,
            alpha: 1.0,
            life: 0,
            maxLife: 25 + Math.floor(Math.random() * 15)
        });
    }
}
 
function updateParticles() {
    for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.vx *= 0.96; // slow down velocity
        p.vy *= 0.96;
        p.life++;
        p.alpha = 1 - (p.life / p.maxLife);
        
        if (p.life >= p.maxLife) {
            particles.splice(i, 1);
        }
    }
}
 
// -------------------------------------------------------------
// Game Logic Initialization
// -------------------------------------------------------------
function startGame() {
    // Reset snake in center moving right
    snake = [
        { x: 10, y: 10 },
        { x: 9, y: 10 },
        { x: 8, y: 10 }
    ];
    direction = 'RIGHT';
    directionQueue = [];
    
    score = 0;
    scoreVal.textContent = padScore(score);
    
    gameInterval = 140;
    speedMultiplier = 1.0;
    speedVal.textContent = speedMultiplier.toFixed(1) + 'x';
    
    particles = [];
    isPaused = false;
    gameState = 'PLAYING';
    
    // Hide all overlays
    startOverlay.classList.remove('active');
    pauseOverlay.classList.remove('active');
    gameoverOverlay.classList.remove('active');
    
    spawnFood();
    
    // Warm up/init Audio Context
    try { initAudioContext(); } catch (e) {}
}
 
function spawnFood() {
    let attempts = 0;
    let placed = false;
    
    while (attempts < 100 && !placed) {
        const x = Math.floor(Math.random() * GRID_SIZE);
        const y = Math.floor(Math.random() * GRID_SIZE);
        
        // Ensure food does not spawn inside the snake body
        const overlap = snake.some(segment => segment.x === x && segment.y === y);
        if (!overlap) {
            food = { x, y };
            placed = true;
        }
        attempts++;
    }
    
    // Sequential fallback search if grid is highly saturated
    if (!placed) {
        for (let x = 0; x < GRID_SIZE; x++) {
            for (let y = 0; y < GRID_SIZE; y++) {
                const overlap = snake.some(segment => segment.x === x && segment.y === y);
                if (!overlap) {
                    food = { x, y };
                    return;
                }
            }
        }
    }
}
 
function togglePause() {
    if (gameState !== 'PLAYING' && gameState !== 'PAUSED') return;
    
    if (isPaused) {
        isPaused = false;
        gameState = 'PLAYING';
        pauseOverlay.classList.remove('active');
        playPauseSound();
    } else {
        isPaused = true;
        gameState = 'PAUSED';
        pauseOverlay.classList.add('active');
        playPauseSound();
    }
}
 
function gameOver(reason) {
    gameState = 'GAMEOVER';
    playCrashSound();
    
    gameoverReason.textContent = reason;
    finalScore.textContent = score;
    finalCores.textContent = score; // Energy cores equal score
    
    // Save High Score
    if (score > highScore) {
        highScore = score;
        highScoreVal.textContent = padScore(highScore);
        localStorage.setItem('neonSnakeHighScore', highScore.toString());
    }
    
    gameoverOverlay.classList.add('active');
}
 
// Ramps speed based on current score
function calculateSpeed() {
    // Speed increments every 5 points
    const level = Math.floor(score / 5) + 1;
    // Ramps interval from 140ms down to a cap of 50ms
    gameInterval = Math.max(50, 140 - (level - 1) * 7);
    speedMultiplier = 140 / gameInterval;
    speedVal.textContent = speedMultiplier.toFixed(1) + 'x';
}
 
// -------------------------------------------------------------
// Keyboard Controls
// -------------------------------------------------------------
window.addEventListener('keydown', e => {
    const key = e.code;
    
    // Prevent default scroll behavior for navigation keys
    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space'].includes(key)) {
        e.preventDefault();
    }
    
    if (key === 'Space') {
        if (gameState === 'START') {
            startGame();
        } else if (gameState === 'GAMEOVER') {
            startGame();
        } else {
            togglePause();
        }
        return;
    }
    
    if (gameState !== 'PLAYING') return;
    
    let nextDir = null;
    if (key === 'ArrowUp' || key === 'KeyW') nextDir = 'UP';
    else if (key === 'ArrowDown' || key === 'KeyS') nextDir = 'DOWN';
    else if (key === 'ArrowLeft' || key === 'KeyA') nextDir = 'LEFT';
    else if (key === 'ArrowRight' || key === 'KeyD') nextDir = 'RIGHT';
    
    if (nextDir) {
        // Look at the latest direction in queue (or current if empty) to prevent instant opposite moves
        const lastQueuedDir = directionQueue.length > 0 ? directionQueue[directionQueue.length - 1] : direction;
        
        // Block 180-degree turns
        if (
            (nextDir === 'UP' && lastQueuedDir !== 'DOWN') ||
            (nextDir === 'DOWN' && lastQueuedDir !== 'UP') ||
            (nextDir === 'LEFT' && lastQueuedDir !== 'RIGHT') ||
            (nextDir === 'RIGHT' && lastQueuedDir !== 'LEFT')
        ) {
            // Buffer maximum 2 turns to keep key response sharp but secure
            if (directionQueue.length < 2) {
                directionQueue.push(nextDir);
            }
        }
    }
});
 
// -------------------------------------------------------------
// Physics Updates
// -------------------------------------------------------------
function updatePhysics() {
    if (gameState !== 'PLAYING') return;
    
    // Dequeue next turning input
    if (directionQueue.length > 0) {
        direction = directionQueue.shift();
    }
    
    const head = snake[0];
    let newHead = { x: head.x, y: head.y };
    
    // Move coordinate in direction
    switch (direction) {
        case 'UP':    newHead.y -= 1; break;
        case 'DOWN':  newHead.y += 1; break;
        case 'LEFT':  newHead.x -= 1; break;
        case 'RIGHT': newHead.x += 1; break;
    }
    
    // Collision: Check out of bounds
    if (newHead.x < 0 || newHead.x >= GRID_SIZE || newHead.y < 0 || newHead.y >= GRID_SIZE) {
        gameOver('GRID BOUNDARY BREACHED');
        return;
    }
    
    // Collision: Check snake self overlap
    const selfCollision = snake.some(segment => segment.x === newHead.x && segment.y === newHead.y);
    if (selfCollision) {
        gameOver('SYSTEM INTERNAL COLLISION');
        return;
    }
    
    // Insert new head
    snake.unshift(newHead);
    
    // Check if food eaten
    if (newHead.x === food.x && newHead.y === food.y) {
        score++;
        scoreVal.textContent = padScore(score);
        playEatSound();
        spawnFoodParticles(food.x, food.y);
        spawnFood();
        calculateSpeed();
    } else {
        // Keep snake length, pop tail
        snake.pop();
    }
}
 
// -------------------------------------------------------------
// Canvas Render Engine
// -------------------------------------------------------------
function drawRoundedRect(x, y, w, h, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.arcTo(x + w, y, x + w, y + h, radius);
    ctx.arcTo(x + w, y + h, x, y + h, radius);
    ctx.arcTo(x, y + h, x, y, radius);
    ctx.arcTo(x, y, x + w, y, radius);
    ctx.closePath();
}
 
function render() {
    // Clear Canvas and paint grid backdrop (very transparent lines)
    ctx.fillStyle = 'rgba(7, 8, 13, 0.95)';
    ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
    
    // Draw neon background grid
    ctx.strokeStyle = 'rgba(0, 240, 255, 0.03)';
    ctx.lineWidth = 1;
    for (let i = 0; i <= GRID_SIZE; i++) {
        // Columns
        ctx.beginPath();
        ctx.moveTo(i * CELL_SIZE, 0);
        ctx.lineTo(i * CELL_SIZE, CANVAS_SIZE);
        ctx.stroke();
        
        // Rows
        ctx.beginPath();
        ctx.moveTo(0, i * CELL_SIZE);
        ctx.lineTo(CANVAS_SIZE, i * CELL_SIZE);
        ctx.stroke();
    }
    
    // Draw Food
    const foodPulse = Math.sin(Date.now() * 0.01) * 1.5;
    const foodR = (CELL_SIZE / 2) - 4 + foodPulse;
    const foodCenterX = food.x * CELL_SIZE + CELL_SIZE / 2;
    const foodCenterY = food.y * CELL_SIZE + CELL_SIZE / 2;
    
    // Food neon pulse shadow
    ctx.save();
    ctx.shadowBlur = 12;
    ctx.shadowColor = '#ff007f';
    ctx.fillStyle = '#ff007f';
    ctx.beginPath();
    ctx.arc(foodCenterX, foodCenterY, foodR, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
    
    // Food target crosshair (cool sci-fi detailing)
    ctx.strokeStyle = 'rgba(255, 0, 127, 0.35)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(foodCenterX, foodCenterY, foodR + 5, 0, Math.PI * 2);
    ctx.stroke();
    
    // Draw Snake
    snake.forEach((segment, idx) => {
        const isHead = idx === 0;
        const pad = 2;
        const size = CELL_SIZE - pad * 2;
        
        // Cyberpunk color gradient: Head starts at cyan, shifts to indigo-purple at tail
        const ratio = idx / Math.max(1, snake.length - 1);
        // Interpolate colors dynamically
        const rVal = Math.floor(0 + ratio * 150);   // 0 to 150
        const gVal = Math.floor(240 - ratio * 200); // 240 to 40
        const bVal = 255;
        const colorString = `rgb(${rVal}, ${gVal}, ${bVal})`;
        
        ctx.save();
        ctx.fillStyle = colorString;
        ctx.shadowBlur = isHead ? 15 : 6;
        ctx.shadowColor = colorString;
        
        // Draw head or body segments
        drawRoundedRect(segment.x * CELL_SIZE + pad, segment.y * CELL_SIZE + pad, size, size, 6);
        ctx.fill();
        ctx.restore();
        
        // Head extra detail (Cyber eyes)
        if (isHead) {
            ctx.fillStyle = '#ffffff';
            const eyeSize = 3;
            const eyeGap = 5;
            let eye1 = { x: 0, y: 0 };
            let eye2 = { x: 0, y: 0 };
            
            const cellCenter = {
                x: segment.x * CELL_SIZE + CELL_SIZE / 2,
                y: segment.y * CELL_SIZE + CELL_SIZE / 2
            };
            
            // Adjust eyes direction
            if (direction === 'UP') {
                eye1 = { x: cellCenter.x - eyeGap, y: cellCenter.y - 4 };
                eye2 = { x: cellCenter.x + eyeGap, y: cellCenter.y - 4 };
            } else if (direction === 'DOWN') {
                eye1 = { x: cellCenter.x - eyeGap, y: cellCenter.y + 4 };
                eye2 = { x: cellCenter.x + eyeGap, y: cellCenter.y + 4 };
            } else if (direction === 'LEFT') {
                eye1 = { x: cellCenter.x - 4, y: cellCenter.y - eyeGap };
                eye2 = { x: cellCenter.x - 4, y: cellCenter.y + eyeGap };
            } else if (direction === 'RIGHT') {
                eye1 = { x: cellCenter.x + 4, y: cellCenter.y - eyeGap };
                eye2 = { x: cellCenter.x + 4, y: cellCenter.y + eyeGap };
            }
            
            ctx.beginPath();
            ctx.arc(eye1.x, eye1.y, eyeSize, 0, Math.PI * 2);
            ctx.arc(eye2.x, eye2.y, eyeSize, 0, Math.PI * 2);
            ctx.fill();
            
            // Draw pupil
            ctx.fillStyle = '#07080d';
            ctx.beginPath();
            ctx.arc(eye1.x, eye1.y, 1, 0, Math.PI * 2);
            ctx.arc(eye2.x, eye2.y, 1, 0, Math.PI * 2);
            ctx.fill();
        }
    });
    
    // Draw Particles
    particles.forEach(p => {
        ctx.fillStyle = p.color;
        ctx.globalAlpha = p.alpha;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();
    });
    ctx.globalAlpha = 1.0; // reset transparency
}
 
// -------------------------------------------------------------
// Unified High Performance Frame Loop
// -------------------------------------------------------------
function gameLoop(timestamp) {
    if (!lastTickTime) {
        lastTickTime = timestamp;
    }
    
    const delta = timestamp - lastTickTime;
    lastTickTime = timestamp;
    
    if (gameState === 'PLAYING') {
        accumulator += delta;
        
        // Execute grid updates based on interval speed
        while (accumulator >= gameInterval) {
            updatePhysics();
            accumulator -= gameInterval;
        }
    } else {
        // Clear accumulator when not active playing
        accumulator = 0;
    }
    
    // Update visual animations on every frame (60fps particles/glow pulses)
    updateParticles();
    render();
    
    requestAnimationFrame(gameLoop);
}
 
// -------------------------------------------------------------
// Element Click Handlers & Interface bindings
// -------------------------------------------------------------
startBtn.addEventListener('click', () => {
    startGame();
});
 
resumeBtn.addEventListener('click', () => {
    togglePause();
});
 
restartBtn.addEventListener('click', () => {
    startGame();
});
 
audioToggleBtn.addEventListener('click', () => {
    audioEnabled = !audioEnabled;
    localStorage.setItem('neonSnakeAudioEnabled', audioEnabled.toString());
    updateAudioButtonUI();
    
    if (audioEnabled) {
        // Quick chirp to demonstrate sounds are back
        try {
            initAudioContext();
            playEatSound();
        } catch(e){}
    }
});
 
// Setup Initial Canvas Draw & load HighScore preferences
loadPreferences();
ctx.fillStyle = 'rgba(7, 8, 13, 0.95)';
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
 
// Draw grid background on splash load
ctx.strokeStyle = 'rgba(0, 240, 255, 0.03)';
for (let i = 0; i <= GRID_SIZE; i++) {
    ctx.beginPath();
    ctx.moveTo(i * CELL_SIZE, 0);
    ctx.lineTo(i * CELL_SIZE, CANVAS_SIZE);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, i * CELL_SIZE);
    ctx.lineTo(CANVAS_SIZE, i * CELL_SIZE);
    ctx.stroke();
}
 
// Start visual frame loops
requestAnimationFrame(gameLoop);
 
668 linesjs
Writes ~/.gemini/antigravity-cli/brain/70ddc947-5808-4c9d-bb2a-e13a446dd4c4/game_design.md
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