GPT-6.1 Terra

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heartbreak Burger</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
  :root{color-scheme:light;--ink:#592e47;--pink:#ff5c91;--cream:#fff9ef}
  *{box-sizing:border-box}
  html,body{margin:0;min-height:100%;font-family:Nunito,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}
  body{background:#fff6ed;color:var(--ink);overflow-x:hidden}
  .page{min-height:100vh;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;padding:25px 20px 20px;background:radial-gradient(ellipse at 50% 10%,#fffdf6 0%,#fff6ed 55%,#ffe8e9 100%)}
  .bg-heart{position:absolute;color:#f8b8c6;opacity:.42;user-select:none;pointer-events:none}
  .h1{left:7%;top:22%;font-size:23px;transform:rotate(-20deg)}.h2{right:8%;top:18%;font-size:32px;transform:rotate(17deg)}.h3{left:12%;bottom:19%;font-size:15px}.h4{right:13%;bottom:17%;font-size:20px;transform:rotate(-12deg)}
  header{text-align:center;position:relative;z-index:1;margin-bottom:15px}
  .eyebrow{display:flex;align-items:center;justify-content:center;gap:9px;text-transform:uppercase;letter-spacing:3px;font-size:10px;font-weight:900;color:#d78693;margin-bottom:3px}
  .eyebrow:before,.eyebrow:after{content:"";width:25px;height:1px;background:#e9bac0}
  h1{font-size:clamp(32px,4vw,45px);line-height:1.05;letter-spacing:-1.8px;margin:0;font-weight:900;color:#6a3650}
  h1 span{color:#f0698b}
  .subtitle{font-size:13px;color:#a77c87;font-weight:700;margin:6px 0 0}
  .game-shell{width:min(900px,100%);position:relative;z-index:1;background:#fffaf5;border:1px solid #f2d9d4;border-radius:22px;padding:12px;box-shadow:0 18px 45px #b76c7830,0 3px 0 #f5d8d4}
  .topbar{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 9px}
  .stat-group{display:flex;gap:22px;align-items:center}
  .stat{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;color:#8d6171}
  .stat-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#fff0ed;color:#f37795;font-size:16px}
  .stat b{color:#704256;font-size:15px;font-variant-numeric:tabular-nums}
  .badge{display:flex;align-items:center;gap:6px;background:#fff0ed;border:1px solid #f9ddda;color:#c57f8a;border-radius:999px;padding:6px 10px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;font-weight:900}
  .badge .dot{width:6px;height:6px;border-radius:50%;background:#f397a8;box-shadow:0 0 0 3px #ffdce1}
  .canvas-wrap{position:relative;overflow:hidden;border-radius:14px;background:#ffe9e8;border:1px solid #f7d3d2;line-height:0;touch-action:none}
  canvas{display:block;width:100%;height:auto;aspect-ratio:874/480}
  .start-prompt{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid #f6d5d2;border-radius:999px;color:#a96677;background:#fffaf5eF;box-shadow:0 4px 15px #b15f7520;font-size:11px;font-weight:900;letter-spacing:.1px;pointer-events:none;line-height:1.2;transition:opacity .25s}
  .start-prompt.hidden{opacity:0}
  .prompt-heart{color:#f16e92;font-size:15px}
  .bottom{width:min(900px,100%);display:flex;justify-content:space-between;align-items:center;padding:16px 7px 0;color:#b28990;font-weight:800;font-size:11px;position:relative;z-index:1}
  .controls{display:flex;align-items:center;gap:7px}
  .key{display:inline-grid;place-items:center;min-width:23px;height:22px;padding:0 5px;background:#fffaf6;border:1px solid #edd9d5;border-bottom-width:2px;border-radius:5px;color:#a77d87;font-size:11px}
  .bottom-right{display:flex;align-items:center;gap:6px}.bottom-right span{color:#ed7b99;font-size:14px}
  @media(max-width:600px){.page{padding:22px 12px}.game-shell{padding:8px;border-radius:17px}.topbar{height:42px;padding:0 5px 8px}.stat-group{gap:10px}.stat{gap:4px;font-size:10px}.stat-icon{width:25px;height:25px}.stat b{font-size:13px}.badge{font-size:9px;padding:5px 8px}.start-prompt{font-size:9px;padding:7px 10px;bottom:15%}.bottom{padding-top:12px;font-size:9px}.controls{gap:4px}.key{height:20px;min-width:20px}.bg-heart{display:none}.subtitle{font-size:12px}}
</style>
</head>
<body>
<main class="page">
  <div class="bg-heart h1">♥</div><div class="bg-heart h2">♥</div><div class="bg-heart h3">♥</div><div class="bg-heart h4">♥</div>
  <header>
    <div class="eyebrow">A little game made with love</div>
    <h1>Heartbreak <span>Burger</span></h1>
    <p class="subtitle">Smash the sweets. Spread the love.</p>
  </header>
  <section class="game-shell" aria-label="Breakout game">
    <div class="topbar">
      <div class="stat-group">
        <div class="stat"><span class="stat-icon">♥</span><span>LOVE <b id="score">0</b></span></div>
        <div class="stat"><span class="stat-icon">✿</span><span>LIVES <b id="lives">3</b></span></div>
      </div>
      <div class="badge"><span class="dot"></span><span id="mode">Demo mode</span></div>
    </div>
    <div class="canvas-wrap" id="wrap">
      <canvas id="game" width="874" height="480" aria-label="Breakout game with a hamburger paddle and heart particles"></canvas>
      <div class="start-prompt" id="prompt"><span class="prompt-heart">♥</span> Click or press a key to start <span class="prompt-heart">♥</span></div>
    </div>
  </section>
  <div class="bottom">
    <div class="controls"><span class="key">←</span><span class="key">→</span><span>or move your mouse to play</span></div>
    <div class="bottom-right">made with <span>♥</span> &amp; extra pickles</div>
  </div>
</main>
<script>
(() => {
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  const wrap = document.getElementById('wrap');
  const scoreEl = document.getElementById('score');
  const livesEl = document.getElementById('lives');
  const modeEl = document.getElementById('mode');
  const prompt = document.getElementById('prompt');
  const W=874,H=480, paddleY=428, paddleW=112;
  const colors=['#ff829e','#ffa078','#f4bb71','#e998b5','#bba3d4','#f49791','#eeb277','#a9c5b0'];
  let score=0,lives=3,playing=false,keys={},particles=[],bricks=[],trail=[],flash=0,frame=0;
  let paddle={x:W/2,target:W/2};
  let ball={x:437,y:325,vx:3.3,vy:-4.2,r:8};
  let last=performance.now(),acc=0;
  const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));
  function rounded(x,y,w,h,r){ctx.beginPath();ctx.roundRect(x,y,w,h,r)}
  function heart(x,y,s,color,rot=0){
    ctx.save();ctx.translate(x,y);ctx.rotate(rot);ctx.scale(s,s);ctx.beginPath();
    ctx.moveTo(0,.32);ctx.bezierCurveTo(-.08,.22,-.55,-.08,-.5,-.34);
    ctx.bezierCurveTo(-.46,-.59,-.12,-.62,0,-.38);
    ctx.bezierCurveTo(.12,-.62,.46,-.59,.5,-.34);
    ctx.bezierCurveTo(.55,-.08,.08,.22,0,.32);ctx.closePath();ctx.fillStyle=color;ctx.fill();ctx.restore();
  }
  function setupBricks(){
    bricks=[];
    const cols=10, rows=4, bw=72,bh=27,gap=8,startX=(W-(cols*bw+(cols-1)*gap))/2,startY=65;
    for(let row=0;row<rows;row++)for(let col=0;col<cols;col++){
      bricks.push({x:startX+col*(bw+gap),y:startY+row*(bh+10),w:bw,h:bh,color:colors[(col+row*2)%colors.length],alive:true});
    }
  }
  setupBricks();
  function burst(x,y,color){
    for(let i=0;i<34;i++){
      const angle=Math.random()*Math.PI*2,speed=1+Math.random()*5.2;
      particles.push({x,y,vx:Math.cos(angle)*speed,vy:Math.sin(angle)*speed-1.2,life:45+Math.random()*35,max:80,size:4+Math.random()*8,color:[color,'#ff5f8e','#ff8eac','#ffd4da','#fff8e9'][Math.floor(Math.random()*5)],rot:Math.random()*6,spin:(Math.random()-.5)*.13});
    }
    flash=4;
  }
  function resetBall(){ball.x=paddle.x;ball.y=340;ball.vx=(Math.random()>.5?1:-1)*3.2;ball.vy=-4.3;trail=[]}
  function start(){if(!playing){playing=true;modeEl.textContent='Playing';prompt.classList.add('hidden')}}
  function position(e){
    const rect=canvas.getBoundingClientRect();
    paddle.target=clamp((e.clientX-rect.left)*W/rect.width,paddleW/2+7,W-paddleW/2-7);
  }
  wrap.addEventListener('pointerdown',e=>{start();position(e)});
  wrap.addEventListener('pointermove',e=>{if(playing)position(e)});
  window.addEventListener('keydown',e=>{
    if(['ArrowLeft','ArrowRight',' ','a','d','A','D'].includes(e.key)){e.preventDefault();start()}
    else if(!playing)start();
    keys[e.key]=true;
  });
  window.addEventListener('keyup',e=>{keys[e.key]=false});
  function update(){
    frame++;
    if(!playing){
      let predicted=ball.x;
      if(ball.vy>0){
        let t=(paddleY-ball.y)/ball.vy;
        let raw=ball.x+ball.vx*t;
        const span=W-24;
        raw=((raw-12)%(2*span)+2*span)%(2*span);
        predicted=12+(raw>span?2*span-raw:raw);
      }
      paddle.target=clamp(predicted+Math.sin(frame*.018)*12,paddleW/2+7,W-paddleW/2-7);
    }else{
      if(keys.ArrowLeft||keys.a||keys.A)paddle.target-=8;
      if(keys.ArrowRight||keys.d||keys.D)paddle.target+=8;
      paddle.target=clamp(paddle.target,paddleW/2+7,W-paddleW/2-7);
    }
    paddle.x+=(paddle.target-paddle.x)*(playing?.24:.12);
    trail.unshift({x:ball.x,y:ball.y});if(trail.length>8)trail.pop();
    ball.x+=ball.vx;ball.y+=ball.vy;
    if(ball.x<ball.r+5){ball.x=ball.r+5;ball.vx=Math.abs(ball.vx)}
    if(ball.x>W-ball.r-5){ball.x=W-ball.r-5;ball.vx=-Math.abs(ball.vx)}
    if(ball.y<ball.r+5){ball.y=ball.r+5;ball.vy=Math.abs(ball.vy)}
    if(ball.vy>0&&ball.y+ball.r>=paddleY&&ball.y-ball.r<paddleY+22&&Math.abs(ball.x-paddle.x)<paddleW/2+ball.r){
      ball.y=paddleY-ball.r;
      const hit=clamp((ball.x-paddle.x)/(paddleW/2),-1,1);
      ball.vx=hit*4.2+(hit>=0?.65:-.65);
      ball.vy=-Math.sqrt(Math.max(12,30-ball.vx*ball.vx));
    }
    if(ball.y>H+15){
      if(playing){lives--;livesEl.textContent=lives;if(lives<=0){lives=3;score=0;livesEl.textContent=lives;scoreEl.textContent=score;setupBricks()}}
      resetBall();
    }
    for(const b of bricks){
      if(!b.alive)continue;
      let nx=clamp(ball.x,b.x,b.x+b.w),ny=clamp(ball.y,b.y,b.y+b.h);
      if((ball.x-nx)**2+(ball.y-ny)**2<ball.r**2){
        b.alive=false;score+=10;scoreEl.textContent=score;
        burst(b.x+b.w/2,b.y+b.h/2,b.color);
        let prevX=ball.x-ball.vx,prevY=ball.y-ball.vy;
        if(prevY+ball.r<=b.y||prevY-ball.r>=b.y+b.h)ball.vy*=-1;
        else if(prevX+ball.r<=b.x||prevX-ball.r>=b.x+b.w)ball.vx*=-1;
        else ball.vy*=-1;
        break;
      }
    }
    if(bricks.every(b=>!b.alive)){setupBricks();resetBall()}
    for(const p of particles){p.x+=p.vx;p.y+=p.vy;p.vx*=.985;p.vy=p.vy*.985+.045;p.life--;p.rot+=p.spin}
    particles=particles.filter(p=>p.life>0);
    if(flash>0)flash--;
  }
  function drawBackground(){
    ctx.fillStyle='#ffedeb';ctx.fillRect(0,0,W,H);
    const grad=ctx.createLinearGradient(0,0,0,H);grad.addColorStop(0,'#fff3ef');grad.addColorStop(1,'#ffe3e4');ctx.fillStyle=grad;ctx.fillRect(0,0,W,H);
    ctx.fillStyle='rgba(255,255,255,.3)';
    for(let y=20;y<H;y+=34)for(let x=19;x<W;x+=34){ctx.beginPath();ctx.arc(x+(y%68?0:17),y,1,0,Math.PI*2);ctx.fill()}
    heart(33,245,15,'#f9cad1',-.2);heart(835,288,18,'#f8c8d0',.2);heart(90,365,10,'#fbd1d5',.2);heart(767,365,11,'#f8c7d0',-.15);
    ctx.strokeStyle='rgba(224,158,167,.27)';ctx.lineWidth=1;ctx.setLineDash([4,6]);ctx.beginPath();ctx.moveTo(30,H-24);ctx.lineTo(W-30,H-24);ctx.stroke();ctx.setLineDash([]);
    ctx.fillStyle='#d79ca2';ctx.font='800 10px system-ui,sans-serif';ctx.textAlign='center';ctx.letterSpacing='2px';ctx.fillText('CATCH THE LOVE',W/2,38);ctx.letterSpacing='0px';
  }
  function drawBricks(){
    for(const b of bricks){
      if(!b.alive)continue;
      ctx.fillStyle='rgba(158,91,103,.12)';rounded(b.x,b.y+4,b.w,b.h,8);ctx.fill();
      ctx.fillStyle=b.color;rounded(b.x,b.y,b.w,b.h,8);ctx.fill();
      ctx.fillStyle='rgba(255,255,255,.22)';rounded(b.x+4,b.y+3,b.w-8,5,3);ctx.fill();
      heart(b.x+b.w/2,b.y+b.h/2+2,11,'rgba(255,255,255,.65)');
    }
  }
  function drawBurger(){
    const x=paddle.x,y=paddleY;
    ctx.save();ctx.translate(x,y);
    ctx.fillStyle='rgba(150,76,80,.17)';ctx.beginPath();ctx.ellipse(0,33,59,7,0,0,Math.PI*2);ctx.fill();
    ctx.fillStyle='#c8793f';rounded(-55,19,110,12,6);ctx.fill();
    ctx.fillStyle='#edaa5d';rounded(-54,18,108,10,6);ctx.fill();
    ctx.fillStyle='#724237';rounded(-54,13,108,8,4);ctx.fill();
    ctx.fillStyle='#f7cb4f';ctx.beginPath();ctx.moveTo(-52,12);ctx.lineTo(51,12);ctx.lineTo(39,18);ctx.lineTo(17,15);ctx.lineTo(4,19);ctx.lineTo(-12,15);ctx.lineTo(-32,19);ctx.closePath();ctx.fill();
    ctx.fillStyle='#ec7166';rounded(-53,8,106,7,4);ctx.fill();
    ctx.fillStyle='#83b875';ctx.beginPath();ctx.moveTo(-53,10);for(let i=0;i<=10;i++)ctx.lineTo(-53+i*10.6,9+(i%2?3:-1));ctx.lineTo(53,13);ctx.lineTo(-53,13);ctx.closePath();ctx.fill();
    ctx.fillStyle='#d78949';ctx.beginPath();ctx.moveTo(-53,8);ctx.bezierCurveTo(-53,-17,-33,-25,0,-25);ctx.bezierCurveTo(33,-25,53,-17,53,8);ctx.quadraticCurveTo(0,14,-53,8);ctx.fill();
    ctx.fillStyle='#f4b66a';ctx.beginPath();ctx.moveTo(-50,5);ctx.bezierCurveTo(-48,-15,-30,-22,0,-22);ctx.bezierCurveTo(30,-22,48,-15,50,5);ctx.quadraticCurveTo(0,10,-50,5);ctx.fill();
    ctx.fillStyle='#ffe5aa';
    [[-27,-10],[-12,-16],[4,-11],[20,-16],[32,-7],[-2,-20],[-19,-4],[15,-4]].forEach(([sx,sy],i)=>{ctx.save();ctx.translate(sx,sy);ctx.rotate(i%2?.5:-.4);ctx.beginPath();ctx.ellipse(0,0,2.4,1.1,0,0,Math.PI*2);ctx.fill();ctx.restore()});
    ctx.restore();
  }
  function draw(){
    drawBackground();drawBricks();
    for(let i=trail.length-1;i>=0;i--){const t=trail[i];ctx.fillStyle=`rgba(255,111,146,${(1-i/trail.length)*.14})`;ctx.beginPath();ctx.arc(t.x,t.y,ball.r*(1-i/trail.length*.65),0,Math.PI*2);ctx.fill()}
    ctx.fillStyle='rgba(170,78,97,.15)';ctx.beginPath();ctx.arc(ball.x+1,ball.y+3,ball.r+1,0,Math.PI*2);ctx.fill();
    ctx.fillStyle='#fffdf6';ctx.beginPath();ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2);ctx.fill();
    ctx.strokeStyle='#f7a8b3';ctx.lineWidth=1.5;ctx.stroke();
    heart(ball.x,ball.y+1,9,'#f47695');
    for(const p of particles){ctx.globalAlpha=clamp(p.life/22,0,1);heart(p.x,p.y,p.size,p.color,p.rot)}
    ctx.globalAlpha=1;drawBurger();
  }
  function loop(now){
    let delta=Math.min(40,now-last);last=now;acc+=delta;
    while(acc>=1000/60){update();acc-=1000/60}
    draw();requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>