gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout Hamburger</title>
<style>
  html,body{margin:0;height:100%;background:#111;color:#eee;font-family:sans-serif;overflow:hidden}
  #game{display:flex;align-items:center;justify-content:center;height:100%}
  canvas{background:#222;border:2px solid #555;border-radius:8px}
  #overlay{
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.7);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:2rem;cursor:pointer;z-index:5;
    text-align:center;padding:20px;
  }
</style>
</head>
<body>
<div id="game"><canvas id="c"></canvas></div>
<div id="overlay">Click or press any key to start</div>
<script>
(() => {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');

  // responsive canvas
  function resize() {
    const w = Math.min(800, innerWidth * 0.9);
    canvas.width = w;
    canvas.height = w * 0.6;
    initObjects();
  }
  window.addEventListener('resize', resize);
  resize();

  // game state
  let paddle, ball, bricks = [], hearts = [], rows = 4, cols = 9;
  let started = false, aiActive = false;

  function initObjects() {
    // paddle as hamburger
    paddle = { w: canvas.width * 0.2, h: 20, x: (canvas.width - canvas.width * 0.2) / 2, y: canvas.height - 30 };
    // ball
    ball = { r: 8, x: canvas.width / 2, y: canvas.height - 60, dx: 3, dy: -3 };
    // bricks
    const brickW = (canvas.width - 60) / cols - 10;
    const brickH = 20;
    bricks = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        bricks.push({
          x: 30 + c * (brickW + 10),
          y: 30 + r * (brickH + 10),
          w: brickW,
          h: brickH,
          hit: false,
          color: `hsl(${Math.random()*360},70%,60%)`
        });
      }
    }
    hearts = [];
  }

  // heart particle
  function spawnHearts(x, y, color) {
    const count = 30 + Math.random()*20;
    for (let i = 0; i < count; i++) {
      const angle = Math.random()*Math.PI*2;
      const speed = Math.random()*2+1;
      hearts.push({
        x, y,
        vx: Math.cos(angle)*speed,
        vy: Math.sin(angle)*speed,
        life: 60 + Math.random()*30,
        color
      });
    }
  }

  function drawHeart(px, py, size, col, alpha) {
    ctx.save();
    ctx.translate(px, py);
    ctx.scale(size, size);
    ctx.beginPath();
    ctx.moveTo(0, -0.4);
    ctx.bezierCurveTo(0.25, -0.7, 0.6, -0.5, 0.6, -0.15);
    ctx.bezierCurveTo(0.6, 0.2, 0.25, 0.5, 0, 0.7);
    ctx.bezierCurveTo(-0.25, 0.5, -0.6, 0.2, -0.6, -0.15);
    ctx.bezierCurveTo(-0.6, -0.5, -0.25, -0.7, 0, -0.4);
    ctx.closePath();
    ctx.fillStyle = col;
    ctx.globalAlpha = alpha;
    ctx.fill();
    ctx.restore();
  }

  function drawPaddle() {
    const {x, y, w, h} = paddle;
    // bun top
    ctx.fillStyle = '#c96';
    ctx.fillRect(x, y, w, h*0.4);
    // lettuce
    ctx.fillStyle = '#5c8';
    ctx.fillRect(x, y + h*0.4, w, h*0.2);
    // patty
    ctx.fillStyle = '#a52a2a';
    ctx.fillRect(x, y + h*0.6, w, h*0.4);
    // sesame seeds
    ctx.fillStyle = '#fff';
    for (let i = 0; i < 6; i++) {
      const sx = x + 5 + i*(w-10)/5;
      const sy = y + 4;
      ctx.beginPath();
      ctx.arc(sx, sy, 2, 0, Math.PI*2);
      ctx.fill();
    }
  }

  function update() {
    if (!started) return;
    // move ball
    ball.x += ball.dx;
    ball.y += ball.dy;

    // wall collisions
    if (ball.x+ball.r > canvas.width || ball.x-ball.r < 0) ball.dx *= -1;
    if (ball.y-ball.r < 0) ball.dy *= -1;
    // paddle collision
    if (ball.y+ball.r > paddle.y && ball.x > paddle.x && ball.x < paddle.x + paddle.w) {
      ball.dy = -Math.abs(ball.dy);
      // slight angle based on hit position
      const hitPos = (ball.x - (paddle.x + paddle.w/2)) / (paddle.w/2);
      ball.dx = hitPos * 4;
    }

    // brick collisions
    for (let b of bricks) {
      if (!b.hit &&
          ball.x > b.x && ball.x < b.x + b.w &&
          ball.y - ball.r < b.y + b.h && ball.y + ball.r > b.y) {
        b.hit = true;
        ball.dy *= -1;
        spawnHearts(b.x + b.w/2, b.y + b.h/2, b.color);
      }
    }

    // lose condition (reset)
    if (ball.y - ball.r > canvas.height) {
      initObjects();
      started = false;
      overlay.style.display = 'flex';
      overlay.textContent = 'Click or press any key to start';
      return;
    }

    // AI paddle movement
    if (aiActive) {
      paddle.x += (ball.x - paddle.x - paddle.w/2) * 0.09;
      if (paddle.x < 0) paddle.x = 0;
      if (paddle.x + paddle.w > canvas.width) paddle.x = canvas.width - paddle.w;
    }

    // update hearts
    for (let i = hearts.length-1; i>=0; i--) {
      const p = hearts[i];
      p.x += p.vx;
      p.y += p.vy;
      p.vy += 0.05; // gravity
      p.life--;
      if (p.life <= 0) hearts.splice(i,1);
    }
  }

  function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // draw bricks
    for (let b of bricks) if (!b.hit) {
      ctx.fillStyle = b.color;
      ctx.fillRect(b.x, b.y, b.w, b.h);
    }
    // draw hearts
    for (let p of hearts) {
      drawHeart(p.x, p.y, 0.8, p.color, p.life/80);
    }
    // draw paddle
    drawPaddle();
    // draw ball
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2);
    ctx.fill();
  }

  function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);

  // start control
  function startGame() {
    if (started) return;
    started = true;
    aiActive = true;
    overlay.style.display = 'none';
  }
  overlay.addEventListener('click', startGame);
  window.addEventListener('keydown', startGame);
})();
</script>
</body>
</html>