Mistral Small 4

<!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: #1a1a2e;
      font-family: 'Courier New', monospace;
      color: #e6e6e6;
      overflow: hidden;
    }

    #game-container {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 500px;
    }

    #game-canvas {
      background: #0f0f1a;
      border-radius: 8px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    #overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    #overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    #overlay h2 {
      font-size: 2.5rem;
      margin: 0 0 10px 0;
      color: #ff6b6b;
    }

    #overlay p {
      font-size: 1.2rem;
      margin: 0 0 20px 0;
    }

    #start-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.5rem;
      color: #a5a5a5;
      opacity: 0.8;
      pointer-events: none;
    }

    #score-display {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 1.2rem;
      color: #a5a5a5;
    }

    #best-score-display {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 1.2rem;
      color: #a5a5a5;
    }

    #pause-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.5rem;
      color: #ffd700;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    #pause-indicator.active {
      opacity: 0.8;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <canvas id="game-canvas" width="500" height="500"></canvas>
    <div id="score-display">Score: 0</div>
    <div id="best-score-display">Best: 0</div>
    <div id="start-message">Click or press a key to start</div>
    <div id="pause-indicator">PAUSED</div>
    <div id="overlay">
      <h2>Game Over</h2>
      <p>Your Score: <span id="final-score">0</span></p>
      <p>Best Score: <span id="final-best-score">0</span></p>
      <p>Press Space or Enter to restart</p>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('game-canvas');
      const ctx = canvas.getContext('2d');
      const overlay = document.getElementById('overlay');
      const finalScore = document.getElementById('final-score');
      const finalBestScore = document.getElementById('final-best-score');
      const scoreDisplay = document.getElementById('score-display');
      const bestScoreDisplay = document.getElementById('best-score-display');
      const startMessage = document.getElementById('start-message');
      const pauseIndicator = document.getElementById('pause-indicator');

      const GRID_SIZE = 20;
      const CELL_SIZE = canvas.width / GRID_SIZE;
      const GRID = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(0));

      let snake = [];
      let food = { x: 0, y: 0 };
      let direction = { x: 0, y: 0 };
      let nextDirection = { x: 0, y: 0 };
      let score = 0;
      let bestScore = localStorage.getItem('snakeBestScore') || 0;
      let gameActive = false;
      let gamePaused = false;
      let particles = [];
      let lastTime = 0;
      let gameSpeed = 150; // ms per frame
      let lastMoveTime = 0;

      // Initialize game
      function initGame() {
        snake = [
          { x: Math.floor(GRID_SIZE / 2), y: Math.floor(GRID_SIZE / 2) },
          { x: Math.floor(GRID_SIZE / 2) - 1, y: Math.floor(GRID_SIZE / 2) },
          { x: Math.floor(GRID_SIZE / 2) - 2, y: Math.floor(GRID_SIZE / 2) }
        ];

        direction = { x: 1, y: 0 };
        nextDirection = { x: 1, y: 0 };
        score = 0;
        gameActive = false;
        gamePaused = false;
        particles = [];

        spawnFood();
        updateScoreDisplay();
        drawGame();
      }

      // Spawn food at random position not on snake
      function spawnFood() {
        const availableCells = [];
        for (let y = 0; y < GRID_SIZE; y++) {
          for (let x = 0; x < GRID_SIZE; x++) {
            if (!snake.some(segment => segment.x === x && segment.y === y)) {
              availableCells.push({ x, y });
            }
          }
        }

        if (availableCells.length > 0) {
          const randomIndex = Math.floor(Math.random() * availableCells.length);
          food = availableCells[randomIndex];
        }
      }

      // Update score display
      function updateScoreDisplay() {
        scoreDisplay.textContent = `Score: ${score}`;
        bestScoreDisplay.textContent = `Best: ${bestScore}`;
        finalScore.textContent = score;
        finalBestScore.textContent = bestScore;
      }

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

        // Draw grid
        ctx.strokeStyle = '#1a1a2e';
        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 food
        ctx.fillStyle = '#ff6b6b';
        ctx.beginPath();
        const centerX = food.x * CELL_SIZE + CELL_SIZE / 2;
        const centerY = food.y * CELL_SIZE + CELL_SIZE / 2;
        const radius = CELL_SIZE / 2 * 0.8;
        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
        ctx.fill();

        // Draw snake
        snake.forEach((segment, index) => {
          const isHead = index === 0;
          const segmentX = segment.x * CELL_SIZE;
          const segmentY = segment.y * CELL_SIZE;

          // Body segment
          if (!isHead) {
            ctx.fillStyle = '#4ecdc4';
            ctx.fillRect(segmentX, segmentY, CELL_SIZE, CELL_SIZE);

            // Add some variation to body segments
            ctx.fillStyle = '#26a69a';
            ctx.fillRect(segmentX + 2, segmentY + 2, CELL_SIZE - 4, CELL_SIZE - 4);
          }
          // Head
          else {
            // Head base
            ctx.fillStyle = '#4ecdc4';
            ctx.fillRect(segmentX, segmentY, CELL_SIZE, CELL_SIZE);

            // Head details based on direction
            ctx.fillStyle = '#26a69a';
            ctx.fillRect(segmentX + 2, segmentY + 2, CELL_SIZE - 4, CELL_SIZE - 4);

            // Eyes
            ctx.fillStyle = '#ffffff';
            const eyeSize = CELL_SIZE / 4;
            const eyeOffsetX = direction.x * (CELL_SIZE / 3);
            const eyeOffsetY = direction.y * (CELL_SIZE / 3);

            // Left eye
            ctx.beginPath();
            ctx.arc(
              segmentX + CELL_SIZE / 3 + eyeOffsetX,
              segmentY + CELL_SIZE / 3 + eyeOffsetY,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.fill();

            // Right eye
            ctx.beginPath();
            ctx.arc(
              segmentX + (CELL_SIZE * 2 / 3) + eyeOffsetX,
              segmentY + CELL_SIZE / 3 + eyeOffsetY,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.fill();

            // Pupils
            ctx.fillStyle = '#000000';
            ctx.beginPath();
            ctx.arc(
              segmentX + CELL_SIZE / 3 + eyeOffsetX + (direction.x * eyeSize / 2),
              segmentY + CELL_SIZE / 3 + eyeOffsetY + (direction.y * eyeSize / 2),
              eyeSize / 2,
              0,
              Math.PI * 2
            );
            ctx.fill();

            ctx.beginPath();
            ctx.arc(
              segmentX + (CELL_SIZE * 2 / 3) + eyeOffsetX + (direction.x * eyeSize / 2),
              segmentY + CELL_SIZE / 3 + eyeOffsetY + (direction.y * eyeSize / 2),
              eyeSize / 2,
              0,
              Math.PI * 2
            );
            ctx.fill();
          }
        });

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

      // Update game state
      function updateGame(currentTime) {
        if (!gameActive || gamePaused) return;

        // Control game speed
        if (currentTime - lastMoveTime < gameSpeed) return;
        lastMoveTime = currentTime;

        // Update direction
        direction = { ...nextDirection };

        // Move snake
        const head = { x: snake[0].x + direction.x, y: snake[0].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;
        }

        // Add new head
        snake.unshift(head);

        // Check if food eaten
        if (head.x === food.x && head.y === food.y) {
          score += 10;
          if (score > bestScore) {
            bestScore = score;
            localStorage.setItem('snakeBestScore', bestScore);
          }
          updateScoreDisplay();

          // Create particle burst
          for (let i = 0; i < 20; i++) {
            particles.push({
              x: head.x,
              y: head.y,
              size: Math.random() * 3 + 1,
              alpha: 1,
              velocity: {
                x: (Math.random() - 0.5) * 2,
                y: (Math.random() - 0.5) * 2
              }
            });
          }

          spawnFood();
        } else {
          // Remove tail if no food eaten
          snake.pop();
        }

        // Update particles
        particles.forEach(particle => {
          particle.x += particle.velocity.x;
          particle.y += particle.velocity.y;
          particle.alpha -= 0.02;
        });

        // Remove dead particles
        particles = particles.filter(particle => particle.alpha > 0);

        drawGame();
      }

      // Game over
      function gameOver() {
        gameActive = false;
        overlay.classList.add('active');
      }

      // Restart game
      function restartGame() {
        initGame();
        overlay.classList.remove('active');
        startMessage.style.display = 'none';
        pauseIndicator.classList.remove('active');
      }

      // Pause game
      function togglePause() {
        if (!gameActive) return;

        gamePaused = !gamePaused;
        pauseIndicator.classList.toggle('active');

        if (gamePaused) {
          startMessage.textContent = 'PAUSED - Click or press a key to resume';
          startMessage.style.display = 'block';
        } else {
          startMessage.style.display = 'none';
        }
      }

      // Start game
      function startGame() {
        if (gameActive) return;

        gameActive = true;
        startMessage.style.display = 'none';
        initGame();
      }

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

        if (!gameActive && !gamePaused) {
          startGame();
          return;
        }

        if (gamePaused && e.key === 'p') {
          togglePause();
          return;
        }

        if (gameActive) {
          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':
              gameOver();
              break;
            case 'p':
              togglePause();
              break;
          }
        }
      }

      // Handle click to start
      canvas.addEventListener('click', startGame);

      // Set up event listeners
      document.addEventListener('keydown', handleKeyDown);

      // Game loop
      function gameLoop(currentTime) {
        updateGame(currentTime);
        requestAnimationFrame(gameLoop);
      }

      // Initialize and start game loop
      initGame();
      requestAnimationFrame(gameLoop);
    });
  </script>
</body>
</html>