Hamburger breakoutOne-line
GPT-6.1 Sol
by OpenAIreasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 53 s
- Cost
- $0.074
- Output tokens
- 7,339
- Spent thinking
- 999 tokens
- Speed
- 70.4 tok/s
- Console errors
- 0
- First token after
- 9.3 s
- First visible text after
- 38.6 s
- Prompt tokens
- 357
- Code size
- 18.3 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6.1-sol- Reasoning sent
model default- 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 · 247 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burger Breaker — Made with love</title>
<style>
:root{--ink:#3b2032;--pink:#ed4e80;--cream:#fff7e9;--muted:#967b86}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif;min-height:100vh;background-image:radial-gradient(#e8d7cb 1px,transparent 1px);background-size:20px 20px}
button{font:inherit;cursor:pointer}
.page{max-width:1160px;margin:0 auto;padding:28px 24px 16px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;gap:20px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:3px;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
h1{font-size:clamp(29px,4vw,49px);letter-spacing:-2.5px;line-height:1;margin:0;font-weight:900}
h1 span{color:var(--pink)}
.header-right{display:flex;align-items:center;gap:24px}
.tagline{font-size:13px;line-height:1.6;text-align:right;color:#866775}
.tagline strong{color:var(--ink)}
.stamp{width:75px;height:75px;border:2px solid var(--pink);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--pink);transform:rotate(12deg);font-size:10px;font-weight:900;letter-spacing:1px;box-shadow:inset 0 0 0 4px var(--cream),inset 0 0 0 5px var(--pink)}
.stamp b{font-size:25px;line-height:1.1}
.cabinet{border:3px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 8px 0 var(--ink),0 17px 30px #3b20321b;background:#281b2b}
.scorebar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:#ffe8eb;border-bottom:3px solid var(--ink)}
.stats{display:flex;gap:43px;align-items:center}
.stat-label{font-size:9px;letter-spacing:2px;font-weight:800;color:#94707e;display:block;margin-bottom:3px}
.stat-value{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1}
.lives{font-size:24px;letter-spacing:3px;color:var(--pink)}
.level{display:flex;align-items:center;gap:10px;border-left:1px solid #ddc1cc;padding-left:28px}
.level-icon{width:29px;height:29px;background:var(--ink);color:#ffe8eb;border-radius:50%;display:grid;place-items:center;font-size:15px}
.actions{display:flex;gap:8px}
.icon-button{width:36px;height:36px;border:1.5px solid #dbc0ca;border-radius:11px;background:#fff4ef;color:var(--ink);display:grid;place-items:center;transition:background .15s,transform .15s}
.icon-button:hover{background:#ffd0df;transform:translateY(-1px)}
.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.playfield{position:relative;height:465px;isolation:isolate;touch-action:none}
canvas{width:100%;height:100%;display:block}
.start-overlay{position:absolute;bottom:91px;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;pointer-events:none;transition:opacity .25s}
.start-pill{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#fff7e9;border:2px solid #3b2032;border-radius:14px;box-shadow:0 5px 0 #ed4e80;font-size:14px;font-weight:800;color:var(--ink)}
.start-pill .play{color:#ed4e80;font-size:15px}
.start-sub{color:#bda0b5;font-size:11px;letter-spacing:.5px;margin-top:13px}
.start-overlay.hidden{opacity:0}
.bottom-bar{height:43px;background:#322033;border-top:1px solid #4e314a;display:flex;justify-content:space-between;align-items:center;padding:0 22px;color:#bfa5b9;font-size:10px;letter-spacing:.3px}
.bottom-bar strong{color:#f2c7d8;font-weight:600}
.small-heart{color:#ff78a6;margin-right:6px}
footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#927884;padding:22px 2px 0;gap:10px}
.keys{display:flex;align-items:center;gap:6px}
kbd{border:1px solid #dbc6cc;box-shadow:0 2px 0 #e7d4d6;border-radius:4px;background:#fffaf4;padding:3px 6px;font-size:10px;color:#745764;font-family:inherit}
.mobile-help{display:none}
@media(min-height:850px) and (min-width:700px){.page{padding-top:48px}.playfield{height:510px}header{margin-bottom:30px}}
@media(max-width:650px){
.page{padding:23px 13px 16px}header{margin-bottom:21px}.header-right{gap:0}.tagline{display:none}.stamp{width:59px;height:59px;font-size:8px}.stamp b{font-size:21px}h1{letter-spacing:-1.5px}.eyebrow{font-size:8px;letter-spacing:2px}
.scorebar{padding:0 13px;height:66px}.stats{gap:19px}.stat-value{font-size:21px}.stat-label{font-size:8px;letter-spacing:1.5px}.lives{font-size:20px;letter-spacing:0}.level{display:none}
.icon-button{width:32px;height:32px}.actions{gap:5px}.playfield{height:450px}.start-pill{font-size:11px;padding:13px 14px;gap:8px}.start-overlay{bottom:99px}
.bottom-bar{padding:0 12px;font-size:9px}.bottom-bar .edition{display:none}footer{font-size:10px;padding-top:20px}.desktop-help{display:none}.mobile-help{display:block}
}
</style>
</head>
<body>
<div class="page">
<header>
<div>
<div class="eyebrow">FRESH FROM THE ARCADE</div>
<h1>Burger <span>Breaker.</span></h1>
</div>
<div class="header-right">
<div class="tagline"><strong>Good buns. Big feelings.</strong><br>A little arcade love affair.</div>
<div class="stamp"><span>MADE WITH</span><b>♥</b><span>EXTRA LOVE</span></div>
</div>
</header>
<main class="cabinet">
<div class="scorebar">
<div class="stats">
<div><span class="stat-label">LOVE POINTS</span><div class="stat-value" id="score">0000</div></div>
<div><span class="stat-label">BUNS LEFT</span><div class="lives" id="lives">♥♥♥</div></div>
<div class="level"><div class="level-icon">✦</div><div><span class="stat-label">ON THE MENU</span><div style="font-size:12px;font-weight:800" id="level">The first crush</div></div></div>
</div>
<div class="actions">
<button class="icon-button" id="sound" aria-label="Enable sound" title="Toggle sound">
<svg viewBox="0 0 24 24"><path d="M11 5 6 9H3v6h3l5 4z"/><path id="soundMark" d="m16 9 6 6m0-6-6 6"/></svg>
</button>
<button class="icon-button" id="pause" aria-label="Pause" title="Pause / resume">
<svg viewBox="0 0 24 24" id="pauseIcon"><path d="M8 5v14M16 5v14"/></svg>
</button>
<button class="icon-button" id="restart" aria-label="Restart game" title="Fresh start">
<svg viewBox="0 0 24 24"><path d="M4 10a8 8 0 1 1 1 8M4 4v6h6"/></svg>
</button>
</div>
</div>
<div class="playfield" id="field">
<canvas id="game" aria-label="Breakout game with a hamburger paddle and exploding heart bricks"></canvas>
<div class="start-overlay" id="overlay">
<div class="start-pill"><span class="play">▶</span><span id="overlayTitle">Click or press a key to start</span></div>
<div class="start-sub" id="overlaySub">You bring the buns. We bring the love.</div>
</div>
</div>
<div class="bottom-bar">
<span><span class="small-heart">♥</span> Break a brick. Spread a little love.</span>
<span class="edition">HOT OFF THE GRILL / VOL. 01</span>
<span><strong id="modeLabel">DEMO IN PLAY</strong> <span style="color:#ff8cb1">●</span></span>
</div>
</main>
<footer>
<div class="desktop-help keys"><kbd>←</kbd><kbd>→</kbd><span>or mouse to move</span><span style="margin:0 7px;color:#c9b0ba">/</span><kbd>SPACE</kbd><span>to pause</span></div>
<div class="mobile-help">Drag to move your burger · Tap to start</div>
<div>All you need is love. <strong style="color:#725262">And a burger.</strong></div>
</footer>
</div>
<script>
(() => {
const canvas=document.getElementById('game'),ctx=canvas.getContext('2d'),field=document.getElementById('field');
const scoreEl=document.getElementById('score'),livesEl=document.getElementById('lives'),overlay=document.getElementById('overlay');
let W,H,dpr,bricks=[],particles=[],trail=[],floaters=[],score=0,lives=3,level=1,demo=true,paused=false,gameOver=false;
let paddle={x:0,y:0,w:140},ball={x:0,y:0,vx:150,vy:-360,r:7},target=0,keys={},last=0,time=0,shake=0,sound=false,audio;
const colors=['#f66b97','#f18bb6','#bda0e6','#faab83','#f5ce7a'];
const $=id=>document.getElementById(id);
function roundRect(x,y,w,h,r){ctx.beginPath();ctx.roundRect(x,y,w,h,r)}
function heart(x,y,size,color,rotation=0,alpha=1){
ctx.save();ctx.translate(x,y);ctx.rotate(rotation);ctx.scale(size/20,size/20);ctx.globalAlpha=alpha;ctx.fillStyle=color;
ctx.beginPath();ctx.moveTo(0,8);ctx.bezierCurveTo(-3,5,-12,-1,-9,-6);ctx.bezierCurveTo(-6,-11,-1,-9,0,-5);ctx.bezierCurveTo(2,-10,8,-10,10,-5);ctx.bezierCurveTo(13,1,4,6,0,8);ctx.fill();ctx.restore();
}
function resize(){
const r=field.getBoundingClientRect();W=r.width;H=r.height;dpr=Math.min(window.devicePixelRatio||1,2);canvas.width=Math.round(W*dpr);canvas.height=Math.round(H*dpr);ctx.setTransform(dpr,0,0,dpr,0,0);
paddle.w=Math.min(143,Math.max(92,W*.132));paddle.y=H-43;paddle.x=W/2;target=paddle.x;buildBricks();launch();
}
function buildBricks(){
bricks=[];const cols=W<600?6:10,rows=5,gap=W<600?7:10,margin=W<600?16:35,bw=(W-2*margin-gap*(cols-1))/cols,bh=W<600?23:26;
for(let row=0;row<rows;row++)for(let col=0;col<cols;col++)bricks.push({x:margin+col*(bw+gap),y:57+row*(bh+9),w:bw,h:bh,color:colors[row],alive:true,row});
}
function launch(){
const speed=Math.max(290,Math.min(440,W*.42));ball={x:W*.44,y:Math.min(H-150,245),vx:speed*.43,vy:-speed*.9,r:W<600?6:7};trail=[];
}
function reset(asDemo=false){
demo=asDemo;paused=false;gameOver=false;score=0;lives=3;level=1;particles=[];floaters=[];buildBricks();launch();updateHud();setOverlay(asDemo);$('modeLabel').textContent=asDemo?'DEMO IN PLAY':'LOVE IN PLAY';$('level').textContent='The first crush';updatePause();
}
function updateHud(){scoreEl.textContent=String(score).padStart(4,'0');livesEl.innerHTML='♥'.repeat(Math.max(0,lives))+'<span style="color:#d6bec7">'+'♥'.repeat(3-Math.max(0,lives))+'</span>'}
function setOverlay(show,title='Click or press a key to start',sub='You bring the buns. We bring the love.'){
overlay.classList.toggle('hidden',!show);$('overlayTitle').textContent=title;$('overlaySub').textContent=sub;
}
function start(){if(gameOver){reset(false);return}if(demo){demo=false;setOverlay(false);$('modeLabel').textContent='LOVE IN PLAY'}}
function beep(freq,duration=.08,type='sine',volume=.035){
if(!sound)return;
try{if(!audio)audio=new (window.AudioContext||window.webkitAudioContext)();if(audio.state==='suspended')audio.resume();const osc=audio.createOscillator(),gain=audio.createGain();osc.type=type;osc.frequency.setValueAtTime(freq,audio.currentTime);osc.frequency.exponentialRampToValueAtTime(freq*1.4,audio.currentTime+duration);gain.gain.setValueAtTime(volume,audio.currentTime);gain.gain.exponentialRampToValueAtTime(.001,audio.currentTime+duration);osc.connect(gain);gain.connect(audio.destination);osc.start();osc.stop(audio.currentTime+duration)}catch(e){}
}
function explode(b){
const x=b.x+b.w/2,y=b.y+b.h/2;
for(let i=0;i<68;i++){const a=Math.random()*Math.PI*2,s=45+Math.random()*220;particles.push({x:x+(Math.random()-.5)*b.w*.7,y,vx:Math.cos(a)*s,vy:Math.sin(a)*s-65,size:4+Math.random()*12,life:1.1+Math.random()*1.0,max:2.1,angle:Math.random()*6,spin:(Math.random()-.5)*6,color:[b.color,'#ff5f99','#ffb8d2','#ffe5ec','#fff2b8'][i%5]})}
floaters.push({x,y:y-10,text:'+10',life:1});shake=3.5;beep(460+b.row*95,.12,'sine');score+=10;updateHud();
}
function update(dt){
time+=dt;
if(paused||gameOver)return;
if(demo){target=ball.x+Math.sin(time*3)*9}
else{
if(keys.ArrowLeft||keys.a)target-=dt*650;
if(keys.ArrowRight||keys.d)target+=dt*650;
}
target=Math.max(paddle.w/2+7,Math.min(W-paddle.w/2-7,target));
paddle.x+=(target-paddle.x)*Math.min(1,dt*(demo?11:23));
trail.push({x:ball.x,y:ball.y});if(trail.length>13)trail.shift();
let oldY=ball.y;ball.x+=ball.vx*dt;ball.y+=ball.vy*dt;
if(ball.x<ball.r+6){ball.x=ball.r+6;ball.vx=Math.abs(ball.vx);beep(240,.035)}
if(ball.x>W-ball.r-6){ball.x=W-ball.r-6;ball.vx=-Math.abs(ball.vx);beep(240,.035)}
if(ball.y<ball.r+6){ball.y=ball.r+6;ball.vy=Math.abs(ball.vy)}
const top=paddle.y-15;
if(ball.vy>0&&ball.y+ball.r>=top&&oldY+ball.r<top+12&&Math.abs(ball.x-paddle.x)<paddle.w/2+ball.r){
const offset=Math.max(-.93,Math.min(.93,(ball.x-paddle.x)/(paddle.w/2)));
const speed=Math.min(570,Math.hypot(ball.vx,ball.vy)+4),a=offset*1.05;
ball.vx=Math.sin(a)*speed;ball.vy=-Math.cos(a)*speed;ball.y=top-ball.r;beep(270,.07,'triangle');
}
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;if(oldY+ball.r<=b.y+3||oldY-ball.r>=b.y+b.h-3)ball.vy*=-1;else ball.vx*=-1;explode(b);break;
}
}
if(ball.y>H+25){if(!demo){lives--;updateHud();beep(100,.2,'triangle');if(lives<=0){gameOver=true;setOverlay(true,'One more serving? Click to restart','A little heartbreak never hurt.');$('modeLabel').textContent='ORDER UP';return}}launch()}
if(bricks.every(b=>!b.alive)){level++;buildBricks();$('level').textContent=['The first crush','Love, well done','Extra sweet'][Math.min(level-1,2)];floaters.push({x:W/2,y:H/2,text:'LOVE, WELL DONE!',life:2});launch()}
for(const p of particles){p.life-=dt;p.x+=p.vx*dt;p.y+=p.vy*dt;p.vy+=100*dt;p.vx*=1-dt*.45;p.angle+=p.spin*dt}
particles=particles.filter(p=>p.life>0);
for(const f of floaters){f.life-=dt;f.y-=dt*28}floaters=floaters.filter(f=>f.life>0);shake*=Math.max(0,1-dt*14);
}
function drawBurger(){
const x=paddle.x-paddle.w/2,y=paddle.y-17,w=paddle.w;
ctx.save();
ctx.shadowColor='#ffae6550';ctx.shadowBlur=25;
ctx.fillStyle='#d88a38';roundRect(x+3,y+22,w-6,15,[3,3,10,10]);ctx.fill();ctx.shadowBlur=0;
ctx.fillStyle='#f2b85b';roundRect(x+5,y+23,w-10,10,[2,2,9,9]);ctx.fill();
ctx.fillStyle='#4c2527';roundRect(x-1,y+13,w+2,12,6);ctx.fill();
ctx.fillStyle='#7b4132';roundRect(x+3,y+14,w-6,4,3);ctx.fill();
ctx.fillStyle='#ffda61';ctx.beginPath();ctx.moveTo(x+2,y+12);ctx.lineTo(x+w-2,y+12);ctx.lineTo(x+w-6,y+18);ctx.lineTo(x+w*.77,y+17);ctx.lineTo(x+w*.64,y+25);ctx.lineTo(x+w*.48,y+17);ctx.lineTo(x+6,y+18);ctx.closePath();ctx.fill();
ctx.fillStyle='#ee635b';roundRect(x+2,y+8,w-4,7,4);ctx.fill();
ctx.fillStyle='#91bc58';ctx.beginPath();ctx.moveTo(x,y+5);
for(let i=0;i<=12;i++)ctx.lineTo(x+i*w/12,y+7+(i%2?6:0));
ctx.lineTo(x+w,y+3);ctx.closePath();ctx.fill();
ctx.fillStyle='#e29a40';ctx.beginPath();ctx.moveTo(x,y+6);ctx.bezierCurveTo(x-2,y-23,x+w+2,y-23,x+w,y+6);ctx.closePath();ctx.fill();
const bun=ctx.createLinearGradient(0,y-17,0,y+7);bun.addColorStop(0,'#ffda8d');bun.addColorStop(.65,'#f5b55c');bun.addColorStop(1,'#eaa04a');ctx.fillStyle=bun;ctx.beginPath();ctx.moveTo(x+2,y+3);ctx.bezierCurveTo(x+4,y-21,x+w-4,y-21,x+w-2,y+3);ctx.closePath();ctx.fill();
ctx.fillStyle='#fff1be';
for(const [sx,sy,rot] of [[.22,-3,-.4],[.37,-10,.5],[.55,-6,-.3],[.72,-4,.5],[.48,0,.4],[.83,0,-.3],[.17,2,.3],[.65,-11,-.5]]){
ctx.save();ctx.translate(x+w*sx,y+sy);ctx.rotate(rot);ctx.beginPath();ctx.ellipse(0,0,2.3,1,0,0,Math.PI*2);ctx.fill();ctx.restore()}
ctx.restore();
}
function draw(){
ctx.clearRect(0,0,W,H);
ctx.fillStyle='#271b2b';ctx.fillRect(0,0,W,H);
const glow=ctx.createRadialGradient(W/2,H*.1,10,W/2,H*.1,W*.7);glow.addColorStop(0,'#48283d');glow.addColorStop(1,'#271b2b');ctx.fillStyle=glow;ctx.fillRect(0,0,W,H);
ctx.fillStyle='#ffffff08';for(let x=18;x<W;x+=24)for(let y=17;y<H;y+=24){ctx.beginPath();ctx.arc(x,y,.8,0,Math.PI*2);ctx.fill()}
ctx.save();if(shake>.1)ctx.translate((Math.random()-.5)*shake,(Math.random()-.5)*shake);
ctx.font='bold 9px Arial';ctx.letterSpacing='1.5px';ctx.fillStyle='#ab819d';ctx.fillText('SERVING UP SOME LOVE',W<600?17:35,29);ctx.textAlign='right';ctx.fillStyle='#80627d';ctx.fillText('♥ FRESHLY FLIPPED',W-(W<600?17:35),29);ctx.textAlign='left';ctx.letterSpacing='0px';
for(const b of bricks){
if(!b.alive)continue;
ctx.fillStyle='#120e1c77';roundRect(b.x,b.y+4,b.w,b.h,6);ctx.fill();
ctx.fillStyle=b.color;roundRect(b.x,b.y,b.w,b.h,6);ctx.fill();
ctx.fillStyle='#ffffff35';roundRect(b.x+3,b.y+2,b.w-6,3,2);ctx.fill();
ctx.fillStyle='#6a2c5a12';roundRect(b.x+2,b.y+b.h-5,b.w-4,4,2);ctx.fill();
heart(b.x+b.w/2,b.y+b.h/2+1,12,'#713558',0,.27);
}
ctx.strokeStyle='#c28eaf18';ctx.setLineDash([3,7]);ctx.beginPath();ctx.moveTo(18,H-24);ctx.lineTo(W-18,H-24);ctx.stroke();ctx.setLineDash([]);
for(let i=0;i<trail.length;i++){const a=i/trail.length;ctx.globalAlpha=a*.28;ctx.fillStyle='#ffd4b6';ctx.beginPath();ctx.arc(trail[i].x,trail[i].y,ball.r*a,0,Math.PI*2);ctx.fill()}ctx.globalAlpha=1;
ctx.shadowColor='#ffcb8a';ctx.shadowBlur=19;ctx.fillStyle='#fff4d4';ctx.beginPath();ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2);ctx.fill();ctx.shadowBlur=0;ctx.fillStyle='white';ctx.beginPath();ctx.arc(ball.x-2,ball.y-2,2,0,Math.PI*2);ctx.fill();
drawBurger();
for(const p of particles)heart(p.x,p.y,p.size,p.color,p.angle,Math.min(1,p.life*1.8));
for(const f of floaters){ctx.globalAlpha=Math.min(1,f.life*2);ctx.fillStyle='#fff2cb';ctx.font='900 '+(f.text.length>5?22:15)+'px Arial';ctx.textAlign='center';ctx.fillText(f.text,f.x,f.y)}ctx.globalAlpha=1;ctx.textAlign='left';
ctx.restore();
if(paused){ctx.fillStyle='#21142180';ctx.fillRect(0,0,W,H)}
}
function frame(t){const dt=Math.min((t-last)/1000||.016,.025);last=t;update(dt);draw();requestAnimationFrame(frame)}
function updatePause(){$('pauseIcon').innerHTML=paused?'<path d="m8 5 10 7-10 7z"/>':'<path d="M8 5v14M16 5v14"/>';$('pause').setAttribute('aria-label',paused?'Resume':'Pause')}
function togglePause(){if(gameOver)return;paused=!paused;updatePause();if(paused)setOverlay(true,'Taking a little bun break','Click pause or press Space to keep cooking.');else setOverlay(demo);$('modeLabel').textContent=paused?'ON A BUN BREAK':demo?'DEMO IN PLAY':'LOVE IN PLAY'}
field.addEventListener('pointerdown',e=>{start();if(paused)togglePause();target=e.clientX-field.getBoundingClientRect().left;field.setPointerCapture(e.pointerId)});
field.addEventListener('pointermove',e=>{if(!demo)target=e.clientX-field.getBoundingClientRect().left});
window.addEventListener('keydown',e=>{
if(['ArrowLeft','ArrowRight',' ','ArrowUp','ArrowDown'].includes(e.key))e.preventDefault();
if(e.repeat){keys[e.key]=true;return}
if(demo||gameOver){start()}else if(e.code==='Space'||e.key.toLowerCase()==='p')togglePause();
keys[e.key]=true;
});
window.addEventListener('keyup',e=>keys[e.key]=false);
window.addEventListener('blur',()=>keys={});
$('pause').addEventListener('click',togglePause);
$('restart').addEventListener('click',()=>reset(false));
$('sound').addEventListener('click',()=>{sound=!sound;$('soundMark').setAttribute('d',sound?'M15 8c3 2 3 6 0 8M18 5c5 4 5 10 0 14':'m16 9 6 6m0-6-6 6');$('sound').setAttribute('aria-label',sound?'Mute sound':'Enable sound');if(sound)beep(500,.12)});
new ResizeObserver(resize).observe(field);
resize();updateHud();requestAnimationFrame(frame);
})();
</script>
</body>
</html>Reasoning trace (999 tokens)
**Creating a Game Concept** I need to design a polished and playful inline canvas game, focusing on a hamburger and hearts theme. The demo should start seamlessly without being overly large or obscure. I'm envisioning a retro diner style with dark plum and pink cream accents, featuring a neon candy arena filled with hearts and an attractive hamburger paddle. The layout should be crisp with a clear title and instructions, ensuring it captures attention quickly. The gameplay will be straightforward and fun!**Designing the Game Interface** I’m planning the game interface with a small header reading "THE FEEL-GOOD ARCADE" along with options for sound toggling and restarting. The central game panel will display score strips, and I want to maximize the screen. The page background will be creamy, contrasting a dark canvas highlighting vibrant hot pink and cream margins. I envision a beautiful arcade cabinet with a pastel pink background and dark burgundy playfield, complete with colorful bricks and heart symbols. I'll also include a demo overlay for user interaction.**Setting Up the Canvas Dimensions** I’m working on implementing the canvas dimensions, adapting it to a fixed coordinate setup of W1120 H500 or 520. The container's height should keep an aspect ratio of 1120/490, with a minimum mobile height of 420. This way, I can ensure the entire arena is preserved. For the canvas, I need to set logical coordinates depending on CSS adjustments, making sure to accommodate 10 brick columns on desktop and 6 on mobile. I'll also consider overall layout margins effectively.**Designing a game demo** I'm thinking about making a demo where the ball moves quickly and interacts with a brick region. The setup includes positioning elements, like an overlay indicating "DEMO IN PLAY" and specific instructions for starting the game. I want it to be easy for users to have smooth controls, whether they're using a keyboard or touch inputs. The game will also track scores, provide audio options, and feature a way to restart after a game-over. It's all about creating an enjoyable experience!**Planning game design details** I'm working on a game with around 12,000 tokens, which is more than enough to craft about 450 lines. I want to focus on design elements, like a vector-style burger paddle and pastel-colored bricks that each have a heart motif. Brick collisions will create ascending particles that fade away, and there will be fun doodles of ketchup and mustard as icons. I want to include a footer with a legend showcasing keys and mouse icons for a clearer user experience!