script.js

const canvas = document.getElementById('gameCanvas');
const ctx = canvas ? canvas.getContext('2d') : null;
const scoreDisplay = document.getElementById('score');
const highScoreDisplay = document.getElementById('highScore');
const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');

// Error checking and logging
console.log('Canvas element found:', !!canvas);
console.log('Context found:', !!ctx);
console.log('Start button found:', !!startBtn);

if (!canvas) {
    console.error('Canvas not found! Check HTML for id="gameCanvas"');
}
if (!startBtn) {
    console.error('Start button not found! Check HTML for id="startBtn"');
}

const gridSize = 20;
const tileCount = canvas ? canvas.width / gridSize : 40;

let snake = [{ x: 10, y: 10 }];
let foods = []; // Changed from single food to multiple foods
let score = 0;
let highScore = localStorage.getItem('snakeHighScore') || 0;
let gameRunning = false;
let gamePaused = false;
let direction = { x: 1, y: 0 };
let nextDirection = { x: 1, y: 0 };
let gameEnded = false;

// Difficulty settings
const DIFFICULTY_SPEEDS = {
    easy: 150,    // Slower speed
    medium: 100,  // Normal speed
    hard: 60      // Faster speed
};

const MIN_FOOD_COUNT = 5; // Always keep at least 5 mangoes on screen

function getCurrentSpeed() {
    const difficultySelect = document.getElementById('difficulty');
    const difficulty = difficultySelect ? difficultySelect.value : 'medium';
    return DIFFICULTY_SPEEDS[difficulty];
}

// Display high score
highScoreDisplay.textContent = highScore;

// Event listeners - with null check
if (startBtn) startBtn.addEventListener('click', startGame);
if (pauseBtn) pauseBtn.addEventListener('click', togglePause);
if (resetBtn) resetBtn.addEventListener('click', resetGame);

// Arrow key controls
document.addEventListener('keydown', (e) => {
    if (!gameRunning) {
        if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
            startGame();
        }
    }

    if (e.key === 'ArrowUp' && direction.y === 0) nextDirection = { x: 0, y: -1 };
    else if (e.key === 'ArrowDown' && direction.y === 0) nextDirection = { x: 0, y: 1 };
    else if (e.key === 'ArrowLeft' && direction.x === 0) nextDirection = { x: -1, y: 0 };
    else if (e.key === 'ArrowRight' && direction.x === 0) nextDirection = { x: 1, y: 0 };
});

function startGame() {
    // If game ended, reset everything
    if (gameEnded) {
        snake = [{ x: 10, y: 10 }];
        foods = []; // Reset foods array
        score = 0;
        direction = { x: 1, y: 0 };
        nextDirection = { x: 1, y: 0 };
        scoreDisplay.textContent = score;
        gameEnded = false;
    }
    
    if (!gameRunning) {
        gameRunning = true;
        gamePaused = false;
        pauseBtn.textContent = 'Pause';
        startBtn.textContent = 'Resume';
        
        // Initialize multiple foods if empty
        if (foods.length === 0) {
            for (let i = 0; i < MIN_FOOD_COUNT; i++) {
                generateFood();
            }
        }
        
        gameLoop();
    }
}

function togglePause() {
    if (gameRunning) {
        gamePaused = !gamePaused;
        pauseBtn.textContent = gamePaused ? 'Resume' : 'Pause';
        if (!gamePaused) {
            gameLoop();
        }
    }
}

function resetGame() {
    snake = [{ x: 10, y: 10 }];
    foods = []; // Reset to empty array
    score = 0;
    direction = { x: 1, y: 0 };
    nextDirection = { x: 1, y: 0 };
    gameRunning = false;
    gamePaused = false;
    gameEnded = false;
    scoreDisplay.textContent = score;
    pauseBtn.textContent = 'Pause';
    startBtn.textContent = 'Start Game';
    draw();
}

function gameLoop() {
    if (!gameRunning || gamePaused) return;

    update();
    draw();

    setTimeout(gameLoop, getCurrentSpeed());
}

function update() {
    direction = nextDirection;

    let head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

    // Wall collision - game over
    if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
        endGame();
        return;
    }

    // Check self collision
    if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        endGame();
        return;
    }

    snake.unshift(head);

    // Check food collision with any food
    let foodEaten = false;
    foods = foods.filter(f => {
        if (head.x === f.x && head.y === f.y) {
            foodEaten = true;
            return false; // Remove this food
        }
        return true; // Keep other foods
    });

    if (foodEaten) {
        score += 10;
        scoreDisplay.textContent = score;
    } else {
        snake.pop();
    }

    // Maintain minimum food count - INFINITE FOOD!
    while (foods.length < MIN_FOOD_COUNT) {
        generateFood();
    }
}

function generateFood() {
    let newFood;
    let attempts = 0;
    const maxAttempts = 500; // Much higher limit for harder levels
    
    do {
        newFood = {
            x: Math.floor(Math.random() * tileCount),
            y: Math.floor(Math.random() * tileCount)
        };
        attempts++;
        // If 500 attempts without finding valid spot, place it anyway (allow overlap)
        if (attempts >= maxAttempts) {
            foods.push(newFood);
            return;
        }
    } while (
        snake.some(segment => segment.x === newFood.x && segment.y === newFood.y) ||
        foods.some(food => food.x === newFood.x && food.y === newFood.y)
    );
    
    foods.push(newFood);
}

function draw() {
    // Clear canvas
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw grid
    ctx.strokeStyle = '#222';
    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 curves and eyes
    snake.forEach((segment, index) => {
        const x = segment.x * gridSize + gridSize / 2;
        const y = segment.y * gridSize + gridSize / 2;
        const radius = gridSize / 2 - 1;

        // Head - bright green with gradient
        if (index === 0) {
            ctx.fillStyle = '#00ff00';
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();
            
            // Add eyes
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.arc(x - 5, y - 4, 2.5, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(x + 5, y - 4, 2.5, 0, Math.PI * 2);
            ctx.fill();
            
            // Add shine effect
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.beginPath();
            ctx.arc(x - 3, y - 3, 2, 0, Math.PI * 2);
            ctx.fill();
        } else {
            // Body - darker green with gradient effect
            const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
            gradient.addColorStop(0, '#00ff00');
            gradient.addColorStop(1, '#00aa00');
            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.fill();
            
            // Add border for definition
            ctx.strokeStyle = '#00ff00';
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.stroke();
        }
    });

    // Draw all foods - Mango emojis
    foods.forEach(foodItem => {
        const foodX = foodItem.x * gridSize + gridSize / 2;
        const foodY = foodItem.y * gridSize + gridSize / 2;
        
        // Draw mango emoji
        ctx.font = `${gridSize - 4}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('🥭', foodX, foodY);
    });
}

function endGame() {
    gameRunning = false;
    gameEnded = true;
    if (score > highScore) {
        highScore = score;
        highScoreDisplay.textContent = highScore;
        localStorage.setItem('snakeHighScore', highScore);
    }
    
    startBtn.textContent = 'Start Game';
}

// Initial draw
draw();