Ministral 3 14B 2512

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            user-select: none;
        }

        #game-container {
            text-align: center;
            position: relative;
        }

        #game-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            border-radius: 8px;
            padding: 20px;
            display: none;
        }

        #game-overlay h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        #game-overlay p {
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        #score-display {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 1.2em;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 8px 12px;
            border-radius: 5px;
        }

        #best-score-display {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            font-size: 1.2em;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 8px 12px;
            border-radius: 5px;
        }

        #canvas {
            background-color: #1a1a1a;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        #instructions {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 1em;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 8px 16px;
            border-radius: 5px;
        }

        .particle {
            position: absolute;
            background-color: #ff5252;
            border-radius: 50%;
            pointer-events: none;
        }

        @media (max-width: 600px) {
            #score-display, #best-score-display {
                font-size: 0.9em;
                padding: 6px 10px;
            }

            #game-overlay h1 {
                font-size: 2em;
            }

            #game-overlay p {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score-display">Score: 0</div>
        <div id="best-score-display">Best: 0</div>
        <canvas id="canvas"></canvas>
        <div id="game-overlay">
            <h1>Game Over</h1>
            <p id="final-score">Score: 0</p>
            <p>Press Space or Enter to restart</p>
        </div>
        <div id="instructions">Click or press a key to start</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const scoreDisplay = document.getElementById('score-display');
            const bestScoreDisplay = document.getElementById('best-score-display');
            const gameOverlay = document.getElementById('game-overlay');
            const finalScoreDisplay = document.getElementById('final-score');
            const instructions = document.getElementById('instructions');

            // Game settings
            const GRID_SIZE = 20;
            const CELL_SIZE = 25;
            const GAME_SPEED = 100; // ms
            let gameSpeed = GAME_SPEED;
            let lastTime = 0;
            let animationId;

            // Game state
            let snake = [];
            let food = {};
            let direction = { x: 0, y: 0 };
            let nextDirection = { x: 0, y: 0 };
            let score = 0;
            let bestScore = localStorage.getItem('snakeBestScore') || 0;
            let gameRunning = false;
            let gamePaused = false;
            let particles = [];

            // Initialize game
            function initGame() {
                // Reset snake
                snake = [
                    { x: 10, y: 10 },
                    { x: 9, y: 10 },
                    { x: 8, y: 10 }
                ];

                // Reset direction
                direction = { x: 1, y: 0 };
                nextDirection = { x: 1, y: 0 };

                // Reset score
                score = 0;
                scoreDisplay.textContent = `Score: ${score}`;

                // Reset game state
                gameRunning = true;
                gamePaused = false;
                gameOverlay.style.display = 'none';
                instructions.style.display = 'block';

                // Generate first food
                generateFood();

                // Reset canvas
                resizeCanvas();
                drawGame();

                // Start game loop
                lastTime = performance.now();
                animationId = requestAnimationFrame(gameLoop);
            }

            // Resize canvas to fit grid
            function resizeCanvas() {
                canvas.width = GRID_SIZE * CELL_SIZE;
                canvas.height = GRID_SIZE * CELL_SIZE;
                canvas.style.width = `${GRID_SIZE * CELL_SIZE}px`;
                canvas.style.height = `${GRID_SIZE * CELL_SIZE}px`;
            }

            // Generate food at random position not on snake
            function generateFood() {
                let newFood;
                do {
                    newFood = {
                        x: Math.floor(Math.random() * GRID_SIZE),
                        y: Math.floor(Math.random() * GRID_SIZE)
                    };
                } while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));

                food = newFood;
            }

            // Draw game elements
            function drawGame() {
                // Clear canvas
                ctx.fillStyle = '#1a1a1a';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Draw grid (optional visual aid)
                ctx.strokeStyle = '#333';
                ctx.lineWidth = 0.5;
                for (let i = 0; i < GRID_SIZE; i++) {
                    ctx.beginPath();
                    ctx.moveTo(i * CELL_SIZE, 0);
                    ctx.lineTo(i * CELL_SIZE, canvas.height);
                    ctx.stroke();

                    ctx.beginPath();
                    ctx.moveTo(0, i * CELL_SIZE);
                    ctx.lineTo(canvas.width, i * CELL_SIZE);
                    ctx.stroke();
                }

                // Draw snake
                snake.forEach((segment, index) => {
                    const isHead = index === 0;

                    // Draw head differently
                    if (isHead) {
                        // Draw head based on direction
                        const headSize = CELL_SIZE * 0.9;
                        const headX = segment.x * CELL_SIZE + CELL_SIZE / 2;
                        const headY = segment.y * CELL_SIZE + CELL_SIZE / 2;

                        ctx.fillStyle = '#4CAF50';
                        ctx.beginPath();
                        ctx.arc(headX, headY, headSize / 2, 0, Math.PI * 2);
                        ctx.fill();

                        // Draw eyes based on direction
                        drawHeadEyes(segment.x, segment.y, direction);
                    } else {
                        // Draw body segments
                        ctx.fillStyle = '#8BC34A';
                        ctx.fillRect(segment.x * CELL_SIZE, segment.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);
                    }
                });

                // Draw food
                ctx.fillStyle = '#F44336';
                ctx.beginPath();
                ctx.arc(
                    food.x * CELL_SIZE + CELL_SIZE / 2,
                    food.y * CELL_SIZE + CELL_SIZE / 2,
                    CELL_SIZE * 0.4,
                    0,
                    Math.PI * 2
                );
                ctx.fill();

                // Draw particles
                particles.forEach(particle => {
                    ctx.fillStyle = `rgba(255, 82, 82, ${particle.alpha})`;
                    ctx.beginPath();
                    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                    ctx.fill();
                });
            }

            // Draw head eyes based on direction
            function drawHeadEyes(headX, headY, dir) {
                const eyeSize = CELL_SIZE * 0.15;
                const eyeOffset = CELL_SIZE * 0.2;

                // Position eyes based on direction
                let eye1X, eye1Y, eye2X, eye2Y;

                if (dir.x === 1) { // Right
                    eye1X = (headX + eyeOffset) * CELL_SIZE;
                    eye1Y = (headY + CELL_SIZE / 2) * CELL_SIZE;
                    eye2X = (headX + CELL_SIZE - eyeOffset) * CELL_SIZE;
                    eye2Y = (headY + CELL_SIZE / 2) * CELL_SIZE;
                } else if (dir.x === -1) { // Left
                    eye1X = (headX + CELL_SIZE - eyeOffset) * CELL_SIZE;
                    eye1Y = (headY + CELL_SIZE / 2) * CELL_SIZE;
                    eye2X = (headX + eyeOffset) * CELL_SIZE;
                    eye2Y = (headY + CELL_SIZE / 2) * CELL_SIZE;
                } else if (dir.y === -1) { // Up
                    eye1X = (headX + CELL_SIZE / 2) * CELL_SIZE;
                    eye1Y = (headY + eyeOffset) * CELL_SIZE;
                    eye2X = (headX + CELL_SIZE / 2) * CELL_SIZE;
                    eye2Y = (headY + CELL_SIZE - eyeOffset) * CELL_SIZE;
                } else { // Down
                    eye1X = (headX + CELL_SIZE / 2) * CELL_SIZE;
                    eye1Y = (headY + CELL_SIZE - eyeOffset) * CELL_SIZE;
                    eye2X = (headX + CELL_SIZE / 2) * CELL_SIZE;
                    eye2Y = (headY + eyeOffset) * CELL_SIZE;
                }

                // Draw eyes
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(eye1X, eye1Y, eyeSize, 0, Math.PI * 2);
                ctx.arc(eye2X, eye2Y, eyeSize, 0, Math.PI * 2);
                ctx.fill();

                // Draw pupils
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(eye1X, eye1Y, eyeSize * 0.4, 0, Math.PI * 2);
                ctx.arc(eye2X, eye2Y, eyeSize * 0.4, 0, Math.PI * 2);
                ctx.fill();
            }

            // Game loop
            function gameLoop(currentTime) {
                if (!gameRunning) return;

                const deltaTime = currentTime - lastTime;
                lastTime = currentTime;

                if (gamePaused) {
                    animationId = requestAnimationFrame(gameLoop);
                    return;
                }

                // Update game state
                updateGame(deltaTime);

                // Draw game
                drawGame();

                // Continue loop
                animationId = requestAnimationFrame(gameLoop);
            }

            // Update game state
            function updateGame(deltaTime) {
                // Update direction (with anti-reverse)
                if ((nextDirection.x !== 0 && direction.y !== 0) ||
                    (nextDirection.y !== 0 && direction.x !== 0)) {
                    direction = nextDirection;
                }

                // Move snake
                const head = { ...snake[0] };
                head.x += direction.x;
                head.y += direction.y;

                // Check for collisions
                if (
                    head.x < 0 || head.x >= GRID_SIZE ||
                    head.y < 0 || head.y >= GRID_SIZE ||
                    snake.some(segment => segment.x === head.x && segment.y === head.y)
                ) {
                    gameOver();
                    return;
                }

                // Check if food eaten
                if (head.x === food.x && head.y === food.y) {
                    // Add particle effect
                    createParticles(head.x, head.y);

                    // Increase score
                    score += 10;
                    scoreDisplay.textContent = `Score: ${score}`;

                    // Update best score
                    if (score > bestScore) {
                        bestScore = score;
                        bestScoreDisplay.textContent = `Best: ${bestScore}`;
                        localStorage.setItem('snakeBestScore', bestScore);
                    }

                    // Add new segment
                    snake.unshift(head);
                } else {
                    // Move snake (remove tail if no food eaten)
                    snake.unshift(head);
                    snake.pop();
                }

                // Speed up slightly as score increases
                if (score > 0 && score % 50 === 0) {
                    gameSpeed = Math.max(50, GAME_SPEED - (score / 100));
                }
            }

            // Create particle effect
            function createParticles(x, y) {
                const particleCount = 15;
                for (let i = 0; i < particleCount; i++) {
                    const angle = Math.random() * Math.PI * 2;
                    const velocity = 2 + Math.random() * 3;
                    const size = 2 + Math.random() * 3;

                    particles.push({
                        x: x * CELL_SIZE + CELL_SIZE / 2,
                        y: y * CELL_SIZE + CELL_SIZE / 2,
                        vx: Math.cos(angle) * velocity,
                        vy: Math.sin(angle) * velocity,
                        size,
                        alpha: 0.8,
                        life: 100
                    });
                }
            }

            // Update particles
            function updateParticles() {
                particles.forEach((particle, index) => {
                    particle.x += particle.vx;
                    particle.y += particle.vy;
                    particle.alpha -= 0.02;
                    particle.life -= 1;

                    // Remove dead particles
                    if (particle.alpha <= 0 || particle.life <= 0) {
                        particles.splice(index, 1);
                    }
                });
            }

            // Game over
            function gameOver() {
                gameRunning = false;
                finalScoreDisplay.textContent = `Score: ${score}`;
                gameOverlay.style.display = 'flex';
                instructions.style.display = 'none';
                cancelAnimationFrame(animationId);
            }

            // Restart game
            function restartGame() {
                gameOverlay.style.display = 'none';
                initGame();
            }

            // Pause game
            function togglePause() {
                gamePaused = !gamePaused;
                if (gamePaused) {
                    instructions.style.display = 'block';
                    instructions.textContent = 'Game Paused - Press P to resume';
                } else {
                    instructions.style.display = 'block';
                    instructions.textContent = 'Click or press a key to start';
                }
            }

            // Handle keyboard input
            function handleKeyDown(e) {
                // Only accept input if game is running and not paused
                if (!gameRunning || gamePaused) return;

                // Prevent default for arrow keys to stop page scrolling
                if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'w', 'a', 's', 'd'].includes(e.key)) {
                    e.preventDefault();
                }

                // Set next direction based on key
                switch (e.key) {
                    case 'ArrowUp':
                    case 'w':
                        if (direction.y === 0) nextDirection = { x: 0, y: -1 };
                        break;
                    case 'ArrowDown':
                    case 's':
                        if (direction.y === 0) nextDirection = { x: 0, y: 1 };
                        break;
                    case 'ArrowLeft':
                    case 'a':
                        if (direction.x === 0) nextDirection = { x: -1, y: 0 };
                        break;
                    case 'ArrowRight':
                    case 'd':
                        if (direction.x === 0) nextDirection = { x: 1, y: 0 };
                        break;
                    case ' ':
                    case 'Enter':
                        if (!gameRunning) restartGame();
                        break;
                    case 'p':
                        togglePause();
                        break;
                }
            }

            // Handle canvas click to start
            function handleCanvasClick() {
                if (!gameRunning) {
                    restartGame();
                }
            }

            // Event listeners
            canvas.addEventListener('click', handleCanvasClick);
            document.addEventListener('keydown', handleKeyDown);

            // Start game when page loads
            initGame();

            // Clean up on page unload
            window.addEventListener('beforeunload', () => {
                cancelAnimationFrame(animationId);
            });
        });
    </script>
</body>
</html>