script.js

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const highScoreElement = document.getElementById('highScore');
const gameOverElement = document.getElementById('gameOver');
const startMessageElement = document.getElementById('startMessage');

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake = [
    {x: 10, y: 10}
];
let food = {};
let dx = 0;
let dy = 0;
let score = 0;
let highScore = localStorage.getItem('snakeHighScore') || 0;
let gameRunning = true;
let gameStarted = false;
let particles = [];

// Initialize high score display
highScoreElement.textContent = highScore;

// Particle system for visual effects
function createParticle(x, y, color = '#00ff88') {
    return {
        x: x,
        y: y,
        vx: (Math.random() - 0.5) * 4,
        vy: (Math.random() - 0.5) * 4,
        life: 30,
        maxLife: 30,
        color: color
    };
}

function updateParticles() {
    particles = particles.filter(particle => {
        particle.x += particle.vx;
        particle.y += particle.vy;
        particle.life--;
        return particle.life > 0;
    });
}

function drawParticles() {
    particles.forEach(particle => {
        const alpha = particle.life / particle.maxLife;
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = particle.color;
        ctx.fillRect(particle.x, particle.y, 3, 3);
        ctx.restore();
    });
}

// Create floating particles in background
function createBackgroundParticles() {
    const particleContainer = document.getElementById('particles');
    
    for (let i = 0; i < 20; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.animationDelay = Math.random() * 6 + 's';
        particle.style.animationDuration = (Math.random() * 3 + 4) + 's';
        particleContainer.appendChild(particle);
    }
}

// Generate random food position
function randomFood() {
    food = {
        x: Math.floor(Math.random() * tileCount),
        y: Math.floor(Math.random() * tileCount)
    };
    
    // Make sure food doesn't spawn on snake
    for (let part of snake) {
        if (food.x === part.x && food.y === part.y) {
            randomFood();
            return;
        }
    }
}

// Draw game elements with enhanced graphics
function drawGame() {
    // Clear canvas with gradient
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    gradient.addColorStop(0, '#000000');
    gradient.addColorStop(0.5, '#0a0a0a');
    gradient.addColorStop(1, '#000000');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw grid pattern
    ctx.strokeStyle = 'rgba(0, 255, 136, 0.1)';
    ctx.lineWidth = 0.5;
    for (let i = 0; i <= tileCount; i++) {
        ctx.beginPath();
        ctx.moveTo(i * gridSize, 0);
        ctx.lineTo(i * gridSize, canvas.height);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize);
        ctx.lineTo(canvas.width, i * gridSize);
        ctx.stroke();
    }

    // Draw snake with gradient and glow effect
    snake.forEach((part, index) => {
        const isHead = index === 0;
        const size = gridSize - 2;
        const x = part.x * gridSize + 1;
        const y = part.y * gridSize + 1;

        // Create gradient for snake body
        const snakeGradient = ctx.createRadialGradient(
            x + size/2, y + size/2, 0,
            x + size/2, y + size/2, size/2
        );
        
        if (isHead) {
            snakeGradient.addColorStop(0, '#00ff88');
            snakeGradient.addColorStop(1, '#008844');
            
            // Draw eyes for the head
            ctx.fillStyle = snakeGradient;
            ctx.fillRect(x, y, size, size);
            
            // Eyes
            ctx.fillStyle = '#ffffff';
            const eyeSize = 3;
            ctx.fillRect(x + 4, y + 4, eyeSize, eyeSize);
            ctx.fillRect(x + size - 7, y + 4, eyeSize, eyeSize);
            
            ctx.fillStyle = '#000000';
            ctx.fillRect(x + 5, y + 5, 1, 1);
            ctx.fillRect(x + size - 6, y + 5, 1, 1);
        } else {
            const intensity = 1 - (index / snake.length) * 0.5;
            snakeGradient.addColorStop(0, `rgba(0, 255, 136, ${intensity})`);
            snakeGradient.addColorStop(1, `rgba(0, 136, 68, ${intensity})`);
            ctx.fillStyle = snakeGradient;
            ctx.fillRect(x, y, size, size);
        }

        // Add glow effect
        ctx.shadowColor = '#00ff88';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    });

    // Reset shadow
    ctx.shadowBlur = 0;

    // Draw food with pulsing effect
    const time = Date.now() * 0.005;
    const pulseSize = Math.sin(time) * 2 + (gridSize - 4);
    const foodX = food.x * gridSize + (gridSize - pulseSize) / 2;
    const foodY = food.y * gridSize + (gridSize - pulseSize) / 2;

    // Food gradient
    const foodGradient = ctx.createRadialGradient(
        foodX + pulseSize/2, foodY + pulseSize/2, 0,
        foodX + pulseSize/2, foodY + pulseSize/2, pulseSize/2
    );
    foodGradient.addColorStop(0, '#ff4444');
    foodGradient.addColorStop(1, '#aa0000');
    
    ctx.fillStyle = foodGradient;
    ctx.fillRect(foodX, foodY, pulseSize, pulseSize);

    // Food glow
    ctx.shadowColor = '#ff4444';
    ctx.shadowBlur = 15;
    ctx.fillRect(foodX, foodY, pulseSize, pulseSize);
    ctx.shadowBlur = 0;

    // Draw and update particles
    updateParticles();
    drawParticles();
}

// Move snake
function moveSnake() {
    if (!gameRunning || !gameStarted) return;

    const head = {x: snake[0].x + dx, y: snake[0].y + dy};

    // Check wall collision
    if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
        gameOver();
        return;
    }

    // Check self collision
    for (let part of snake) {
        if (head.x === part.x && head.y === part.y) {
            gameOver();
            return;
        }
    }

    snake.unshift(head);

    // Check food collision
    if (head.x === food.x && head.y === food.y) {
        score += 10;
        scoreElement.textContent = score;
        
        // Update high score
        if (score > highScore) {
            highScore = score;
            highScoreElement.textContent = highScore;
            localStorage.setItem('snakeHighScore', highScore);
            
            // Create celebration particles
            for (let i = 0; i < 10; i++) {
                particles.push(createParticle(
                    food.x * gridSize + Math.random() * gridSize,
                    food.y * gridSize + Math.random() * gridSize,
                    '#ffff00'
                ));
            }
        }
        
        // Create eating particles
        for (let i = 0; i < 5; i++) {
            particles.push(createParticle(
                food.x * gridSize + Math.random() * gridSize,
                food.y * gridSize + Math.random() * gridSize,
                '#ff4444'
            ));
        }
        
        randomFood();
    } else {
        snake.pop();
    }
}

// Game over with screen shake effect
function gameOver() {
    gameRunning = false;
    gameStarted = false;
    gameOverElement.style.display = 'block';
    
    // Create explosion particles
    for (let i = 0; i < 20; i++) {
        particles.push(createParticle(
            snake[0].x * gridSize + Math.random() * gridSize,
            snake[0].y * gridSize + Math.random() * gridSize,
            '#ff0000'
        ));
    }
    
    // Screen shake effect
    canvas.style.animation = 'shake 0.5s ease-in-out';
    setTimeout(() => {
        canvas.style.animation = '';
    }, 500);
}

// Restart game
function restartGame() {
    snake = [{x: 10, y: 10}];
    dx = 0;
    dy = 0;
    score = 0;
    particles = [];
    scoreElement.textContent = score;
    gameRunning = true;
    gameStarted = false;
    gameOverElement.style.display = 'none';
    startMessageElement.style.display = 'block';
    randomFood();
}

// Start game
function startGame() {
    if (!gameStarted && gameRunning) {
        gameStarted = true;
        startMessageElement.style.display = 'none';
    }
}

// Keyboard controls with visual feedback
document.addEventListener('keydown', (e) => {
    e.preventDefault();
    
    if (!gameRunning && e.key.toLowerCase() === 'r') {
        restartGame();
        return;
    }

    if (!gameRunning) return;

    const key = e.key.toLowerCase();
    
    // Add visual feedback for key presses
    const keyElements = document.querySelectorAll('.key');
    keyElements.forEach(keyEl => {
        if (keyEl.textContent.toLowerCase() === key) {
            keyEl.style.transform = 'translateY(-2px) scale(1.1)';
            keyEl.style.boxShadow = '0 6px 12px rgba(0, 255, 136, 0.5)';
            setTimeout(() => {
                keyEl.style.transform = '';
                keyEl.style.boxShadow = '';
            }, 200);
        }
    });
    
    // Prevent reverse direction and start game
    switch(key) {
        case 'w':
            if (dy !== 1) {
                dx = 0;
                dy = -1;
                startGame();
            }
            break;
        case 's':
            if (dy !== -1) {
                dx = 0;
                dy = 1;
                startGame();
            }
            break;
        case 'a':
            if (dx !== 1) {
                dx = -1;
                dy = 0;
                startGame();
            }
            break;
        case 'd':
            if (dx !== -1) {
                dx = 1;
                dy = 0;
                startGame();
            }
            break;
    }
});

// Ensure focus on the document for keyboard events
document.addEventListener('DOMContentLoaded', () => {
    document.body.focus();
    createBackgroundParticles();
});

// Click to focus (fallback)
document.addEventListener('click', () => {
    document.body.focus();
});

// Game loop
function gameLoop() {
    moveSnake();
    drawGame();
}

// Initialize game
randomFood();
drawGame();
createBackgroundParticles();
setInterval(gameLoop, 150);