Models 44

Qwen3 Coder Next

by Qwenreasoning defaultClean
Open in new window

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>