gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout: Hamburger Paddle & Heart Explosions</title>
<style>
  body,html{margin:0;padding:0;height:100%;overflow:hidden;background:#111;color:#fff;font-family:Arial,sans-serif}
  #canvas{background:#222;display:block;margin:auto}
  #overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,0.6);color:#fff;font-size:1.5rem;
    cursor:pointer;user-select:none;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="overlay">Click or press any key to start</div>
<script>
(() => {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const W = canvas.width = Math.min(window.innerWidth, 800);
  const H = canvas.height = Math.min(window.innerHeight, 600);
  const paddle = { w:100, h:20, x:W/2-50, y:H-30, speed:6 };
  const ball = { x:W/2, y:H/2, r:8, vx:4, vy:-4 };
  const rows=5, cols=9, brickW= (W-40)/cols, brickH=20, bricks=[];
  const hearts=[];

  // create bricks
  for(let r=0;r<rows;r++){
    for(let c=0;c<cols;c++){
      bricks.push({x:20+c*brickW, y:20+r*brickH, w:brickW-4, h:brickH-4, alive:true});
    }
  }

  function drawPaddle(){
    ctx.save();
    ctx.translate(paddle.x + paddle.w/2, paddle.y + paddle.h/2);
    // simple hamburger: bun top, patty, bun bottom with sesame
    ctx.fillStyle="#F4A460";
    ctx.beginPath();
    ctx.arc(0,-5, paddle.w/2, Math.PI,0);
    ctx.rect(-paddle.w/2,-5,paddle.w,10);
    ctx.arc(0,5, paddle.w/2,0,Math.PI);
    ctx.fill();
    // sesame seeds
    ctx.fillStyle="#fff";
    for(let i=-30;i<=30;i+=15){
      ctx.beginPath();ctx.arc(i, -6,2,0,Math.PI*2);ctx.fill();
    }
    ctx.restore();
  }

  function drawBall(){
    ctx.fillStyle="#FFD700";
    ctx.beginPath();
    ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2);
    ctx.fill();
  }

  function drawBricks(){
    ctx.fillStyle="#4A90E2";
    bricks.forEach(b=>{if(b.alive){ctx.fillRect(b.x,b.y,b.w,b.h)}});
  }

  function drawHearts(){
    ctx.fillStyle="red";
    hearts.forEach(p=>{
      ctx.beginPath();
      const x=p.x, y=p.y, s=p.size;
      ctx.moveTo(x, y);
      ctx.bezierCurveTo(x-s/2, y-s/3, x-s, y+s/3, x, y+s);
      ctx.bezierCurveTo(x+s, y+s/3, x+s/2, y-s/3, x, y);
      ctx.fill();
    });
  }

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

  function explode(x,y){
    for(let i=0;i<30;i++){
      const angle=Math.random()*Math.PI*2;
      const speed=Math.random()*3+1;
      hearts.push({x,y,vx:Math.cos(angle)*speed,vy:Math.sin(angle)*speed,size:6,life:30});
    }
  }

  function movePaddleAI(){
    // simple AI: follow ball x
    if(ball.x < paddle.x + paddle.w/2) paddle.x -= paddle.speed;
    else if(ball.x > paddle.x + paddle.w/2) paddle.x += paddle.speed;
    paddle.x = Math.max(0, Math.min(W-paddle.w, paddle.x));
  }

  function updateBall(){
    ball.x+=ball.vx; ball.y+=ball.vy;
    // walls
    if(ball.x-ball.r<0||ball.x+ball.r>W) ball.vx*=-1;
    if(ball.y-ball.r<0) ball.vy*=-1;
    // paddle
    if(ball.y+ball.r>paddle.y && ball.x>paddle.x && ball.x<paddle.x+paddle.w){
      ball.vy*=-1;
      const hitPos=(ball.x-(paddle.x+paddle.w/2))/(paddle.w/2);
      ball.vx+=hitPos*2;
    }
    // bricks
    for(let i=0;i<bricks.length;i++){
      const b=bricks[i];
      if(b.alive && 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.alive=false;
        ball.vy*=-1;
        explode(b.x+b.w/2,b.y+b.h/2);
        break;
      }
    }
    // lose condition reset
    if(ball.y-ball.r>H){
      ball.x=W/2;ball.y=H/2;ball.vx=4;ball.vy=-4;
      bricks.forEach(b=>b.alive=true);
    }
  }

  let running=false;
  function loop(){
    ctx.clearRect(0,0,W,H);
    drawBricks();
    drawPaddle();
    drawBall();
    drawHearts();
    updateHearts();
    if(running){
      movePaddleAI();
      updateBall();
    }
    requestAnimationFrame(loop);
  }
  loop();

  function start(){
    overlay.style.display='none';
    running=true;
  }

  overlay.addEventListener('click',start);
  window.addEventListener('keydown',e=>{if(!running) start();});
})();
</script>
</body>
</html>