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>Heartbreaker Burger</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
  * { box-sizing: border-box; }
  :root { color-scheme: dark; }
  body {
    margin: 0;
    min-height: 100vh;
    font-family: "Fredoka", "Trebuchet MS", sans-serif;
    color: #fff8f1;
    background: #1a1028;
    background-image:
      radial-gradient(circle at 15% 15%, #572c54 0, transparent 30%),
      radial-gradient(circle at 85% 85%, #4c254f 0, transparent 30%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .app { width: min(1050px, 100%); }
  header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
  .brand { display: flex; align-items: center; gap: 13px; }
  .logo {
    width: 50px; height: 50px; border-radius: 16px;
    background: #ff6d8f; display: grid; place-items: center;
    font-size: 27px; box-shadow: 0 5px 0 #b94068;
    transform: rotate(-6deg);
  }
  h1 { margin: 0; font-size: clamp(23px, 3vw, 34px); line-height: 1; letter-spacing: -.8px; }
  h1 span { color: #ff86a1; }
  .tagline { color: #b9a5bd; font-size: 12px; letter-spacing: 1.5px; font-weight: 600; margin-top: 5px; text-transform: uppercase; }
  .stats { display: flex; gap: 10px; }
  .stat { background: #33233d; border: 1px solid #57405a; border-radius: 14px; min-width: 105px; padding: 8px 15px; }
  .stat small { display: block; color: #bda9bd; font-size: 10px; letter-spacing: 1.5px; font-weight: 700; }
  .stat strong { color: #fff7e9; font-size: 19px; line-height: 1.2; }
  .stat strong.pink { color: #ff8eaa; }
  .frame {
    position: relative; border: 1px solid #76506c; border-radius: 23px;
    overflow: hidden; background: #2a1934;
    box-shadow: 0 20px 60px #110a1c80, 0 0 0 5px #ffffff08;
  }
  canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: none; }
  .topline { position: absolute; left: 22px; right: 22px; top: 17px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
  .pill { background: #160e23a8; border: 1px solid #ffffff20; border-radius: 20px; padding: 7px 11px; color: #e0c9d8; font-size: 11px; font-weight: 600; letter-spacing: .6px; }
  .pill b { color: #ff91ab; }
  .hint {
    position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%);
    background: #1a102be8; border: 1px solid #ffb4c854; border-radius: 30px;
    padding: 9px 18px; white-space: nowrap; text-align: center;
    color: #fff3ec; font-size: 13px; font-weight: 600; pointer-events: none;
    box-shadow: 0 4px 20px #140b2180;
  }
  .hint span { color: #ff91a9; }
  footer { display: flex; justify-content: space-between; align-items: center; color: #ae99ae; font-size: 12px; padding: 14px 4px 0; }
  footer b { color: #f8c3ca; }
  .key { display: inline-block; border: 1px solid #74566f; border-radius: 5px; padding: 2px 6px; color: #eacbda; margin: 0 2px; }
  @media(max-width: 600px) {
    body { padding: 15px; align-items: flex-start; padding-top: 35px; }
    .logo { width: 42px; height: 42px; font-size: 23px; }
    .tagline { font-size: 9px; letter-spacing: .8px; }
    .stat { min-width: 66px; padding: 7px 9px; }
    .stat small { font-size: 8px; }
    .stat strong { font-size: 15px; }
    .stats { gap: 5px; }
    .topline { top: 8px; left: 9px; right: 9px; }
    .pill { font-size: 8px; padding: 5px 8px; }
    .hint { font-size: 10px; bottom: 8px; padding: 6px 10px; }
    footer { font-size: 10px; gap: 10px; }
  }
</style>
</head>
<body>
<main class="app">
  <header>
    <div class="brand">
      <div class="logo">♥</div>
      <div><h1>heart<span>breaker</span></h1><div class="tagline">A little arcade game with a lot of love</div></div>
    </div>
    <div class="stats">
      <div class="stat"><small>SCORE</small><strong id="score">0000</strong></div>
      <div class="stat"><small>LIVES</small><strong class="pink" id="lives">♥ ♥ ♥</strong></div>
    </div>
  </header>
  <div class="frame">
    <canvas id="game" width="1000" height="570" aria-label="Breakout game with a hamburger paddle"></canvas>
    <div class="topline"><div class="pill"><b>♥</b> &nbsp; BREAK BRICKS, SPREAD LOVE</div><div class="pill" id="mode">✦ &nbsp; AUTO-PLAY DEMO</div></div>
    <div class="hint" id="hint"><span>♥</span> &nbsp; Click or press a key to start &nbsp; <span>♥</span></div>
  </div>
  <footer><div>Made with <b>♥</b> and extra pickles</div><div>Move with <span class="key">←</span><span class="key">→</span> or your mouse</div></footer>
</main>
<script>
const canvas = document.getElementById('game'), ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score'), livesEl = document.getElementById('lives');
const hint = document.getElementById('hint'), mode = document.getElementById('mode');
const W = 1000, H = 570;
let demo = true, score = 0, lives = 3, paddle = {x: 500, y: 512, w: 116}, ball = {x: 500, y: 450, vx: 3.4, vy: -5.2, r: 9};
let bricks = [], particles = [], trail = [], keys = {}, time = 0, last = 0, mouseX = null;
const colors = ['#ff7795','#ff9a99','#ffbf88','#ffd47f','#e990b5'];
function roundRect(x,y,w,h,r,fill) { ctx.fillStyle=fill; ctx.beginPath(); ctx.roundRect(x,y,w,h,r); ctx.fill(); }
function heart(x,y,s,color,alpha=1,rot=0) {
  ctx.save(); ctx.translate(x,y); ctx.rotate(rot); ctx.globalAlpha=alpha; ctx.fillStyle=color;
  ctx.beginPath(); ctx.moveTo(0,s*.35); ctx.bezierCurveTo(-s*.9,-s*.18,-s*.58,-s*.78,0,-s*.38);
  ctx.bezierCurveTo(s*.58,-s*.78,s*.9,-s*.18,0,s*.35); ctx.fill(); ctx.restore();
}
function makeBricks() {
  bricks=[];
  const cols=10, rows=5, bw=80, bh=25, gap=9, left=59;
  for(let r=0;r<rows;r++) for(let c=0;c<cols;c++)
    bricks.push({x:left+c*(bw+gap), y:77+r*34, w:bw, h:bh, color:colors[r], alive:true, row:r});
}
function burst(x,y,color) {
  for(let i=0;i<35;i++) {
    let a=Math.random()*Math.PI*2, v=1.2+Math.random()*5.4;
    particles.push({x,y,vx:Math.cos(a)*v,vy:Math.sin(a)*v-1.5,life:55+Math.random()*35,max:90,size:4+Math.random()*8,color:[color,'#ff5d85','#ffd0d8','#fff0ce','#fb91b6'][Math.floor(Math.random()*5)],rot:Math.random()*6,spin:(Math.random()-.5)*.15});
  }
}
function resetBall() { ball.x=paddle.x; ball.y=450; ball.vx=(Math.random()>.5?1:-1)*3.5; ball.vy=-5.5; trail=[]; }
function start() { if(demo){demo=false; hint.style.display='none'; mode.innerHTML='✦ &nbsp; YOU’RE PLAYING'; score=0; lives=3; makeBricks(); resetBall(); updateStats();} }
function updateStats() { scoreEl.textContent=String(score).padStart(4,'0'); livesEl.textContent='♥ '.repeat(lives).trim() || '♡'; }
canvas.addEventListener('pointerdown',e=>{start(); movePointer(e);});
canvas.addEventListener('pointermove',movePointer);
function movePointer(e) { const rect=canvas.getBoundingClientRect(); mouseX=(e.clientX-rect.left)*W/rect.width; }
window.addEventListener('keydown',e=>{ if(['ArrowLeft','ArrowRight',' ','a','d','A','D'].includes(e.key)) e.preventDefault(); start(); keys[e.key]=true; });
window.addEventListener('keyup',e=>keys[e.key]=false);
function update(dt) {
  time+=dt;
  if(demo) {
    let target=ball.x+ball.vx*13;
    paddle.x += (target-paddle.x)*Math.min(.13*dt,1);
  } else {
    if(keys.ArrowLeft||keys.a||keys.A) {paddle.x-=9*dt; mouseX=null;}
    if(keys.ArrowRight||keys.d||keys.D) {paddle.x+=9*dt; mouseX=null;}
    if(mouseX!==null) paddle.x+=(mouseX-paddle.x)*Math.min(.3*dt,1);
  }
  paddle.x=Math.max(65,Math.min(W-65,paddle.x));
  trail.push({x:ball.x,y:ball.y}); if(trail.length>11) trail.shift();
  ball.x+=ball.vx*dt; ball.y+=ball.vy*dt;
  if(ball.x<ball.r+12){ball.x=ball.r+12;ball.vx=Math.abs(ball.vx);}
  if(ball.x>W-ball.r-12){ball.x=W-ball.r-12;ball.vx=-Math.abs(ball.vx);}
  if(ball.y<55){ball.y=55;ball.vy=Math.abs(ball.vy);}
  if(ball.vy>0 && ball.y+ball.r>=paddle.y-12 && ball.y-ball.r<paddle.y+15 && Math.abs(ball.x-paddle.x)<paddle.w/2+ball.r) {
    ball.y=paddle.y-21; ball.vy=-Math.abs(ball.vy); ball.vx=Math.max(-5,Math.min(5,(ball.x-paddle.x)*.095));
    if(Math.abs(ball.vx)<1.8) ball.vx=ball.vx<0?-1.8:1.8;
    for(let i=0;i<5;i++) particles.push({x:ball.x,y:ball.y+10,vx:(Math.random()-.5)*3,vy:-Math.random()*2,life:25,max:25,size:4+Math.random()*3,color:'#ffe5af',rot:0,spin:0});
  }
  if(ball.y>H+20) {
    if(!demo){lives--; updateStats(); if(lives<=0){lives=3;score=0;makeBricks();updateStats();}}
    resetBall();
  }
  for(const b of bricks) if(b.alive && ball.x+ball.r>b.x && ball.x-ball.r<b.x+b.w && ball.y+ball.r>b.y && ball.y-ball.r<b.y+b.h) {
    b.alive=false; burst(ball.x,ball.y,b.color); score+=10; updateStats();
    let overlapL=ball.x+ball.r-b.x, overlapR=b.x+b.w-(ball.x-ball.r), overlapT=ball.y+ball.r-b.y, overlapB=b.y+b.h-(ball.y-ball.r);
    if(Math.min(overlapL,overlapR)<Math.min(overlapT,overlapB)) ball.vx*=-1; else ball.vy*=-1;
    break;
  }
  if(!bricks.some(b=>b.alive)) makeBricks();
  for(const p of particles){p.x+=p.vx*dt;p.y+=p.vy*dt;p.vy+=.055*dt;p.vx*=Math.pow(.99,dt);p.life-=dt;p.rot+=p.spin*dt;}
  particles=particles.filter(p=>p.life>0);
}
function draw() {
  ctx.clearRect(0,0,W,H);
  const bg=ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#35203e'); bg.addColorStop(1,'#22162f'); ctx.fillStyle=bg;ctx.fillRect(0,0,W,H);
  // Subtle confectionery background pattern
  for(let y=50;y<H;y+=76) for(let x=35;x<W;x+=90) {
    let xx=x+(Math.floor(y/76)%2)*42;
    heart(xx,y,7,'#fff',.035,Math.sin(x+y)*.3);
    ctx.fillStyle='#ffffff09';ctx.beginPath();ctx.arc(xx+32,y+30,2,0,7);ctx.fill();
  }
  ctx.strokeStyle='#ffffff0b'; ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(18,52);ctx.lineTo(18,H-18);ctx.lineTo(W-18,H-18);ctx.lineTo(W-18,52);ctx.stroke();
  for(const b of bricks) if(b.alive) {
    roundRect(b.x,b.y+4,b.w,b.h,7,'#130d2280');
    roundRect(b.x,b.y,b.w,b.h,7,b.color);
    roundRect(b.x+4,b.y+3,b.w-8,4,3,'#ffffff45');
    heart(b.x+b.w/2,b.y+15,9,'#fff2e9',.72);
    ctx.fillStyle='#ffffff70';ctx.beginPath();ctx.arc(b.x+10,b.y+13,1.5,0,7);ctx.arc(b.x+b.w-10,b.y+13,1.5,0,7);ctx.fill();
  }
  for(const p of particles) heart(p.x,p.y,p.size,p.color,Math.min(1,p.life/20),p.rot);
  trail.forEach((p,i)=>heart(p.x,p.y,5+i*.5,'#ff8ca6',i/trail.length*.35));
  ctx.shadowColor='#ff8faa';ctx.shadowBlur=22; heart(ball.x,ball.y,17,'#fff4db'); ctx.shadowBlur=0;
  heart(ball.x-1,ball.y-2,9,'#ff7797');
  // Hamburger paddle
  const x=paddle.x,y=paddle.y;
  ctx.save();ctx.translate(x,y);
  ctx.shadowColor='#0008';ctx.shadowBlur=12;ctx.shadowOffsetY=5;
  roundRect(-55,5,110,15,8,'#d88636');ctx.shadowBlur=0;ctx.shadowOffsetY=0;
  roundRect(-58,-3,116,12,6,'#6e332c');
  roundRect(-59,-8,118,8,4,'#93ca62');
  ctx.fillStyle='#ef5f62';ctx.beginPath();ctx.moveTo(-50,-9);ctx.lineTo(48,-9);ctx.lineTo(33,-1);ctx.lineTo(20,-8);ctx.lineTo(-20,-2);ctx.closePath();ctx.fill();
  ctx.fillStyle='#f7ad52';ctx.beginPath();ctx.moveTo(-55,-9);ctx.bezierCurveTo(-52,-35,52,-35,55,-9);ctx.quadraticCurveTo(0,-5,-55,-9);ctx.fill();
  ctx.fillStyle='#ffd08a';ctx.beginPath();ctx.ellipse(-12,-23,28,5,-.05,0,7);ctx.fill();
  ctx.fillStyle='#fff2c7';
  [[-31,-18],[-15,-25],[4,-19],[20,-25],[35,-17]].forEach(([sx,sy],i)=>{ctx.save();ctx.translate(sx,sy);ctx.rotate(i%2?.4:-.4);ctx.beginPath();ctx.ellipse(0,0,3,1.3,0,0,7);ctx.fill();ctx.restore();});
  ctx.restore();
}
function loop(ts) { let dt=last?Math.min((ts-last)/16.67,2):1;last=ts;update(dt);draw();requestAnimationFrame(loop); }
makeBricks();updateStats();requestAnimationFrame(loop);
</script>
</body>
</html>