Nemotron 3.5 Super VL (free)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heart Breakout</title>
    <style>
        :root {
            --bg: #fceeff;
            --ui-text: #d6336c;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            background: var(--bg);
            font-family: 'Segoe UI', system-ui, sans-serif;
            color: #d6336c;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            touch-action: none;
        }
        canvas {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(214, 51, 108, 0.15);
            display: block;
        }
        #ui {
            position: relative;
            text-align: center;
            margin-top: 10px;
        }
        #overlay {
            position: absolute;
            inset: 0;
            background: rgba(252, 238, 255, 0.85);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            cursor: pointer;
            z-index: 10;
        }
        #overlay h1 {
            margin: 0 0 8px;
            font-size: clamp(24px, 6vw, 42px);
            color: #d6336c;
            letter-spacing: 2px;
        }
        #overlay p {
            margin: 0 0 16px;
            font-size: clamp(13px, 3vw, 18px);
            color: #b04a7a;
        }
        .btn {
            background: #d6336c;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 999px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 700;
            box-shadow: 0 4px 12px rgba(214, 51, 108, 0.35);
        }
        .btn:hover { background: #c12c60; }
        .hud {
            display: flex;
            justify-content: space-between;
            max-width: 600px;
            width: 100%;
            font-size: 14px;
            margin-top: 8px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <canvas id="game"></canvas>
    <div id="ui">
        <div id="overlay">
            <h1>Heart Breakout</h1>
            <p>Break bricks for hearts</p>
            <button class="btn" id="startBtn">Click to Start</button>
        </div>
        <div class="hud">
            <span id="score">Score: 0</span>
            <span id="lives">Lives: 3</span>
        </div>
    </div>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');
const livesEl = document.getElementById('lives');
const startBtn = document.getElementById('startBtn');
const overlay = document.getElementById('overlay');

// Responsive sizing
function resize() {
    const maxW = Math.min(window.innerWidth - 32, 700);
    canvas.width = maxW;
    canvas.height = maxW * 0.85; // ~ 4:3-ish
}
window.addEventListener('resize', resize);
resize();

// Game state
const state = {
    score: 0,
    lives: 3,
    started: false,
    gameOver: false,
    won: false
};

// Particles (hearts)
const particles = [];

function rand(min, max) { return Math.random() * (max - min) + min; }

function spawnHearts(x, y, count) {
    for (let i = 0; i < count; i++) {
        const angle = rand(0, Math.PI * 2);
        const speed = rand(1.5, 6);
        particles.push({
            x, y,
            vx: Math.cos(angle) * speed,
            vy: Math.sin(angle) * speed,
            life: 1.0,
            decay: rand(0.015, 0.035),
            size: rand(4, 10),
            color: `hsl(${rand(330, 360)}, 100%, ${rand(60, 80)}%)`
        });
    }
}

// Paddle (hamburger drawn with canvas)
const paddle = {
    w: 110,
    h: 34,
    x: 0,
    y: 0,
    speed: 7,
    dx: 0
};

// Ball
const ball = {
    x: 0, y: 0,
    r: 8,
    vx: 4, vy: -4,
    active: false
};

// Bricks
const bricks = [];
const brickCols = 7;
const brickRows = 4;
const brickPadding = 8;
const brickOffsetTop = 40;
const brickOffsetLeft = 20;
const brickWidth = 0;
const brickHeight = 24;

function initLevel() {
    bricks.length = 0;
    // recompute brick width based on canvas
    const bw = (canvas.width - brickOffsetLeft * 2 - brickPadding * (brickCols - 1)) / brickCols;
    for (let c = 0; c < brickCols; c++) {
        for (let r = 0; r < brickRows; r++) {
            const brickX = brickOffsetLeft + c * (bw + brickPadding);
            const brickY = brickOffsetTop + r * (brickHeight + brickPadding);
            bricks.push({
                x: brickX, y: brickY,
                w: bw, h: brickHeight,
                alive: true,
                hits: r === 0 ? 2 : 1, // top row tougher
                color: `hsl(${330 - r * 20}, 80%, 70%)`
            });
        }
    }
}

function resetBall() {
    ball.x = canvas.width / 2;
    ball.y = paddle.y - ball.r - 2;
    ball.vx = (Math.random() > 0.5 ? 1 : -1) * 4;
    ball.vy = -4;
    ball.active = false;
}

function resetRound() {
    paddle.x = canvas.width / 2 - paddle.w / 2;
    resetBall();
}

function updatePaddle() {
    paddle.x += paddle.dx;
    if (paddle.x < 0) paddle.x = 0;
    if (paddle.x + paddle.w > canvas.width) paddle.x = canvas.width - paddle.w;
}

function drawHamburger(x, y, w, h) {
    // bun top
    ctx.fillStyle = '#f5d7a3';
    ctx.beginPath();
    ctx.moveTo(x, y + h * 0.35);
    ctx.quadraticCurveTo(x + w * 0.25, y, x + w * 0.5, y + h * 0.35);
    ctx.quadraticCurveTo(x + w * 0.75, y, x + w, y + h * 0.35);
    ctx.lineTo(x + w, y + h * 0.55);
    ctx.quadraticCurveTo(x + w * 0.75, y + h * 0.35, x + w * 0.5, y + h * 0.55);
    ctx.quadraticCurveTo(x + w * 0.25, y + h * 0.35, x, y + h * 0.55);
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = '#d9a06b';
    ctx.lineWidth = 2;
    ctx.stroke();

    // patty
    ctx.fillStyle = '#a65d2f';
    ctx.beginPath();
    ctx.moveTo(x + w * 0.1, y + h * 0.55);
    ctx.lineTo(x + w * 0.9, y + h * 0.55);
    ctx.lineTo(x + w * 0.9, y + h * 0.78);
    ctx.lineTo(x + w * 0.1, y + h * 0.78);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    // cheese
    ctx.fillStyle = '#fde047';
    ctx.beginPath();
    ctx.moveTo(x + w * 0.15, y + h * 0.62);
    ctx.lineTo(x + w * 0.85, y + h * 0.62);
    ctx.lineTo(x + w * 0.8, y + h * 0.7);
    ctx.lineTo(x + w * 0.2, y + h * 0.7);
    ctx.closePath();
    ctx.fill();

    // lettuce
    ctx.fillStyle = '#86c24a';
    ctx.beginPath();
    ctx.moveTo(x + w * 0.12, y + h * 0.7);
    ctx.quadraticCurveTo(x + w * 0.3, y + h * 0.62, x + w * 0.5, y + h * 0.7);
    ctx.quadraticCurveTo(x + w * 0.7, y + h * 0.62, x + w * 0.88, y + h * 0.7);
    ctx.lineTo(x + w * 0.88, y + h * 0.85);
    ctx.quadraticCurveTo(x + w * 0.7, y + h * 0.78, x + w * 0.5, y + h * 0.85);
    ctx.quadraticCurveTo(x + w * 0.3, y + h * 0.78, x + w * 0.12, y + h * 0.85);
    ctx.closePath();
    ctx.fill();

    // bun bottom
    ctx.fillStyle = '#e8c19e';
    ctx.beginPath();
    ctx.moveTo(x, y + h * 0.6);
    ctx.quadraticCurveTo(x + w * 0.25, y + h * 0.85, x + w * 0.5, y + h);
    ctx.quadraticCurveTo(x + w * 0.75, y + h * 0.85, x + w, y + h * 0.6);
    ctx.lineTo(x + w, y + h * 0.75);
    ctx.quadraticCurveTo(x + w * 0.75, y + h * 0.85, x + w * 0.5, y + h * 0.75);
    ctx.quadraticCurveTo(x + w * 0.25, y + h * 0.85, x, y + h * 0.75);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

function drawBall() {
    ctx.fillStyle = '#ff69b4';
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = '#d6336c';
    ctx.lineWidth = 1.5;
    ctx.stroke();
}

function drawBricks() {
    for (const b of bricks) {
        if (!b.alive) continue;
        ctx.fillStyle = b.color;
        ctx.beginPath();
        ctx.roundRect(b.x, b.y, b.w, b.h, 6);
        ctx.fill();
        ctx.strokeStyle = 'rgba(255,255,255,0.5)';
        ctx.lineWidth = 2;
        ctx.stroke();
    }
}

function drawParticles() {
    for (const p of particles) {
        ctx.globalAlpha = p.life;
        ctx.fillStyle = p.color;
        ctx.beginPath();
        // heart shape
        const s = p.size;
        ctx.moveTo(p.x, p.y);
        ctx.bezierCurveTo(p.x - s/2, p.y - s/2, p.x - s, p.y + s/3, p.x, p.y + s);
        ctx.bezierCurveTo(p.x + s, p.y + s/3, p.x + s/2, p.y - s/2, p.x, p.y);
        ctx.closePath();
        ctx.fill();
        ctx.globalAlpha = 1.0;
    }
}

function updateParticles() {
    for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.vy += 0.15; // gravity
        p.vx *= 0.96;
        p.life -= p.decay;
        if (p.life <= 0) particles.splice(i, 1);
    }
}

function rectCircleCollide(cx, cy, rx, ry, rw, rh) {
    const testX = cx < rx ? rx : cx > rx + rw ? rx + rw : cx;
    const testY = cy < ry ? ry : cy > ry + rh ? ry + rh : cy;
    const dx = cx - testX;
    const dy = cy - testY;
    return dx * dx + dy * dy < ball.r * ball.r;
}

function update() {
    if (!state.started || state.gameOver) return;

    updatePaddle();

    // launch ball with paddle if not active
    if (!ball.active) {
        ball.x = paddle.x + paddle.w / 2;
        ball.y = paddle.y - ball.r - 2;
        if (state.launch) {
            ball.active = true;
            state.launch = false;
        }
    } else {
        ball.x += ball.vx;
        ball.y += ball.vy;

        // walls
        if (ball.x - ball.r < 0) { ball.x = ball.r; ball.vx *= -1; }
        if (ball.x + ball.r > canvas.width) { ball.x = canvas.width - ball.r; ball.vx *= -1; }
        if (ball.y - ball.r < 0) { ball.y = ball.r; ball.vy *= -1; }

        // paddle
        if (ball.vy > 0 && rectCircleCollide(ball.x, ball.y, paddle.x, paddle.y, paddle.w, paddle.h)) {
            const hitPos = (ball.x - paddle.x) / paddle.w; // 0..1
            const angle = (hitPos - 0.5) * (Math.PI / 3); // -60 to 60 deg
            const speed = Math.hypot(ball.vx, ball.vy);
            ball.vx = Math.sin(angle) * speed;
            ball.vy = -Math.cos(angle) * speed;
            ball.y = paddle.y - ball.r - 1;
            // slight speedup
            if (speed < 9) { ball.vx *= 1.03; ball.vy *= 1.03; }
        }

        // bricks
        for (const b of bricks) {
            if (!b.alive) continue;
            if (rectCircleCollide(ball.x, ball.y, b.x, b.y, b.w, b.h)) {
                const prevX = ball.x - ball.vx;
                const prevY = ball.y - ball.vy;
                // determine side
                const dx = Math.abs(prevX - (b.x + b.w / 2));
                const dy = Math.abs(prevY - (b.y + b.h / 2));
                if (dx > dy) ball.vx *= -1; else ball.vy *= -1;

                b.hits--;
                if (b.hits <= 0) {
                    b.alive = false;
                    state.score += 10;
                    spawnHearts(b.x + b.w / 2, b.y + b.h / 2, 14);
                    scoreEl.textContent = 'Score: ' + state.score;
                }
                break; // one brick per frame
            }
        }

        // bottom
        if (ball.y - ball.r > canvas.height) {
            state.lives--;
            livesEl.textContent = 'Lives: ' + state.lives;
            if (state.lives <= 0) {
                state.gameOver = true;
            } else {
                resetRound();
            }
        }
    }

    // win check
    if (bricks.every(b => !b.alive)) {
        state.won = true;
        state.gameOver = true;
    }

    updateParticles();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // subtle bg gradient
    const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
    grad.addColorStop(0, '#fff5fb');
    grad.addColorStop(1, '#fceeff');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    drawBricks();
    drawParticles();
    drawHamburger(paddle.x, paddle.y, paddle.w, paddle.h);
    drawBall();

    if (!state.started) {
        ctx.fillStyle = 'rgba(214, 51, 108, 0.45)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#d6336c';
        ctx.font = 'bold 20px system-ui';
        ctx.textAlign = 'center';
        ctx.fillText('Click or press a key to start', canvas.width / 2, canvas.height / 2 + 10);
        ctx.textAlign = 'start';
    }
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

// Input
function setLeft(v) { paddle.dx = v ? -paddle.speed : 0; }
function setRight(v) { paddle.dx = v ? paddle.speed : 0; }

window.addEventListener('keydown', e => {
    if (!state.started && (e.code === 'Space' || e.code === 'Enter')) {
        startGame();
        return;
    }
    if (!state.started) return;
    if (e.code === 'ArrowLeft' || e.code === 'KeyA') setLeft(true);
    if (e.code === 'ArrowRight' || e.code === 'KeyD') setRight(true);
    if (e.code === 'Space' && !ball.active) state.launch = true;
});
window.addEventListener('keyup', e => {
    if (e.code === 'ArrowLeft' || e.code === 'KeyA') setLeft(false);
    if (e.code === 'ArrowRight' || e.code === 'KeyD') setRight(false);
});

// Touch / mouse control
canvas.addEventListener('mousemove', e => {
    if (!state.started) return;
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    paddle.x = mx - paddle.w / 2;
});
canvas.addEventListener('touchmove', e => {
    e.preventDefault();
    const rect = canvas.getBoundingClientRect();
    const mx = e.touches[0].clientX - rect.left;
    paddle.x = mx - paddle.w / 2;
}, { passive: false });
canvas.addEventListener('touchstart', e => {
    if (!state.started) return;
    state.launch = true;
});

startBtn.addEventListener('click', startGame);
overlay.addEventListener('click', startGame);

function startGame() {
    if (state.started && !state.gameOver) return;
    state.started = true;
    state.gameOver = false;
    state.won = false;
    state.score = 0;
    state.lives = 3;
    scoreEl.textContent = 'Score: 0';
    livesEl.textContent = 'Lives: 3';
    overlay.style.display = 'none';
    paddle.w = 110;
    paddle.h = 34;
    paddle.y = canvas.height - 50;
    initLevel();
    resetRound();
}

loop();
</script>
</body>
</html>