Mistral Small 4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hamburger Breakout</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
  }
  #game {
    position: relative;
    width: 800px;
    height: 600px;
    background: #000;
    overflow: hidden;
  }
  #start-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    background: rgba(0,0,0,0.7);
    z-index: 10;
  }
  #start-screen.hidden {
    display: none;
  }
  #score-display {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 20px;
    z-index: 5;
  }
  #lives-display {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 20px;
    z-index: 5;
  }
  .paddle {
    position: absolute;
    width: 120px;
    height: 60px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><rect x="10" y="10" width="100" height="40" fill="%23D2691E"/><rect x="20" y="15" width="80" height="30" fill="%23F4A460"/><circle cx="30" cy="25" r="5" fill="%23FFD700"/><circle cx="90" cy="25" r="5" fill="%23FFD700"/><rect x="40" y="20" width="40" height="20" fill="%23FF6347"/></svg>') no-repeat center;
    background-size: contain;
    z-index: 3;
  }
  .ball {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    z-index: 2;
  }
  .brick {
    position: absolute;
    width: 70px;
    height: 30px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    border-radius: 5px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  .heart {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff6b9d;
    border-radius: 50%;
    z-index: 4;
    box-shadow: 0 0 0 0 #ff6b9d;
    animation: pulse 0.5s infinite;
  }
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @media (max-width: 768px) {
    #game {
      width: 100%;
      height: 100vh;
    }
    .paddle { width: 80px; height: 40px; }
    .ball { width: 8px; height: 8px; }
    .brick { width: 50px; height: 20px; font-size: 10px; }
  }
</style>
</head>
<body>
<div id="game">
  <div id="score-display">Score: 0</div>
  <div id="lives-display">Lives: 3</div>
  <div id="start-screen">
    Click or press a key to start
  </div>
  <div class="paddle"></div>
  <div class="ball"></div>
</div>

<script>
(function() {
  const game = document.getElementById('game');
  const paddle = document.querySelector('.paddle');
  const ball = document.querySelector('.ball');
  const startScreen = document.getElementById('start-screen');
  const scoreDisplay = document.getElementById('score-display');
  const livesDisplay = document.getElementById('lives-display');

  let gameActive = false;
  let score = 0;
  let lives = 3;
  let bricks = [];
  let hearts = [];
  let paddleX = 0;
  let ballX = 0, ballY = 0;
  let ballSpeedX = 4, ballSpeedY = -4;
  let animationId = null;
  let lastTime = 0;

  // Initialize game
  function initGame() {
    score = 0;
    lives = 3;
    scoreDisplay.textContent = `Score: ${score}`;
    livesDisplay.textContent = `Lives: ${lives}`;

    // Clear existing bricks and hearts
    document.querySelectorAll('.brick').forEach(b => b.remove());
    document.querySelectorAll('.heart').forEach(h => h.remove());
    bricks = [];
    hearts = [];

    // Create bricks
    const rows = 5;
    const cols = 10;
    const brickWidth = 70;
    const brickHeight = 30;
    const padding = 10;
    const offsetTop = 60;
    const offsetLeft = (800 - cols * (brickWidth + padding)) / 2;

    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const brick = document.createElement('div');
        brick.className = 'brick';
        brick.style.left = `${offsetLeft + c * (brickWidth + padding)}px`;
        brick.style.top = `${offsetTop + r * (brickHeight + padding)}px`;
        brick.dataset.row = r;
        brick.dataset.col = c;
        brick.dataset.strength = 1;
        game.appendChild(brick);
        bricks.push(brick);
      }
    }

    // Position paddle and ball
    paddleX = (800 - 120) / 2;
    paddle.style.left = `${paddleX}px`;
    paddle.style.bottom = '20px';

    ballX = 400;
    ballY = 500;
    ball.style.left = `${ballX}px`;
    ball.style.bottom = `${ballY}px`;
  }

  // Create heart explosion
  function createHeartExplosion(x, y) {
    for (let i = 0; i < 30; i++) {
      const heart = document.createElement('div');
      heart.className = 'heart';
      heart.style.left = `${x - 4 + Math.random() * 16}px`;
      heart.style.bottom = `${y - 4 + Math.random() * 16}px`;
      heart.style.background = `hsl(${Math.random() * 60 + 0}, 100%, 60%)`;
      game.appendChild(heart);
      hearts.push(heart);

      // Random velocity
      const vx = (Math.random() - 0.5) * 8;
      const vy = (Math.random() - 0.5) * 8;

      // Animate heart
      let posX = parseFloat(heart.style.left);
      let posY = parseFloat(heart.style.bottom);
      let opacity = 1;

      function updateHeart() {
        posX += vx;
        posY += vy;
        opacity -= 0.01;

        heart.style.left = `${posX}px`;
        heart.style.bottom = `${posY}px`;
        heart.style.opacity = opacity;

        if (opacity > 0) {
          requestAnimationFrame(updateHeart);
        } else {
          heart.remove();
          hearts = hearts.filter(h => h !== heart);
        }
      }

      updateHeart();
    }
  }

  // Game loop
  function gameLoop(timestamp) {
    if (!gameActive) return;

    if (!lastTime) lastTime = timestamp;
    const deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    // Move paddle with mouse/touch
    game.addEventListener('mousemove', (e) => {
      if (!gameActive) return;
      const rect = game.getBoundingClientRect();
      paddleX = e.clientX - rect.left - 60;
      paddleX = Math.max(0, Math.min(800 - 120, paddleX));
      paddle.style.left = `${paddleX}px`;
    });

    // Ball movement
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // Wall collision
    if (ballX <= 0 || ballX >= 800 - 12) {
      ballSpeedX = -ballSpeedX;
    }
    if (ballY >= 600 - 12) {
      // Game over
      lives--;
      livesDisplay.textContent = `Lives: ${lives}`;
      if (lives <= 0) {
        gameOver();
        return;
      }
      resetBall();
    }
    if (ballY <= 0) {
      ballSpeedY = -ballSpeedY;
    }

    // Paddle collision
    if (
      ballY <= 600 - 20 &&
      ballY >= 600 - 80 &&
      ballX >= paddleX &&
      ballX <= paddleX + 120
    ) {
      ballSpeedY = -Math.abs(ballSpeedY);
      // Add some angle based on where ball hits paddle
      const hitPos = (ballX - paddleX) / 120;
      ballSpeedX = (hitPos - 0.5) * 8;
    }

    // Brick collision
    bricks.forEach(brick => {
      if (brick.style.display !== 'none') {
        const brickRect = brick.getBoundingClientRect();
        if (
          ballX + 12 >= parseFloat(brick.style.left) &&
          ballX <= parseFloat(brick.style.left) + 70 &&
          ballY + 12 >= parseFloat(brick.style.top) &&
          ballY <= parseFloat(brick.style.top) + 30
        ) {
          // Bounce
          if (ballX + 6 < parseFloat(brick.style.left) || ballX + 6 > parseFloat(brick.style.left) + 70) {
            ballSpeedX = -ballSpeedX;
          } else {
            ballSpeedY = -ballSpeedY;
          }

          // Reduce brick strength
          let strength = parseInt(brick.dataset.strength) - 1;
          if (strength <= 0) {
            brick.style.display = 'none';
            score += 10;
            scoreDisplay.textContent = `Score: ${score}`;
            createHeartExplosion(
              parseFloat(brick.style.left) + 35,
              parseFloat(brick.style.top) + 15
            );
          } else {
            brick.dataset.strength = strength;
            brick.style.background = `linear-gradient(135deg, #ff8a80, #ff7043)`;
          }
        }
      }
    });

    // Check win condition
    if (bricks.every(b => b.style.display === 'none')) {
      win();
      return;
    }

    // Update ball position
    ball.style.left = `${ballX}px`;
    ball.style.bottom = `${ballY}px`;

    animationId = requestAnimationFrame(gameLoop);
  }

  function resetBall() {
    ballX = 400;
    ballY = 500;
    ballSpeedX = 4 * (Math.random() > 0.5 ? 1 : -1);
    ballSpeedY = -4;
    ball.style.left = `${ballX}px`;
    ball.style.bottom = `${ballY}px`;
  }

  function gameOver() {
    gameActive = false;
    cancelAnimationFrame(animationId);
    startScreen.textContent = 'Game Over! Click to restart';
    startScreen.classList.remove('hidden');
  }

  function win() {
    gameActive = false;
    cancelAnimationFrame(animationId);
    startScreen.textContent = 'You Win! Click to play again';
    startScreen.classList.remove('hidden');
  }

  // Start game
  startScreen.addEventListener('click', () => {
    if (!gameActive) {
      gameActive = true;
      startScreen.classList.add('hidden');
      initGame();
      gameLoop(0);
    }
  });

  // Keyboard support
  document.addEventListener('keydown', (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      if (!gameActive) {
        e.preventDefault();
        startScreen.click();
      }
    }
  });

  // Touch support
  game.addEventListener('touchmove', (e) => {
    e.preventDefault();
    if (!gameActive) return;
    const rect = game.getBoundingClientRect();
    const touch = e.touches[0];
    paddleX = touch.clientX - rect.left - 60;
    paddleX = Math.max(0, Math.min(800 - 120, paddleX));
    paddle.style.left = `${paddleX}px`;
  });
})();
</script>
</body>
</html>