Hamburger breakoutOne-line
Qwen3 Coder Next
by Qwenreasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 27 s
- Cost
- $0.0040
- Output tokens
- 4,996
- Spent thinking
- 0 tokens
- Speed
- 57.7 tok/s
- Console errors
- 0
- First token after
- 623 ms
- First visible text after
- 623 ms
- Prompt tokens
- 362
- Code size
- 20.5 KB
- Finish reason
- stop
- Served by
- Parasail
- Model id
qwen/qwen3-coder-next- Reasoning sent
model default- Max output
- 235,929 tokens
- Generated
- Nov 13, 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 · 650 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burger Breakout: Love Explosion</title>
<style>
:root {
--bg-color: #2c0e37;
--text-color: #fff;
--accent-color: #ff4081;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
user-select: none;
}
#game-container {
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
border-radius: 8px;
overflow: hidden;
}
canvas {
display: block;
background: radial-gradient(circle at center, #4a1c40 0%, #1a0520 100%);
cursor: none; /* Hide cursor inside game for immersion */
}
#ui-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
box-sizing: border-box;
}
.hud {
display: flex;
justify-content: space-between;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
#start-screen, #game-over-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: auto;
z-index: 10;
transition: opacity 0.5s;
}
.hidden {
opacity: 0;
pointer-events: none !important;
}
h1 {
font-size: 48px;
margin-bottom: 10px;
color: #ffeb3b;
text-shadow: 3px 3px 0px #d50000;
text-align: center;
line-height: 1.2;
}
p {
font-size: 18px;
margin-bottom: 30px;
text-align: center;
max-width: 600px;
line-height: 1.5;
color: #e0e0e0;
}
button {
padding: 15px 40px;
font-size: 24px;
font-weight: bold;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 5px 15px rgba(255, 64, 129, 0.4);
outline: none;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(255, 64, 129, 0.6);
}
button:active {
transform: scale(0.95);
}
.controls-hint {
margin-top: 20px;
font-size: 14px;
color: #aaa;
}
.hearts {
color: #ff4081;
}
</style>
</head>
<body>
<div id="game-container">
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div id="ui-layer">
<div class="hud">
<div id="scoreDisplay">Score: 0</div>
<div id="livesDisplay">Lives: ❤️❤️❤️</div>
</div>
</div>
<div id="start-screen">
<h1>BURGER BREAKOUT</h1>
<p>Break the bricks and let the love explode! <br>Control the Hamburger Paddle with your mouse.</p>
<button id="startBtn">PLAY NOW</button>
<div class="controls-hint">Mouse to move • Click to launch</div>
</div>
<div id="game-over-screen" class="hidden">
<h1 id="end-title">GAME OVER</h1>
<p>Final Score: <span id="final-score">0</span></p>
<button id="restartBtn">PLAY AGAIN</button>
</div>
</div>
<script>
/**
* Game Configuration & Constants
*/
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('scoreDisplay');
const livesDisplay = document.getElementById('livesDisplay');
const startScreen = document.getElementById('start-screen');
const gameOverScreen = document.getElementById('game-over-screen');
const finalScoreSpan = document.getElementById('final-score');
const endTitle = document.getElementById('end-title');
// Game State
let animationId;
let score = 0;
let lives = 3;
let isGameRunning = false;
let particles = [];
let bricks = [];
// Colors
const BRICK_COLORS = ['#ef5350', '#ec407a', '#ab47bc', '#7e57c2', '#5c6bc0', '#42a5f5', '#26a69a'];
// Hamburger Assets
const bunColor = '#fdd835';
const pattyColor = '#5d4037';
const cheeseColor = '#ffeb3b';
const lettuceColor = '#8bc34a';
// Game Objects
const ball = {
x: canvas.width / 2,
y: canvas.height - 30,
dx: 4,
dy: -4,
radius: 10,
speed: 5,
active: false
};
const paddle = {
x: canvas.width / 2 - 60, // Paddle is wider
y: canvas.height - 20,
width: 120,
height: 40,
color: '#ff7043'
};
const brickConfig = {
rows: 6,
cols: 9,
padding: 10,
offsetTop: 60,
offsetLeft: 35,
height: 25,
// Width calculated dynamically
};
/**
* Particle System for Heart Explosion
*/
class HeartParticle {
constructor(x, y) {
this.x = x;
this.y = y;
// Random velocity for explosion effect
this.vx = (Math.random() - 0.5) * 10;
this.vy = (Math.random() - 1) * 10;
this.gravity = 0.4;
this.alpha = 1;
this.size = Math.random() * 15 + 5;
this.rotation = Math.random() * Math.PI * 2;
this.rotationSpeed = (Math.random() - 0.5) * 0.2;
this.color = `hsl(${Math.random() * 60 + 320}, 100%, 70%)`; // Pinks and Reds
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.rotation += this.rotationSpeed;
this.alpha -= 0.015;
this.size *= 0.96; // Shrink over time
}
draw() {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.translate(this.x, this.y);
ctx.rotate(this.rotation);
ctx.fillStyle = this.color;
ctx.beginPath();
// Draw Heart Shape
const s = this.size / 2;
ctx.moveTo(0, -s/2);
ctx.bezierCurveTo(s/2, -s, s, -s/3, 0, s);
ctx.bezierCurveTo(-s, -s/3, -s/2, -s, 0, -s/2);
ctx.fill();
ctx.restore();
}
}
function createExplosion(x, y) {
const particleCount = 12; // "tons" of hearts
for (let i = 0; i < particleCount; i++) {
particles.push(new HeartParticle(x, y));
}
}
/**
* Game Logic Functions
*/
function initBricks() {
bricks = [];
const totalWidth = canvas.width;
const availableWidth = totalWidth - (brickConfig.offsetLeft * 2);
const brickWidth = (availableWidth - (brickConfig.padding * (brickConfig.cols - 1))) / brickConfig.cols;
for (let c = 0; c < brickConfig.cols; c++) {
for (let r = 0; r < brickConfig.rows; r++) {
const brickX = (c * (brickWidth + brickConfig.padding)) + brickConfig.offsetLeft;
const brickY = (r * (brickConfig.height + brickConfig.padding)) + brickConfig.offsetTop;
bricks.push({
x: brickX,
y: brickY,
w: brickWidth,
h: brickConfig.height,
status: 1,
color: BRICK_COLORS[r % BRICK_COLORS.length]
});
}
}
}
function drawHamburgerPaddle() {
const x = paddle.x;
const y = paddle.y;
const w = paddle.width;
const h = paddle.height;
// 1. Bottom Bun
ctx.fillStyle = bunColor;
roundRect(ctx, x, y + h/2, w, h/2, 5);
// Sesame Seeds (Bottom)
ctx.fillStyle = '#fffbe6';
for(let i=0; i<5; i++){
ctx.beginPath();
ctx.arc(x + 15 + (i*20), y + h - 8, 2, 0, Math.PI*2);
ctx.fill();
}
// 2. Lettuce
ctx.fillStyle = lettuceColor;
ctx.fillRect(x, y + h/2 - 5, w, 5);
// Wavy lettuce effect
ctx.strokeStyle = '#689f38';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(x, y + h/2 - 2);
for(let i=0; i<=w; i+=10) {
ctx.lineTo(x + i, y + h/2 - 5 + (i%20===0 ? 3 : -3));
}
ctx.stroke();
// 3. Cheese
ctx.fillStyle = cheeseColor;
ctx.beginPath();
ctx.moveTo(x, y + h/2);
ctx.lineTo(x + w, y + h/2);
ctx.lineTo(x + w - 10, y + h/2 - 10);
ctx.lineTo(x + 10, y + h/2 - 10);
ctx.closePath();
ctx.fill();
// Cheese drips
ctx.beginPath();
ctx.moveTo(x + 20, y + h/2);
ctx.lineTo(x + 20, y + h/2 + 8);
ctx.lineTo(x + 25, y + h/2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(x + 80, y + h/2);
ctx.lineTo(x + 80, y + h/2 + 6);
ctx.lineTo(x + 85, y + h/2);
ctx.fill();
// 4. Patty (Middle)
ctx.fillStyle = pattyColor;
roundRect(ctx, x, y + 5, w, h - 15, 3);
// Char marks on patty
ctx.strokeStyle = '#3e2723';
ctx.lineWidth = 2;
for(let i=0; i<4; i++) {
ctx.beginPath();
ctx.arc(x + 15 + (i*25), y + h/2, 3, 0, Math.PI*2);
ctx.stroke();
}
// 5. Top Bun
ctx.fillStyle = bunColor;
roundRect(ctx, x, y, w, h/2 + 5, [0, 0, 15, 15]); // Rounded bottom corners only
// Sesame Seeds (Top)
ctx.fillStyle = '#fffbe6';
for(let i=0; i<5; i++){
ctx.beginPath();
ctx.arc(x + 10 + (i*23), y + 8, 2, 0, Math.PI*2);
ctx.fill();
}
}
// Helper for rounded rectangles
function roundRect(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.fill();
}
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
// Ketchup/Sesame look
const gradient = ctx.createRadialGradient(ball.x - 3, ball.y - 3, 2, ball.x, ball.y, ball.radius);
gradient.addColorStop(0, '#ffb7b2');
gradient.addColorStop(1, '#d32f2f');
ctx.fillStyle = gradient;
ctx.fill();
ctx.strokeStyle = '#b71c1c';
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
}
function drawBricks() {
bricks.forEach(brick => {
if (brick.status === 1) {
ctx.fillStyle = brick.color;
ctx.beginPath();
roundRect(ctx, brick.x, brick.y, brick.w, brick.h, 4);
ctx.fill();
// 3D effect / Highlight
ctx.fillStyle = 'rgba(255,255,255,0.2)';
ctx.fillRect(brick.x, brick.y, brick.w, 5);
}
});
}
function updateParticles() {
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.update();
if (p.alpha <= 0 || p.size < 0.5) {
particles.splice(i, 1);
}
}
}
function drawParticles() {
particles.forEach(p => p.draw());
}
function collisionDetection() {
// Ball vs Bricks
let activeBricks = 0;
bricks.forEach(brick => {
if (brick.status === 1) {
activeBricks++;
if (ball.x > brick.x && ball.x < brick.x + brick.w &&
ball.y > brick.y && ball.y < brick.y + brick.h) {
ball.dy = -ball.dy;
brick.status = 0;
score += 10;
scoreDisplay.innerText = `Score: ${score}`;
createExplosion(brick.x + brick.w/2, brick.y + brick.h/2);
// Speed up slightly
if (score % 100 === 0) {
ball.dx *= 1.05;
ball.dy *= 1.05;
}
}
}
});
if (activeBricks === 0 && isGameRunning) {
gameOver(true);
}
// Ball vs Walls
if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
ball.dx = -ball.dx;
}
if (ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
// Ball vs Paddle
if (ball.y + ball.dy > paddle.y - ball.radius &&
ball.y + ball.dy < paddle.y + paddle.height &&
ball.x > paddle.x &&
ball.x < paddle.x + paddle.width) {
ball.dy = -ball.dy;
// Add "English" (spin) based on where it hit the paddle
const hitPoint = ball.x - (paddle.x + paddle.width / 2);
ball.dx = hitPoint * 0.15;
// Prevent ball getting stuck inside paddle
ball.y = paddle.y - ball.radius - 1;
}
// Ball vs Bottom (Death)
if (ball.y + ball.dy > canvas.height) {
lives--;
updateLivesDisplay();
if (lives <= 0) {
gameOver(false);
} else {
resetBall();
}
}
}
function updateLivesDisplay() {
let hearts = '';
for(let i=0; i<lives; i++) hearts += '❤️';
livesDisplay.innerText = `Lives: ${hearts}`;
}
function resetBall() {
ball.active = false;
ball.x = paddle.x + paddle.width / 2;
ball.y = paddle.y - 20;
ball.dx = 4;
ball.dy = -4;
}
function update() {
if (!isGameRunning) return;
// Clear Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Game Objects
drawBricks();
drawHamburgerPaddle();
drawParticles();
if (ball.active) {
ball.x += ball.dx;
ball.y += ball.dy;
drawBall();
collisionDetection();
} else {
// Ball sticks to paddle before launch
ball.x = paddle.x + paddle.width / 2;
ball.y = paddle.y - 20;
drawBall();
}
animationId = requestAnimationFrame(update);
}
function startGame() {
score = 0;
lives = 3;
particles = [];
scoreDisplay.innerText = "Score: 0";
updateLivesDisplay();
initBricks();
resetBall();
isGameRunning = true;
startScreen.classList.add('hidden');
gameOverScreen.classList.add('hidden');
// Launch ball automatically for demo mode
setTimeout(() => {
if(isGameRunning) {
ball.active = true;
ball.dy = -5;
}
}, 1000);
update();
}
function gameOver(win) {
isGameRunning = false;
cancelAnimationFrame(animationId);
finalScoreSpan.innerText = score;
endTitle.innerText = win ? "YOU WINS THE LOVE!" : "BURGER WASTED";
endTitle.style.color = win ? "#8bc34a" : "#ef5350";
gameOverScreen.classList.remove('hidden');
}
/**
* Input Handling
*/
// Mouse Movement
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const root = document.documentElement;
const mouseX = e.clientX - rect.left - root.scrollLeft;
paddle.x = mouseX - paddle.width / 2;
// Clamp paddle to canvas
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
});
// Mouse Click (Launch)
canvas.addEventListener('mousedown', () => {
if (isGameRunning && !ball.active) {
ball.active = true;
ball.dy = -5;
ball.dx = 3 + (Math.random() * 2); // Slight random variation
}
});
// Touch support for mobile
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const touchX = e.touches[0].clientX - rect.left;
paddle.x = touchX - paddle.width / 2;
if (paddle.x < 0) paddle.x = 0;
if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
}, { passive: false });
canvas.addEventListener('touchstart', (e) => {
if (isGameRunning && !ball.active) {
ball.active = true;
ball.dy = -5;
ball.dx = 3;
}
}, { passive: false });
// Button Listeners
document.getElementById('startBtn').addEventListener('click', startGame);
document.getElementById('restartBtn').addEventListener('click', startGame);
// Initial Render (Background)
ctx.fillStyle = '#2c0e37';
ctx.fillRect(0,0, canvas.width, canvas.height);
// Draw static background elements
drawBricks(); // Just to show layout
drawHamburgerPaddle();
// Draw some static hearts on background
ctx.fillStyle = "rgba(255, 64, 129, 0.1)";
for(let i=0; i<20; i++){
const hx = Math.random() * canvas.width;
const hy = Math.random() * canvas.height;
const size = Math.random() * 30;
ctx.beginPath();
ctx.arc(hx, hy, size/2, 0, Math.PI*2);
ctx.fill();
}
</script>
</body>
</html>