Models 44

GPT-6.1 Terra

by OpenAIReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
1 min 47 s
Cost
$0.042
Output tokens
8,365
Spent thinking
1,505 tokens
Speed
82.9 tok/s
Console errors
0
First token after
5.7 s
First visible text after
35.5 s
Prompt tokens
357
Code size
19.1 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-6.1-terra
Reasoning sent
{"effort":"medium"}
Max output
128,000 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
“i want a breakout game where the paddle is a hamburger and every brick you break explodes into tons of little hearts”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 268 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Burger Break</title>
<style>
  :root{--ink:#352137;--muted:#8d7581;--pink:#f85d87;--cream:#fff9ef;--line:#eadbd5}
  *{box-sizing:border-box}
  body{margin:0;background:#f9f1e9;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
  body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#e8d6cc 0.8px,transparent .8px);background-size:20px 20px;opacity:.35}
  button{font:inherit}
  .wrap{position:relative;max-width:1190px;margin:auto;padding:0 20px 28px}
  .topbar{height:66px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9d8d0}
  .brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.8px;font-size:19px}
  .brand-icon{width:38px;height:38px;display:grid;place-items:center;background:#fa638b;border-radius:12px;box-shadow:0 3px 0 #df496f;font-size:22px}
  .brand small{display:block;font-size:8px;letter-spacing:2px;color:#c77f88;margin-top:2px}
  .top-right{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#a88990}
  .top-right span{padding:8px 11px;background:#fff8f3;border:1px solid #efded7;border-radius:20px;color:#e56f86}
  .intro{display:flex;align-items:end;justify-content:space-between;padding:19px 0 17px}
  .eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:#e17789;margin-bottom:5px}
  h1{font-size:28px;line-height:1;margin:0;letter-spacing:-1.2px}
  .intro p{margin:7px 0 0;color:#9b8189;font-size:12px}
  .intro-note{font-size:11px;color:#af9398;font-weight:bold;padding-bottom:4px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 242px;gap:18px;align-items:start}
  .machine{background:#fffaf4;border:1px solid #e7d6d0;border-radius:18px;padding:8px;box-shadow:0 7px 0 #e9d8d1,0 15px 35px rgba(113,72,69,.08);min-width:0}
  .machine-head{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 7px}
  .machine-title{display:flex;align-items:center;gap:9px}
  .mini-star{width:29px;height:29px;background:#ffdfdf;border-radius:9px;display:grid;place-items:center;color:#ed6684;font-size:16px}
  .machine-title strong{display:block;font-size:12px;letter-spacing:.3px}
  .machine-title small{display:block;font-size:9px;color:#b59ba0;margin-top:3px;font-weight:bold;letter-spacing:.5px}
  .stats{display:flex;align-items:center;gap:22px}
  .stat small{display:block;font-size:8px;color:#b49a9e;font-weight:900;letter-spacing:1.2px;margin-bottom:2px}
  .stat b{font-size:15px;letter-spacing:.5px}
  .lives{color:#f16a86;letter-spacing:2px!important}
  .screen{overflow:hidden;border-radius:11px;background:#34223e;position:relative;border:4px solid #4a304e;box-shadow:inset 0 0 0 1px #6f4d69;line-height:0}
  canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
  .machine-foot{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px 1px}
  .start{border:0;background:none;color:#614453;font-size:10px;font-weight:900;letter-spacing:.7px;cursor:pointer;text-align:left;padding:4px 0}
  .start:hover{color:#e45679}
  .dot{display:inline-block;width:7px;height:7px;background:#f46b8c;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #ffe4e7;animation:pulse 1.3s infinite}
  @keyframes pulse{50%{opacity:.5}}
  .restart{border:1px solid #eddcd6;border-radius:8px;background:#fff;color:#977b83;padding:8px 11px;cursor:pointer;font-size:9px;font-weight:900;letter-spacing:.8px}
  .restart:hover{background:#fff0f1;color:#e35d7d}
  .sidebar{display:flex;flex-direction:column;gap:14px}
  .card{background:#fffaf4;border:1px solid #ebdad4;border-radius:16px;box-shadow:0 5px 0 #eadbd4;padding:17px}
  .card-top{display:flex;justify-content:space-between;align-items:center}
  .card h2{font-size:10px;letter-spacing:1.5px;margin:0;color:#725761}
  .card-tag{font-size:9px;color:#e38091;font-weight:900}
  .steps{margin-top:15px;display:grid;gap:15px}
  .step{display:flex;gap:10px;align-items:flex-start}
  .number{flex:none;width:23px;height:23px;border-radius:8px;background:#fae6e3;color:#e6788c;display:grid;place-items:center;font-size:9px;font-weight:900}
  .step strong{font-size:11px;display:block;margin:1px 0 4px}
  .step p{font-size:10px;line-height:1.45;color:#a58b91;margin:0}
  .keys{display:inline-block;background:#f4eae4;border:1px solid #e9d8d1;border-radius:4px;color:#806871;padding:1px 5px;font-weight:bold}
  .special{background:#ffe2e3;border-color:#f6cdd1;overflow:hidden;position:relative;padding-bottom:0}
  .special .eyebrow{color:#e47788;margin-bottom:8px}
  .special h3{font-size:20px;line-height:1.1;letter-spacing:-.7px;margin:0;max-width:170px}
  .special p{font-size:10px;line-height:1.5;color:#aa7881;max-width:160px;margin:9px 0 0}
  .burger-art{display:block;width:100%;height:125px;margin:2px auto 0}
  .bottom-note{text-align:center;color:#bfa8a7;font-size:9px;font-weight:800;letter-spacing:1.5px;margin-top:18px}
  @media(max-width:800px){
    .layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.intro-note{display:none}
    .special{min-height:215px}.burger-art{height:110px}.bottom-note{margin-top:20px}
  }
  @media(max-width:480px){
    .wrap{padding:0 12px 24px}.topbar{height:58px}.top-right{font-size:0}.top-right span{font-size:8px}
    .intro{padding:17px 0 14px}h1{font-size:24px}.intro p{font-size:11px}.machine{padding:6px;border-radius:14px}
    .machine-head{padding-left:5px;padding-right:5px}.stats{gap:10px}.stat b{font-size:12px}
    .machine-title strong{font-size:10px}.machine-title small{font-size:8px}.mini-star{width:26px;height:26px}
    .screen{border-width:3px}.start{font-size:8px;letter-spacing:.2px}.restart{font-size:8px;padding:7px}
    .sidebar{grid-template-columns:1fr;gap:12px}.special{min-height:0}.burger-art{height:110px}
  }
</style>
</head>
<body>
<div class="wrap">
  <header class="topbar">
    <div class="brand"><div class="brand-icon">🍔</div><div>BURGER BREAK<small>THE LITTLE ARCADE</small></div></div>
    <div class="top-right">MADE WITH <span>♥ &nbsp; EXTRA LOVE</span></div>
  </header>
  <section class="intro">
    <div><div class="eyebrow">★ &nbsp; ORDER UP! &nbsp; ★</div><h1>Have a little heart.</h1><p>Break some bricks. Make a mess. Spread the love.</p></div>
    <div class="intro-note">A VERY TASTY ARCADE GAME &nbsp; ✳</div>
  </section>
  <main class="layout">
    <section class="machine">
      <div class="machine-head">
        <div class="machine-title"><div class="mini-star">✦</div><div><strong>THE LOVE GRILL</strong><small>BREAKOUT, BUT MAKE IT CUTE</small></div></div>
        <div class="stats">
          <div class="stat"><small>SCORE</small><b id="score">00000</b></div>
          <div class="stat"><small>LEVEL</small><b id="level">01</b></div>
          <div class="stat"><small>LIVES</small><b class="lives" id="lives">♥ ♥ ♥</b></div>
        </div>
      </div>
      <div class="screen"><canvas id="game" width="900" height="490" aria-label="Burger Break game"></canvas></div>
      <div class="machine-foot">
        <button class="start" id="start"><span class="dot"></span><span id="message">AUTO-PLAY ON &nbsp;·&nbsp; CLICK OR PRESS A KEY TO START</span></button>
        <button class="restart" id="restart">↻ &nbsp; RESTART</button>
      </div>
    </section>
    <aside class="sidebar">
      <div class="card">
        <div class="card-top"><h2>HOW TO PLAY</h2><span class="card-tag">THE BASICS ✦</span></div>
        <div class="steps">
          <div class="step"><div class="number">01</div><div><strong>Move your burger</strong><p>Use your mouse, touch, or <span class="keys">←</span> <span class="keys">→</span> keys.</p></div></div>
          <div class="step"><div class="number">02</div><div><strong>Keep the ball bouncing</strong><p>Don't let it fall off the bottom!</p></div></div>
          <div class="step"><div class="number">03</div><div><strong>Break bricks, spread love</strong><p>Every brick is bursting with hearts.</p></div></div>
        </div>
      </div>
      <div class="card special">
        <div class="eyebrow">✦ &nbsp; TODAY'S SPECIAL</div>
        <h3>A side of<br>heart confetti.</h3>
        <p>Smash a brick and watch the love fly.</p>
        <svg class="burger-art" viewBox="0 0 210 125" aria-hidden="true">
          <path d="M28 38 C20 27 8 35 14 44 L28 57 42 44 C47 35 36 27 28 38" fill="#f58ca2"/>
          <path d="M177 20 C171 13 162 19 166 25 L177 35 188 25 C192 19 183 13 177 20" fill="#f57995"/>
          <path d="M158 52 C154 47 148 51 151 56 L158 62 165 56 C168 51 162 47 158 52" fill="#ffb5bc"/>
          <ellipse cx="101" cy="115" rx="74" ry="6" fill="#e9a9ae" opacity=".5"/>
          <path d="M48 77 C49 48 68 35 102 35 C136 35 154 49 156 77 Z" fill="#f4a44f" stroke="#c87542" stroke-width="3"/>
          <path d="M54 72 C63 50 82 43 103 43 C127 43 143 52 150 72" fill="none" stroke="#ffc777" stroke-width="4" stroke-linecap="round"/>
          <g stroke="#ffe3a4" stroke-width="3" stroke-linecap="round"><path d="M77 55 l4 2 M99 48 l4 2 M121 57 l4 -1 M90 65 l4 -1 M132 67 l4 1"/></g>
          <path d="M48 77 Q54 71 61 77 Q68 83 75 77 Q82 71 89 77 Q97 83 104 77 Q111 71 118 77 Q125 83 132 77 Q140 71 148 77 L156 79 L154 88 L50 88Z" fill="#80bc71" stroke="#639858" stroke-width="2"/>
          <rect x="47" y="84" width="110" height="13" rx="6" fill="#9d4e42" stroke="#773a38" stroke-width="2"/>
          <path d="M55 85 L96 85 L106 99 L116 85 L151 85" fill="#ffd066"/>
          <path d="M50 96 L153 96 Q153 109 141 110 L63 110 Q50 109 50 96Z" fill="#e99a50" stroke="#c87542" stroke-width="3"/>
          <circle cx="82" cy="75" r="2" fill="#62413c"/><circle cx="120" cy="75" r="2" fill="#62413c"/>
          <path d="M97 77 Q102 82 107 77" fill="none" stroke="#9b554b" stroke-width="2" stroke-linecap="round"/>
          <circle cx="75" cy="79" r="4" fill="#ee8b83" opacity=".7"/><circle cx="127" cy="79" r="4" fill="#ee8b83" opacity=".7"/>
        </svg>
      </div>
      <div class="bottom-note">FLIPPED WITH LOVE &nbsp; ♥ &nbsp; EST. 2025</div>
    </aside>
  </main>
</div>
<script>
(() => {
  const canvas=document.getElementById('game'), ctx=canvas.getContext('2d');
  const scoreEl=document.getElementById('score'), levelEl=document.getElementById('level'), livesEl=document.getElementById('lives'), msg=document.getElementById('message');
  const W=900,H=490, paddleY=438, paddleW=122;
  let bricks=[], particles=[], trail=[], score=0, lives=3, level=1, demo=true, over=false, paddleX=390, targetX=390, ball, frame=0, last=0, keys={};
  const colors=['#ff7695','#ffa7ae','#ffd083','#b7dfb0','#b9c9fa'];
  const shades=['#c75071','#d57582','#d99c51','#79a982','#8296c8'];
  function rounded(x,y,w,h,r,fill){ctx.beginPath();ctx.roundRect(x,y,w,h,r);ctx.fillStyle=fill;ctx.fill()}
  function heart(x,y,s,color,rotation=0){
    ctx.save();ctx.translate(x,y);ctx.rotate(rotation);ctx.scale(s,s);ctx.beginPath();
    ctx.moveTo(0,.32);ctx.bezierCurveTo(-.15,.13,-.55,-.09,-.5,-.35);ctx.bezierCurveTo(-.45,-.62,-.12,-.63,0,-.37);ctx.bezierCurveTo(.12,-.63,.45,-.62,.5,-.35);ctx.bezierCurveTo(.55,-.09,.15,.13,0,.32);
    ctx.fillStyle=color;ctx.fill();ctx.restore();
  }
  function makeBricks(){
    bricks=[];const cols=10, rows=5, bw=72, gap=9, start=49;
    for(let r=0;r<rows;r++)for(let c=0;c<cols;c++)bricks.push({x:start+c*(bw+gap),y:59+r*29,w:bw,h:22,row:r,alive:true});
  }
  function resetBall(){ball={x:450,y:235,vx:3.35*(Math.random()>.5?1:-1),vy:-4.7,r:8};trail=[];paddleX=389;targetX=paddleX}
  function updateUI(){
    scoreEl.textContent=String(score).padStart(5,'0');levelEl.textContent=String(level).padStart(2,'0');
    livesEl.textContent='♥ '.repeat(lives).trim()||'—';
  }
  function reset(asDemo){score=0;lives=3;level=1;demo=asDemo;over=false;particles=[];makeBricks();resetBall();updateUI();setMessage()}
  function setMessage(){msg.textContent=over?'GAME OVER · CLICK HERE TO PLAY AGAIN':demo?'AUTO-PLAY ON  ·  CLICK OR PRESS A KEY TO START':'YOU’RE PLAYING  ·  MOVE TO KEEP THE BALL UP'}
  function start(){if(over){reset(false);return}if(demo){demo=false;setMessage()}}
  function explode(x,y,row){
    const palette=[colors[row],'#ff8aa6','#ffbed1','#fff0c7','#ff628b','#ffffff'];
    for(let i=0;i<34;i++){
      const a=Math.random()*Math.PI*2, speed=1+Math.random()*4.7;
      particles.push({x,y,vx:Math.cos(a)*speed,vy:Math.sin(a)*speed-1.1,life:65+Math.random()*55,max:120,size:4+Math.random()*8,color:palette[Math.floor(Math.random()*palette.length)],rot:Math.random()*3,spin:(Math.random()-.5)*.12});
    }
  }
  function update(dt){
    frame+=dt;
    if(over)return;
    if(demo){
      const desired=ball.x-paddleW/2+Math.sin(frame*.018)*18;
      paddleX+=(Math.max(-9,Math.min(9,desired-paddleX)))*dt;
    }else{
      if(keys.ArrowLeft||keys.a||keys.A)targetX-=8*dt;
      if(keys.ArrowRight||keys.d||keys.D)targetX+=8*dt;
      paddleX+=(targetX-paddleX)*Math.min(1,.28*dt);
    }
    paddleX=Math.max(16,Math.min(W-paddleW-16,paddleX));targetX=Math.max(16,Math.min(W-paddleW-16,targetX));
    const oldX=ball.x,oldY=ball.y;
    ball.x+=ball.vx*dt;ball.y+=ball.vy*dt;
    trail.unshift({x:ball.x,y:ball.y});if(trail.length>9)trail.pop();
    if(ball.x<ball.r+11){ball.x=ball.r+11;ball.vx=Math.abs(ball.vx)}
    if(ball.x>W-ball.r-11){ball.x=W-ball.r-11;ball.vx=-Math.abs(ball.vx)}
    if(ball.y<ball.r+12){ball.y=ball.r+12;ball.vy=Math.abs(ball.vy)}
    if(ball.vy>0&&oldY+ball.r<=paddleY+8&&ball.y+ball.r>=paddleY&&ball.x>paddleX-4&&ball.x<paddleX+paddleW+4){
      ball.y=paddleY-ball.r;let hit=(ball.x-(paddleX+paddleW/2))/(paddleW/2);
      ball.vx=hit*5.2;if(Math.abs(ball.vx)<1)ball.vx=ball.vx<0?-1.3:1.3;
      ball.vy=-Math.sqrt(Math.max(15,34-ball.vx*ball.vx));
    }
    for(const b of bricks){
      if(!b.alive)continue;
      if(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;score+=10;explode(b.x+b.w/2,b.y+b.h/2,b.row);
        if(oldY+ball.r<=b.y||oldY-ball.r>=b.y+b.h)ball.vy*=-1;else if(oldX+ball.r<=b.x||oldX-ball.r>=b.x+b.w)ball.vx*=-1;else ball.vy*=-1;
        updateUI();break;
      }
    }
    if(ball.y>H+20){
      if(demo){resetBall()}else{lives--;updateUI();if(lives<=0){over=true;setMessage()}else resetBall()}
    }
    if(!bricks.some(b=>b.alive)){level++;makeBricks();resetBall();updateUI()}
    for(const p of particles){p.x+=p.vx*dt;p.y+=p.vy*dt;p.vy+=.035*dt;p.vx*=Math.pow(.992,dt);p.rot+=p.spin*dt;p.life-=dt}
    particles=particles.filter(p=>p.life>0);
  }
  function drawBackground(){
    const g=ctx.createLinearGradient(0,0,0,H);g.addColorStop(0,'#432a49');g.addColorStop(1,'#2c2039');ctx.fillStyle=g;ctx.fillRect(0,0,W,H);
    ctx.strokeStyle='rgba(255,206,222,.035)';ctx.lineWidth=1;
    for(let x=18;x<W;x+=36){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke()}
    for(let y=18;y<H;y+=36){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(W,y);ctx.stroke()}
    ctx.strokeStyle='rgba(255,198,211,.13)';ctx.setLineDash([3,7]);ctx.strokeRect(17,16,W-34,H-32);ctx.setLineDash([]);
    ctx.fillStyle='rgba(255,218,222,.45)';ctx.font='bold 9px Arial';ctx.letterSpacing='1.5px';ctx.fillText('✦  FRESHLY STACKED',49,39);ctx.textAlign='right';ctx.fillText('BREAK FOR A LITTLE LOVE  ♥',851,39);ctx.textAlign='left';ctx.letterSpacing='0px';
    // Quiet little stars in the play field
    for(let i=0;i<19;i++){
      let x=40+(i*137)%820,y=227+(i*71)%173;
      ctx.fillStyle=`rgba(255,202,213,${.10+.07*Math.sin(frame*.025+i)})`;
      ctx.beginPath();ctx.arc(x,y,i%4===0?2:1,0,Math.PI*2);ctx.fill();
      if(i%5===0){ctx.fillRect(x-4,y-.5,8,1);ctx.fillRect(x-.5,y-4,1,8)}
    }
  }
  function drawBricks(){
    for(const b of bricks){if(!b.alive)continue;
      rounded(b.x,b.y+3,b.w,b.h,6,shades[b.row]);
      rounded(b.x,b.y,b.w,b.h-2,6,colors[b.row]);
      ctx.fillStyle='rgba(255,255,255,.32)';rounded(b.x+5,b.y+3,b.w-10,2,1,'rgba(255,255,255,.32)');
      heart(b.x+b.w/2,b.y+12,9,'rgba(255,255,255,.58)');
      ctx.fillStyle='rgba(255,255,255,.45)';ctx.beginPath();ctx.arc(b.x+8,b.y+8,1.2,0,7);ctx.fill();
    }
  }
  function drawPaddle(){
    const x=paddleX,y=paddleY;
    ctx.save();ctx.shadowColor='rgba(255,146,158,.25)';ctx.shadowBlur=18;
    rounded(x+4,y+30,paddleW-8,10,6,'#db8b45');ctx.restore();
    rounded(x+2,y+21,paddleW-4,12,6,'#754033');
    rounded(x+3,y+20,paddleW-6,7,4,'#a7563d');
    ctx.fillStyle='#ffd160';ctx.beginPath();ctx.moveTo(x+12,y+19);ctx.lineTo(x+51,y+19);ctx.lineTo(x+62,y+29);ctx.lineTo(x+72,y+19);ctx.lineTo(x+110,y+19);ctx.lineTo(x+110,y+23);ctx.lineTo(x+12,y+23);ctx.fill();
    ctx.fillStyle='#80c773';ctx.beginPath();ctx.moveTo(x+2,y+17);for(let i=0;i<12;i++)ctx.quadraticCurveTo(x+i*10+5,y+(i%2?12:21),x+(i+1)*10,y+17);ctx.lineTo(x+120,y+21);ctx.lineTo(x+2,y+21);ctx.fill();
    ctx.fillStyle='#f6ab59';ctx.beginPath();ctx.moveTo(x+5,y+16);ctx.bezierCurveTo(x+8,y-3,x+27,y-7,x+61,y-7);ctx.bezierCurveTo(x+95,y-7,x+114,y-3,x+117,y+16);ctx.quadraticCurveTo(x+61,y+21,x+5,y+16);ctx.fill();
    ctx.strokeStyle='#ffd592';ctx.lineWidth=2.5;ctx.lineCap='round';
    [[28,6],[43,1],[60,6],[77,0],[94,6],[52,-2],[86,9]].forEach(([a,b],i)=>{ctx.beginPath();ctx.moveTo(x+a,y+b);ctx.lineTo(x+a+4,y+b+(i%2?1:-1));ctx.stroke()});
    ctx.fillStyle='#684036';ctx.beginPath();ctx.arc(x+48,y+12,1.5,0,7);ctx.arc(x+75,y+12,1.5,0,7);ctx.fill();
    ctx.strokeStyle='#a4554c';ctx.lineWidth=1.4;ctx.beginPath();ctx.arc(x+61.5,y+12,4,0.2,Math.PI-.2);ctx.stroke();
  }
  function draw(){
    drawBackground();drawBricks();
    for(const p of particles){ctx.globalAlpha=Math.min(1,p.life/25)*.95;heart(p.x,p.y,p.size,p.color,p.rot)}ctx.globalAlpha=1;
    for(let i=trail.length-1;i>=0;i--){const t=trail[i];ctx.globalAlpha=(1-i/trail.length)*.16;ctx.fillStyle='#ffc7d7';ctx.beginPath();ctx.arc(t.x,t.y,ball.r*(1-i/trail.length*.6),0,7);ctx.fill()}ctx.globalAlpha=1;
    ctx.save();ctx.shadowColor='#ff95b0';ctx.shadowBlur=19;ctx.fillStyle='#fff4e9';ctx.beginPath();ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2);ctx.fill();ctx.restore();
    heart(ball.x,ball.y+2,9,'#f36c8d');
    drawPaddle();
    ctx.fillStyle='rgba(255,217,225,.26)';ctx.font='bold 9px Arial';ctx.textAlign='center';ctx.fillText('✦  KEEP IT IN THE GRILL  ✦',450,480);ctx.textAlign='left';
    if(over){ctx.fillStyle='rgba(30,16,34,.68)';ctx.fillRect(0,0,W,H);ctx.textAlign='center';ctx.fillStyle='#fff4e9';ctx.font='bold 31px Arial';ctx.fillText('That was sweet!',W/2,235);ctx.font='bold 13px Arial';ctx.fillStyle='#ffb9cb';ctx.fillText('CLICK OR PRESS A KEY TO PLAY AGAIN',W/2,263);ctx.textAlign='left'}
  }
  function tick(t){const dt=Math.min(2,(t-last)/16.667||1);last=t;update(dt);draw();requestAnimationFrame(tick)}
  function pointer(e){const rect=canvas.getBoundingClientRect();targetX=(e.clientX-rect.left)*W/rect.width-paddleW/2}
  canvas.addEventListener('pointerdown',e=>{start();pointer(e)});
  canvas.addEventListener('pointermove',e=>{if(!demo&&!over)pointer(e)});
  document.getElementById('start').addEventListener('click',start);
  document.getElementById('restart').addEventListener('click',()=>reset(false));
  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});
  window.addEventListener('blur',()=>{keys={}});
  reset(true);requestAnimationFrame(tick);
})();
</script>
</body>
</html>
Reasoning trace (1,505 tokens)
**Designing a Game Layout**

I need to create an attractive game that includes features like an autoplay function, visible heart explosions, and a hamburger paddle. The theme could be playful diners with a dark navy or purple background, possibly titled "HEARTBREAK BURGER" or "LOVE AT FIRST BITE" with a candy aesthetic. I’m considering a 1280x800 screen layout, central game stage dimensions of 900x620, and vibrant, candy-styled bricks for the main stage. I’ll ensure visual appeal and effective gameplay.**Crafting the Game Design**

I’m planning a game design where the stage is around 900 pixels wide, with a canvas aspect ratio of 900/535. I want a rich look, using a dark wine or purple background and contrasting light cream exterior. It will have a retro diner feel with neon pink accents. The game interface includes a scoreboard for score, combo, and lives. I aim for colorful, rounded bricks and plenty of heart explosions. I’ll illustrate the paddle as a hamburger, complete with toppings.**Setting Up Game Physics**

I’m working on the canvas coordinates being independent for a desktop setup around 850x500 pixels. I plan to implement consistent collision physics, with the ball set to a velocity of about 4.5 frames per second at 60 fps, allowing it to reach the bricks within 3 seconds. The ball will start at coordinates (450, 250) and move upward, with bricks positioned between y-coordinates 70 and 245. Each brick will release 26 hearts, contributing to the gameplay experience.**Considering game mechanics**

I’m thinking about the ball mechanics for the game. If the ball slows down nearly vertically, I can set its velocity around vx 3.2 and vy -4.7. I wonder if I can give the ball a glowing heart effect and a circular design with a heart icon. For the paddle, I’m considering adding an auto-play banner at the bottom for clarity. A message like "CLICK OR PRESS A KEY TO START" in the footer could guide players effectively. I'll finalize controls for the keyboard arrows or mouse.**Finalizing game layout**

I'm considering the game's respawn mechanics: if a player loses, they can respawn as long as lives are greater than zero. Once lives hit zero, it’ll be game over, and I’ll replace the banner with a restart option. For winning, I should display a victory message. I’m also designing a side panel with sound controls and instructions, aiming for a centered layout that fits within the page's height constraints, ensuring everything looks appealing and organized. A cute sidebar illustration could enhance the design!**Creating game style**

I've got to establish the game style, with the title "A LITTLE ARCADE, A LOT OF LOVE," and a catchy tagline. The stage header will be "THE LOVE GRILL," complete with a level badge and score display. I’m thinking of adding an external icon to the header and a sidebar titled "HOW TO PLAY," outlining steps 01, 02, and 03. It would be nice to include a cute illustration, like stacked hearts alongside a burger, possibly using inline SVG. I'll make sure the score is prominent too!**Planning game mechanics**

I’m thinking about game mechanics and aiming for optimal performance with a max speed of 8. The game's state starts the same each time, and for user movement, I want to use mouse updates or arrows, plus support for mobile touch.

I’ll process each frame at scaled delta speed and handle collisions smartly. When bricks are destroyed, I want to spawn hearts, create particles, and implement various gameplay features. It’s getting exciting!**Implementing visual elements**

I need to avoid overflow issues and focus on visual sophistication in the game. For the canvas, I’ll use the roundRect method to draw, adding features like walls with little dots, glowing effects, and borders. 

It’s essential to include heart paths and motion to enhance the overall design and make it feel more dynamic. I’m excited about building this out fully! Let’s keep it visually appealing and engaging for users.