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: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    user-select: none;
  }
  #gameCanvas {
    background: #000;
    display: block;
  }
  #overlay {
    position: absolute;
    text-align: center;
    pointer-events: none;
  }
  #startMessage {
    font-size: 24px;
    background: rgba(0,0,0,0.7);
    padding: 20px 30px;
    border-radius: 10px;
    display: none;
  }
  #gameOver {
    font-size: 32px;
    background: rgba(100,0,0,0.8);
    padding: 30px 40px;
    border-radius: 15px;
    display: none;
  }
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="overlay">
  <div id="startMessage">Click or press a key to start</div>
  <div id="gameOver">Game Over! Click to restart</div>
</div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startMessage = document.getElementById('startMessage');
const gameOverMessage = document.getElementById('gameOver');

// Set canvas size
function resizeCanvas() {
  canvas.width = Math.min(1280, window.innerWidth);
  canvas.height = Math.min(800, window.innerHeight);
  if (canvas.width > canvas.height * 1.6) {
    canvas.width = canvas.height * 1.6;
  }
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

// Game state
let gameActive = false;
let demoMode = true;
let gameOver = false;
let score = 0;
let lives = 3;

// Ball properties
const ball = {
  x: 0,
  y: 0,
  radius: 8,
  dx: 0,
  dy: 0,
  speed: 6
};

// Paddle (hamburger) properties
const paddle = {
  width: 120,
  height: 20,
  x: 0,
  y: 0,
  speed: 10,
  isMovingLeft: false,
  isMovingRight: false
};

// Bricks
const brickRowCount = 5;
const brickColumnCount = 12;
const brickWidth = 80;
const brickHeight = 30;
const brickPadding = 10;
const brickOffsetTop = 60;
const brickOffsetLeft = 30;

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

// Hearts particles
const particles = [];

// Initialize game
function initGame() {
  // Reset ball
  ball.x = canvas.width / 2;
  ball.y = canvas.height - 50;
  ball.dx = (Math.random() > 0.5 ? 1 : -1) * ball.speed;
  ball.dy = -ball.speed;

  // Reset paddle
  paddle.x = (canvas.width - paddle.width) / 2;
  paddle.y = canvas.height - 30;

  // Reset bricks
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      bricks[c][r].status = 1;
    }
  }

  // Reset particles
  particles.length = 0;

  // Reset game state
  score = 0;
  lives = 3;
  gameOver = false;
  gameActive = true;
}

// Draw heart particle
function drawHeart(x, y, size) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.bezierCurveTo(x, y - size * 1.5, x - size, y - size * 2, x, y - size * 2.5);
  ctx.bezierCurveTo(x + size, y - size * 2, x, y - size * 1.5, x, y);
  ctx.closePath();
}

// Draw hamburger paddle
function drawPaddle() {
  // Bottom bun
  ctx.fillStyle = '#D2691E';
  ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);

  // Lettuce
  ctx.fillStyle = '#7CFC00';
  ctx.fillRect(paddle.x + 5, paddle.y - 10, paddle.width - 10, 5);

  // Patty
  ctx.fillStyle = '#8B4513';
  ctx.fillRect(paddle.x + 10, paddle.y - 15, paddle.width - 20, 5);

  // Cheese
  ctx.fillStyle = '#FFD700';
  ctx.fillRect(paddle.x + 15, paddle.y - 20, paddle.width - 30, 5);

  // Top bun
  ctx.fillStyle = '#D2691E';
  ctx.fillRect(paddle.x + 20, paddle.y - 25, paddle.width - 40, 5);

  // Sesame seeds
  ctx.fillStyle = '#F5DEB3';
  for (let i = 0; i < 15; i++) {
    const seedX = paddle.x + 10 + Math.random() * (paddle.width - 20);
    const seedY = paddle.y - 5 - Math.random() * 5;
    ctx.beginPath();
    ctx.arc(seedX, seedY, 1.5, 0, Math.PI * 2);
    ctx.fill();
  }
}

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

// Draw brick
function drawBrick(c, r) {
  const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
  const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;

  // Heart shape for brick
  ctx.beginPath();
  ctx.moveTo(brickX + brickWidth / 2, brickY);
  ctx.bezierCurveTo(brickX + brickWidth, brickY, brickX + brickWidth, brickY + brickHeight / 2, brickX + brickWidth / 2, brickY + brickHeight);
  ctx.bezierCurveTo(brickX, brickY + brickHeight / 2, brickX, brickY, brickX + brickWidth / 2, brickY);
  ctx.closePath();

  // Different colors for different rows
  const hue = (r / brickRowCount) * 120;
  ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;
  ctx.fill();
}

// Draw particles
function drawParticles() {
  particles.forEach(particle => {
    ctx.globalAlpha = particle.alpha;
    drawHeart(particle.x, particle.y, particle.size);
    ctx.fillStyle = `hsl(${particle.hue}, 80%, 60%)`;
    ctx.fill();
  });
  ctx.globalAlpha = 1;
}

// Collision detection
function collisionDetection() {
  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 > c * (brickWidth + brickPadding) + brickOffsetLeft &&
          ball.x < c * (brickWidth + brickPadding) + brickOffsetLeft + brickWidth &&
          ball.y > r * (brickHeight + brickPadding) + brickOffsetTop &&
          ball.y < r * (brickHeight + brickPadding) + brickOffsetTop + brickHeight
        ) {
          brick.status = 0;
          score++;

          // Create heart explosion
          for (let i = 0; i < 30; i++) {
            particles.push({
              x: c * (brickWidth + brickPadding) + brickOffsetLeft + brickWidth / 2,
              y: r * (brickHeight + brickPadding) + brickOffsetTop + brickHeight / 2,
              dx: (Math.random() - 0.5) * 8,
              dy: (Math.random() - 0.5) * 8,
              size: 3 + Math.random() * 5,
              hue: (r / brickRowCount) * 120,
              alpha: 1,
              life: 100
            });
          }

          // Bounce
          ball.dy = -ball.dy;
        }
      }
    }
  }
}

// Update particles
function updateParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    const p = particles[i];
    p.x += p.dx;
    p.y += p.dy;
    p.alpha -= 0.01;
    p.life--;

    if (p.alpha <= 0 || p.life <= 0) {
      particles.splice(i, 1);
    }
  }
}

// Game loop
function draw() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw bricks
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status === 1) {
        drawBrick(c, r);
      }
    }
  }

  // Draw particles
  drawParticles();

  // Draw paddle
  drawPaddle();

  // Draw ball
  drawBall();

  // Draw score
  ctx.fillStyle = '#fff';
  ctx.font = '20px Arial';
  ctx.fillText(`Score: ${score}`, 20, 30);

  // Draw lives
  ctx.fillText(`Lives: ${lives}`, canvas.width - 100, 30);

  // Demo mode indicator
  if (demoMode && !gameActive) {
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('Demo Mode', canvas.width / 2, canvas.height / 2);
    ctx.textAlign = 'left';
  }

  // Game over check
  if (gameOver) {
    gameActive = false;
    gameOverMessage.style.display = 'block';
  }

  // Win check
  if (score >= brickRowCount * brickColumnCount) {
    gameOver = true;
    gameOverMessage.textContent = 'You Win! Click to restart';
    gameOverMessage.style.background = 'rgba(0,100,0,0.8)';
    gameOverMessage.style.display = 'block';
  }

  // Move ball
  if (gameActive) {
    ball.x += ball.dx;
    ball.y += ball.dy;

    // Wall collision (left/right)
    if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
      ball.dx = -ball.dx;
    }

    // Wall collision (top)
    if (ball.y - ball.radius < 0) {
      ball.dy = -ball.dy;
    }

    // Paddle collision
    if (
      ball.y + ball.radius > paddle.y &&
      ball.y - ball.radius < paddle.y + paddle.height &&
      ball.x > paddle.x &&
      ball.x < paddle.x + paddle.width
    ) {
      // Add some angle based on where ball hits paddle
      const hitPosition = (ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
      ball.dx = hitPosition * ball.speed;
      ball.dy = -Math.abs(ball.dy);
      ball.dy = -Math.sqrt(ball.speed * ball.speed - ball.dx * ball.dx);
    }

    // Bottom wall (lose life)
    if (ball.y + ball.radius > canvas.height) {
      lives--;
      if (lives <= 0) {
        gameOver = true;
      } else {
        // Reset ball
        ball.x = canvas.width / 2;
        ball.y = canvas.height - 50;
        ball.dx = (Math.random() > 0.5 ? 1 : -1) * ball.speed;
        ball.dy = -ball.speed;
      }
    }

    collisionDetection();
    updateParticles();
  }

  requestAnimationFrame(draw);
}

// Demo AI for paddle
function demoAIMove() {
  if (!demoMode || gameActive) return;

  // Simple AI: follow the ball
  const targetX = ball.x;
  if (targetX < paddle.x + paddle.width / 2 - 20) {
    paddle.isMovingLeft = true;
    paddle.isMovingRight = false;
  } else if (targetX > paddle.x + paddle.width / 2 + 20) {
    paddle.isMovingRight = true;
    paddle.isMovingLeft = false;
  } else {
    paddle.isMovingLeft = false;
    paddle.isMovingRight = false;
  }
}

// Keyboard controls
document.addEventListener('keydown', (e) => {
  if (!gameActive && !gameOver) {
    initGame();
    gameActive = true;
    demoMode = false;
    startMessage.style.display = 'none';
    gameOverMessage.style.display = 'none';
    gameOverMessage.style.background = 'rgba(100,0,0,0.8)';
  }

  if (gameOver) {
    initGame();
    gameOverMessage.style.display = 'none';
    return;
  }

  if (e.key === 'ArrowLeft') {
    paddle.isMovingLeft = true;
    paddle.isMovingRight = false;
  } else if (e.key === 'ArrowRight') {
    paddle.isMovingRight = true;
    paddle.isMovingLeft = false;
  }
});

document.addEventListener('keyup', (e) => {
  if (e.key === 'ArrowLeft') {
    paddle.isMovingLeft = false;
  } else if (e.key === 'ArrowRight') {
    paddle.isMovingRight = false;
  }
});

// Mouse/touch controls
canvas.addEventListener('mousemove', (e) => {
  if (!gameActive && !gameOver) return;

  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  paddle.x = mouseX - paddle.width / 2;

  // Keep paddle in bounds
  if (paddle.x < 0) paddle.x = 0;
  if (paddle.x + paddle.width > canvas.width) {
    paddle.x = canvas.width - paddle.width;
  }
});

canvas.addEventListener('click', () => {
  if (!gameActive && !gameOver) {
    initGame();
    gameActive = true;
    demoMode = false;
    startMessage.style.display = 'none';
    gameOverMessage.style.display = 'none';
    gameOverMessage.style.background = 'rgba(100,0,0,0.8)';
  } else if (gameOver) {
    initGame();
    gameOverMessage.style.display = 'none';
  }
});

// Start demo mode
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = 3;
ball.dy = -3;

draw();
</script>
</body>
</html>