Mistral Small 4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hamburger Breakout</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #111;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow: hidden;
    touch-action: none;
  }
  #game {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #canvas {
    background: #000;
    border: 2px solid #444;
  }
  #start {
    position: absolute;
    font-size: 24px;
    color: #ff6b6b;
    text-shadow: 0 0 8px #ff6b6b;
    pointer-events: none;
    user-select: none;
  }
  .heart {
    position: absolute;
    color: #ff6b6b;
    font-size: 12px;
    pointer-events: none;
    user-select: none;
  }
</style>
</head>
<body>
<div id="game">
  <canvas id="canvas" width="640" height="480"></canvas>
  <div id="start">Click or press a key to start</div>
</div>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const start = document.getElementById('start');

const W = canvas.width;
const H = canvas.height;

let mouseX = W / 2;
let mouseY = H - 30;
let isPlaying = false;
let hearts = [];
let bricks = [];
let score = 0;
let lives = 3;
let brickRowCount = 5;
let brickColumnCount = 10;
let brickWidth = 55;
let brickHeight = 20;
let brickPadding = 10;
let brickOffsetTop = 60;
let brickOffsetLeft = 30;

let ball = {
  x: W / 2,
  y: H - 30,
  radius: 8,
  dx: 4,
  dy: -4
};

let paddle = {
  width: 100,
  height: 30,
  x: W / 2 - 50,
  y: H - 20
};

function initBricks() {
  bricks = [];
  for (let c = 0; c < brickColumnCount; c++) {
    bricks[c] = [];
    for (let r = 0; r < brickRowCount; r++) {
      bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
  }
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = '#ff6b6b';
  ctx.fill();
  ctx.closePath();
}

function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
  ctx.fillStyle = '#feca57';
  ctx.fill();
  ctx.closePath();

  // Hamburger bun top
  ctx.beginPath();
  ctx.ellipse(paddle.x + 25, paddle.y - 5, 20, 8, 0, 0, Math.PI * 2);
  ctx.fillStyle = '#f7b733';
  ctx.fill();
  ctx.closePath();

  // Hamburger bun bottom
  ctx.beginPath();
  ctx.ellipse(paddle.x + 75, paddle.y - 5, 20, 8, 0, 0, Math.PI * 2);
  ctx.fillStyle = '#f7b733';
  ctx.fill();
  ctx.closePath();

  // Lettuce
  ctx.beginPath();
  ctx.rect(paddle.x + 15, paddle.y - 10, 70, 5);
  ctx.fillStyle = '#51cf66';
  ctx.fill();
  ctx.closePath();

  // Patty
  ctx.beginPath();
  ctx.rect(paddle.x + 10, paddle.y - 5, 80, 8);
  ctx.fillStyle = '#8b4513';
  ctx.fill();
  ctx.closePath();

  // Cheese
  ctx.beginPath();
  ctx.rect(paddle.x + 12, paddle.y, 76, 6);
  ctx.fillStyle = '#ffd700';
  ctx.fill();
  ctx.closePath();

  // Tomato
  ctx.beginPath();
  ctx.ellipse(paddle.x + 50, paddle.y + 5, 15, 10, 0, 0, Math.PI * 2);
  ctx.fillStyle = '#ff6b6b';
  ctx.fill();
  ctx.closePath();

  // Onion
  ctx.beginPath();
  ctx.rect(paddle.x + 20, paddle.y + 5, 60, 5);
  ctx.fillStyle = '#e0e0e0';
  ctx.fill();
  ctx.closePath();
}

function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status === 1) {
        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;

        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = `hsl(${r * 60}, 70%, 60%)`;
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}

function drawScore() {
  ctx.font = '16px Arial';
  ctx.fillStyle = '#fff';
  ctx.fillText('Score: ' + score, 8, 20);
}

function drawLives() {
  ctx.font = '16px Arial';
  ctx.fillStyle = '#fff';
  ctx.fillText('Lives: ' + lives, W - 65, 20);
}

function drawHearts() {
  hearts = hearts.filter(h => h.life > 0);
  hearts.forEach(h => {
    h.x += h.dx;
    h.y += h.dy;
    h.life -= 0.02;
    ctx.globalAlpha = h.life;
    ctx.font = '12px Arial';
    ctx.fillStyle = '#ff6b6b';
    ctx.fillText('❤️', h.x, h.y);
    ctx.globalAlpha = 1;
  });
}

function collision() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      const brick = bricks[c][r];
      if (brick.status === 1) {
        if (
          ball.x > brick.x &&
          ball.x < brick.x + brickWidth &&
          ball.y > brick.y &&
          ball.y < brick.y + brickHeight
        ) {
          ball.dy = -ball.dy;
          brick.status = 0;
          score++;

          // Create explosion of hearts
          for (let i = 0; i < 30; i++) {
            hearts.push({
              x: brick.x + brickWidth / 2,
              y: brick.y + brickHeight / 2,
              dx: (Math.random() - 0.5) * 4,
              dy: (Math.random() - 0.5) * 4,
              life: 1
            });
          }
        }
      }
    }
  }
}

function paddleCollision() {
  if (
    ball.x > paddle.x &&
    ball.x < paddle.x + paddle.width &&
    ball.y > paddle.y &&
    ball.y < paddle.y + paddle.height
  ) {
    ball.dy = -Math.abs(ball.dy);
    // Add some angle based on where ball hits paddle
    const hitPos = (ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
    ball.dx = hitPos * 6;
  }
}

function update() {
  if (!isPlaying) return;

  ctx.clearRect(0, 0, W, H);

  drawBricks();
  drawBall();
  drawPaddle();
  drawScore();
  drawLives();
  drawHearts();

  ball.x += ball.dx;
  ball.y += ball.dy;

  if (ball.x < ball.radius || ball.x > W - ball.radius) {
    ball.dx = -ball.dx;
  }
  if (ball.y < ball.radius) {
    ball.dy = -ball.dy;
  } else if (ball.y > H) {
    lives--;
    if (lives <= 0) {
      isPlaying = false;
      start.style.display = 'block';
    } else {
      resetBall();
    }
  }

  collision();
  paddleCollision();

  if (bricks.every(c => c.every(r => r.status === 0))) {
    // Level complete
    brickRowCount++;
    if (brickRowCount > 8) brickRowCount = 8;
    initBricks();
    resetBall();
  }

  requestAnimationFrame(update);
}

function resetBall() {
  ball.x = W / 2;
  ball.y = H - 30;
  ball.dx = (Math.random() > 0.5 ? 1 : -1) * (3 + Math.random() * 3);
  ball.dy = -4;
}

function startGame() {
  isPlaying = true;
  start.style.display = 'none';
  score = 0;
  lives = 3;
  brickRowCount = 5;
  initBricks();
  resetBall();
  hearts = [];
  update();
}

function handleMouseMove(e) {
  if (!isPlaying) return;
  mouseX = e.clientX - canvas.offsetLeft;
  mouseX = Math.max(0, Math.min(W - paddle.width, mouseX));
  paddle.x = mouseX;
}

function handleKeyDown(e) {
  if (!isPlaying && (e.key === ' ' || e.key === 'Enter')) {
    startGame();
  }
}

canvas.addEventListener('mousemove', handleMouseMove);
window.addEventListener('keydown', handleKeyDown);
canvas.addEventListener('click', () => {
  if (!isPlaying) startGame();
});

initBricks();
update();

</script>
</body>
</html>