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</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #111;
      color: #fff;
      font-family: 'Courier New', monospace;
      overflow: hidden;
      user-select: none;
    }
    #game-container {
      position: relative;
      width: 400px;
      height: 400px;
    }
    #game-canvas {
      background: #000;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    }
    #ui-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }
    #start-message, #game-over-message {
      font-size: 24px;
      margin-bottom: 20px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
    #score-display {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 16px;
      color: #0f0;
    }
    #best-score-display {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 16px;
      color: #0f0;
    }
    #pause-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: rgba(255, 255, 255, 0.8);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(0, 255, 0, 0.8);
      border-radius: 50%;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <canvas id="game-canvas" width="400" height="400"></canvas>
    <div id="score-display">Score: 0</div>
    <div id="best-score-display">Best: 0</div>
    <div id="ui-overlay">
      <div id="start-message">Click or press a key to start</div>
      <div id="game-over-message">Game Over! Score: 0<br>Click or press a key to restart</div>
    </div>
    <div id="pause-message">Paused</div>
  </div>

  <script>
    const canvas = document.getElementById('game-canvas');
    const ctx = canvas.getContext('2d');
    const scoreDisplay = document.getElementById('score-display');
    const bestScoreDisplay = document.getElementById('best-score-display');
    const uiOverlay = document.getElementById('ui-overlay');
    const startMessage = document.getElementById('start-message');
    const gameOverMessage = document.getElementById('game-over-message');
    const pauseMessage = document.getElementById('pause-message');

    const GRID_SIZE = 20;
    const CELL_SIZE = canvas.width / GRID_SIZE;
    const COLORS = {
      snakeHead: '#0f0',
      snakeBody: '#0a0',
      food: '#f00',
      wall: '#333',
      particle: 'rgba(0, 255, 0, 0.8)'
    };

    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 gameOver = true;
    let paused = false;
    let particles = [];
    let lastTime = 0;
    let gameSpeed = 150;
    let lastMoveTime = 0;

    bestScoreDisplay.textContent = `Best: ${bestScore}`;

    function initGame() {
      snake = [
        { x: 10, y: 10, dir: { x: 1, y: 0 } },
        { x: 9, y: 10, dir: { x: 1, y: 0 } },
        { x: 8, y: 10, dir: { x: 1, y: 0 } }
      ];
      direction = { x: 1, y: 0 };
      nextDirection = { x: 1, y: 0 };
      score = 0;
      gameOver = false;
      paused = false;
      particles = [];
      spawnFood();
      updateScore();
      gameOverMessage.style.opacity = '0';
      pauseMessage.style.opacity = '0';
      uiOverlay.style.pointerEvents = 'none';
    }

    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];
      }
    }

    function updateScore() {
      scoreDisplay.textContent = `Score: ${score}`;
      if (score > bestScore) {
        bestScore = score;
        bestScoreDisplay.textContent = `Best: ${bestScore}`;
        localStorage.setItem('snakeBestScore', bestScore);
      }
    }

    function gameLoop(currentTime) {
      if (!gameOver && !paused) {
        if (currentTime - lastMoveTime >= gameSpeed) {
          moveSnake();
          lastMoveTime = currentTime;
        }
      }

      render();
      requestAnimationFrame(gameLoop);
    }

    function moveSnake() {
      // Update direction
      direction = { ...nextDirection };

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

      // Check 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 = true;
        gameOverMessage.style.opacity = '1';
        gameOverMessage.innerHTML = `Game Over! Score: ${score}<br>Click or press a key to restart`;
        uiOverlay.style.pointerEvents = 'auto';
        return;
      }

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

      // Check food collision
      if (head.x === food.x && head.y === food.y) {
        score += 10;
        updateScore();
        createParticles(head.x, head.y);
        spawnFood();

        // Increase speed slightly every 50 points
        if (score % 50 === 0 && gameSpeed > 80) {
          gameSpeed -= 5;
        }
      } else {
        // Remove tail if no food eaten
        snake.pop();
      }
    }

    function createParticles(x, y) {
      for (let i = 0; i < 20; i++) {
        particles.push({
          x: x * CELL_SIZE + CELL_SIZE / 2,
          y: y * CELL_SIZE + CELL_SIZE / 2,
          vx: (Math.random() - 0.5) * 4,
          vy: (Math.random() - 0.5) * 4,
          size: Math.random() * 3 + 2,
          life: 30
        });
      }
    }

    function updateParticles() {
      for (let i = particles.length - 1; i >= 0; i--) {
        particles[i].x += particles[i].vx;
        particles[i].y += particles[i].vy;
        particles[i].life--;

        if (particles[i].life <= 0) {
          particles.splice(i, 1);
        }
      }
    }

    function render() {
      // Clear canvas
      ctx.fillStyle = COLORS.wall;
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // Draw grid
      ctx.strokeStyle = 'rgba(0, 255, 0, 0.1)';
      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 = COLORS.food;
      ctx.beginPath();
      ctx.arc(
        food.x * CELL_SIZE + CELL_SIZE / 2,
        food.y * CELL_SIZE + CELL_SIZE / 2,
        CELL_SIZE / 2 - 2,
        0,
        Math.PI * 2
      );
      ctx.fill();

      // Draw snake
      snake.forEach((segment, index) => {
        if (index === 0) {
          // Head
          ctx.fillStyle = COLORS.snakeHead;

          // Draw head with eyes based on direction
          const eyeSize = CELL_SIZE / 5;
          const eyeOffset = CELL_SIZE / 3;

          // Draw main head
          ctx.beginPath();
          ctx.arc(
            segment.x * CELL_SIZE + CELL_SIZE / 2,
            segment.y * CELL_SIZE + CELL_SIZE / 2,
            CELL_SIZE / 2 - 2,
            0,
            Math.PI * 2
          );
          ctx.fill();

          // Draw eyes based on direction
          ctx.fillStyle = '#000';
          if (segment.dir.x === 1) { // Right
            ctx.beginPath();
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.fill();
          } else if (segment.dir.x === -1) { // Left
            ctx.beginPath();
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.fill();
          } else if (segment.dir.y === 1) { // Down
            ctx.beginPath();
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.fill();
          } else if (segment.dir.y === -1) { // Up
            ctx.beginPath();
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.arc(
              segment.x * CELL_SIZE + CELL_SIZE / 2 + eyeOffset,
              segment.y * CELL_SIZE + CELL_SIZE / 2 - eyeOffset,
              eyeSize,
              0,
              Math.PI * 2
            );
            ctx.fill();
          }
        } else {
          // Body
          ctx.fillStyle = COLORS.snakeBody;
          ctx.fillRect(
            segment.x * CELL_SIZE + 2,
            segment.y * CELL_SIZE + 2,
            CELL_SIZE - 4,
            CELL_SIZE - 4
          );
        }
      });

      // Update and draw particles
      updateParticles();
      particles.forEach(particle => {
        ctx.fillStyle = COLORS.particle;
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fill();
      });
    }

    function handleKeyDown(e) {
      if (gameOver && (e.code === 'Space' || e.code === 'Enter')) {
        initGame();
        return;
      }

      if (e.code === 'KeyP') {
        paused = !paused;
        pauseMessage.style.opacity = paused ? '1' : '0';
        return;
      }

      if (paused) return;

      // Prevent reversing
      switch (e.code) {
        case 'ArrowUp':
        case 'KeyW':
          if (direction.y !== 1) nextDirection = { x: 0, y: -1 };
          break;
        case 'ArrowDown':
        case 'KeyS':
          if (direction.y !== -1) nextDirection = { x: 0, y: 1 };
          break;
        case 'ArrowLeft':
        case 'KeyA':
          if (direction.x !== 1) nextDirection = { x: -1, y: 0 };
          break;
        case 'ArrowRight':
        case 'KeyD':
          if (direction.x !== -1) nextDirection = { x: 1, y: 0 };
          break;
      }
    }

    // Start with demo mode
    function demoMode() {
      if (!gameOver && !paused) {
        // Simple AI to demonstrate
        const head = snake[0];
        const foodDir = {
          x: food.x - head.x,
          y: food.y - head.y
        };

        // Prioritize moving toward food
        if (Math.abs(foodDir.x) > Math.abs(foodDir.y)) {
          if (foodDir.x > 0 && direction.x !== -1) {
            nextDirection = { x: 1, y: 0 };
          } else if (foodDir.x < 0 && direction.x !== 1) {
            nextDirection = { x: -1, y: 0 };
          } else if (foodDir.y > 0 && direction.y !== -1) {
            nextDirection = { x: 0, y: 1 };
          } else if (foodDir.y < 0 && direction.y !== 1) {
            nextDirection = { x: 0, y: -1 };
          }
        } else {
          if (foodDir.y > 0 && direction.y !== -1) {
            nextDirection = { x: 0, y: 1 };
          } else if (foodDir.y < 0 && direction.y !== 1) {
            nextDirection = { x: 0, y: -1 };
          } else if (foodDir.x > 0 && direction.x !== -1) {
            nextDirection = { x: 1, y: 0 };
          } else if (foodDir.x < 0 && direction.x !== 1) {
            nextDirection = { x: -1, y: 0 };
          }
        }
      }

      setTimeout(demoMode, 100);
    }

    // Initialize
    canvas.addEventListener('click', () => {
      if (gameOver || paused) {
        initGame();
      }
    });

    window.addEventListener('keydown', handleKeyDown);

    // Start demo mode
    demoMode();
    requestAnimationFrame(gameLoop);
  </script>
</body>
</html>