What qwen3.6-35b-a3b did

Successfully wrote 2143 bytes to /home/lzieniew/Documents/vram-arcade/.work/game-breakout__qwen3.6-35b-a4b__minimal-v1/index.html

Successfully wrote 16876 bytes to /home/lzieniew/Documents/vram-arcade/.work/game-breakout__qwen3.6-35b-a3b__minimal-v1/game.js

game-breakout__muse-glimmer-30b__minimal-v1
game-breakout__nemotron-3.5-lightning-30b-a3b__minimal-v1
game-breakout__qwen3.6-35b-a3b__minimal-v1
game-breakout__qwen3.6-35b-a4b__minimal-v1
pi-config

/home/lzieniew/Documents/vram-arcade/.work/game-breakout__qwen3.6-35b-a3b__minimal-v1
total 32
drwxr-xr-x 3 lzieniew lzieniew  4096 Aug 13 01:53 .
drwxr-xr-x 7 lzieniew lzieniew  4096 Aug 13 01:52 ..
-rw-r--r-- 1 lzieniew lzieniew 19124 Aug 13 01:53 game.js
drwxr-xr-x 2 lzieniew lzieniew  4096 Aug 13 01:52 .session

/home/lzieniew/Documents/vram-arcade/.work/game-breakout__qwen3.6-35b-a3b__minimal-v1

game.js

Successfully wrote 2140 bytes to index.html

/* ──────────────────────────────────────────────────
   Breakout – complete game logic
   ────────────────────────────────────────────────── */

// ── Canvas & context ─────────────────────────────
const canvas  = document.getElementById('game');
const ctx     = canvas.getContext('2d');
const W       = canvas.width;          // 960
const H       = canvas.height;         // 600
const scoreEl = document.getElementById('score-val');
const livesEl = document.getElementById('lives-val');

// ── Audio (WebAudio, no external files) ──────────
let audioCtx = null;
function ensureAudio() {
  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  if (audioCtx.state === 'suspended') audioCtx.resume();
}

function playTone(freq, dur, type, vol, detune) {
  if (!audioCtx) return;
  const osc  = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type        = type || 'square';
  osc.frequency.value = freq;
  if (detune) osc.detune.value = detune;
  gain.gain.setValueAtTime(vol || 0.08, audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
  osc.connect(gain).connect(audioCtx.destination);
  osc.start();
  osc.stop(audioCtx.currentTime + dur);
}

function sfxBrick()       { playTone(880, 0.10, 'square', 0.07); }
function sfxPaddle()      { playTone(330, 0.07, 'triangle', 0.06); }
function sfxLoseLife()    {
  playTone(440, 0.15, 'sawtooth', 0.09);
  setTimeout(() => playTone(220, 0.25, 'sawtooth', 0.10), 120);
}
function sfxWin() {
  [523,659,784,1047].forEach((f,i) => setTimeout(() => playTone(f,0.18,'square',0.07), i*120));
}
function sfxLose()  {
  [400,320,260,180].forEach((f,i) => setTimeout(() => playTone(f,0.22,'sawtooth',0.07), i*150));
}

// ── Constants ────────────────────────────────────
const BRICK_COLS = 8;
const BRICK_ROWS = 5;
const BRICK_H    = 22;
const BRICK_GAP  = 4;
const BRICK_PAD  = 40;          // left/right padding of brick area
const BRICK_W    = Math.floor((W - BRICK_PAD * 2 - (BRICK_COLS - 1) * BRICK_GAP) / BRICK_COLS);
const BRICK_TOP  = 50;
const PADDLE_W   = 110;
const PADDLE_H   = 14;
const PADDLE_Y   = H - 40;
const BALL_R     = 8;
const BASE_SPEED = 280;         // px / second
const MAX_SPEED  = 520;
const SPEED_INC  = 6;           // px/s per brick destroyed
const LAUNCH_KEYS = ['Space', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];

const ROW_COLORS = [
  '#ff4466', '#ff8844', '#ffcc33', '#44dd88', '#4488ff',
];
const ROW_HP   = [2, 2, 1, 1, 1];   // top 2 rows take 2 hits

// ── Game state ───────────────────────────────────
let bricks, ball, paddle, score, lives, state, shake, trail;
let keys = {};
let mouseX = W / 2;

// ── Particles ────────────────────────────────────
let particles = [];

function spawnParticles(x, y, color, count) {
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 60 + Math.random() * 180;
    particles.push({
      x, y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 0.3 + Math.random() * 0.4,
      maxLife: 0.3 + Math.random() * 0.4,
      color,
      size: 2 + Math.random() * 3,
    });
  }
}

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

function drawParticles() {
  for (const p of particles) {
    const a = Math.max(0, p.life / p.maxLife);
    ctx.globalAlpha = a;
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size * a, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;
}

// ── Trail ────────────────────────────────────────
const TRAIL_LEN = 12;
function initTrail() {
  trail = [];
  for (let i = 0; i < TRAIL_LEN; i++) trail.push({ x: W / 2, y: PADDLE_Y - BALL_R });
}

// ── Screen shake ─────────────────────────────────
let shakeAmount = 0;
let shakeDecay  = 12;

function triggerShake(amount) { shakeAmount = Math.min(amount, 8); }

// ── Brick grid ───────────────────────────────────
function createBricks() {
  const arr = [];
  for (let r = 0; r < BRICK_ROWS; r++) {
    for (let c = 0; c < BRICK_COLS; c++) {
      arr.push({
        x: BRICK_PAD + c * (BRICK_W + BRICK_GAP),
        y: BRICK_TOP + r * (BRICK_H + BRICK_GAP),
        w: BRICK_W,
        h: BRICK_H,
        hp: ROW_HP[r],
        maxHp: ROW_HP[r],
        color: ROW_COLORS[r],
        alive: true,
        flash: 0,
      });
    }
  }
  return arr;
}

// ── Initialise a fresh game ──────────────────────
function initGame() {
  bricks      = createBricks();
  score       = 0;
  lives       = 3;
  particles   = [];
  shakeAmount = 0;
  initTrail();
  resetBall();
  updateHUD();
}

function resetBall() {
  ball = {
    x: W / 2,
    y: PADDLE_Y - BALL_R - 1,
    vx: 0,
    vy: 0,
    speed: BASE_SPEED,
    stuck: true,
  };
}

function launchBall() {
  if (ball.stuck) {
    ball.stuck = false;
    const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.6; // slight random
    ball.vx = Math.cos(angle) * ball.speed;
    ball.vy = Math.sin(angle) * ball.speed;
  }
}

function updateHUD() {
  scoreEl.textContent = score;
  livesEl.textContent = lives;
}

// ── Input ────────────────────────────────────────
document.addEventListener('keydown', e => {
  if (LAUNCH_KEYS.includes(e.code)) e.preventDefault();
  keys[e.code] = true;

  if (e.code === 'KeyP') {
    if (state === 'playing') state = 'paused';
    else if (state === 'paused') state = 'playing';
  }

  if ((e.code === 'Space' || e.code === 'Enter') && state === 'playing') {
    launchBall();
  }

  if ((e.code === 'Space' || e.code === 'Enter') && (state === 'won' || state === 'lost')) {
    initGame();
    state = 'playing';
  }
});
document.addEventListener('keyup', e => { keys[e.code] = false; });

canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  mouseX = (e.clientX - rect.left) * (W / rect.width);
});

canvas.addEventListener('mousedown', e => {
  e.preventDefault();
  ensureAudio();
  if (state === 'playing') launchBall();
  else if (state === 'won' || state === 'lost') { initGame(); state = 'playing'; }
});

window.addEventListener('blur', () => {
  if (state === 'playing') state = 'paused';
});
window.addEventListener('focus', () => {
  if (state === 'paused') state = 'playing';
});

// ── Collision helpers ────────────────────────────
function aabbOverlap(cx, cy, cr, rx, ry, rw, rh) {
  const closestX = Math.max(rx, Math.min(cx, rx + rw));
  const closestY = Math.max(ry, Math.min(cy, ry + rh));
  const dx = cx - closestX;
  const dy = cy - closestY;
  return (dx * dx + dy * dy) <= (cr * cr);
}

// ── Update ───────────────────────────────────────
function update(dt) {
  // ── Paddle movement ──────────────────────────
  const paddleSpeed = 450;
  if (keys['ArrowLeft'])  paddle.x -= paddleSpeed * dt;
  if (keys['ArrowRight']) paddle.x += paddleSpeed * dt;

  // Mouse paddle (only when mouse has moved recently or keys not pressed)
  if (!keys['ArrowLeft'] && !keys['ArrowRight']) {
    const targetX = mouseX - PADDLE_W / 2;
    const diff = targetX - paddle.x;
    paddle.x += diff * Math.min(1, 12 * dt);  // smooth follow
  }

  // Clamp paddle
  paddle.x = Math.max(0, Math.min(W - PADDLE_W, paddle.x));

  // ── Ball ─────────────────────────────────────
  if (ball.stuck) {
    ball.x = paddle.x + PADDLE_W / 2;
    ball.y = PADDLE_Y - BALL_R - 1;
    return;
  }

  // ── Sub-step for no-tunnel collision ─────────
  const steps = Math.max(4, Math.ceil(ball.speed * dt / (BRICK_H * 0.6)));
  const subDt = dt / steps;

  for (let s = 0; s < steps; s++) {
    ball.x += ball.vx * subDt;
    ball.y += ball.vy * subDt;

    // Wall bounces
    if (ball.x - BALL_R <= 0)   { ball.x = BALL_R;       ball.vx = Math.abs(ball.vx); sfxPaddle(); }
    if (ball.x + BALL_R >= W)   { ball.x = W - BALL_R;   ball.vx = -Math.abs(ball.vx); }
    if (ball.y - BALL_R <= 0)   { ball.y = BALL_R;       ball.vy =  Math.abs(ball.vy); }

    // Paddle bounce
    if (ball.vy > 0 &&
        ball.y + BALL_R >= PADDLE_Y &&
        ball.y + BALL_R <= PADDLE_Y + PADDLE_H + 4 &&
        ball.x >= paddle.x - BALL_R &&
        ball.x <= paddle.x + PADDLE_W + BALL_R) {
      // Normalise hit position: -1 (left edge) to +1 (right edge)
      const t = Math.max(0, Math.min(1, (ball.x - paddle.x) / PADDLE_W));
      const angle = (t - 0.5) * -1.2;  // -0.6 to +0.6 radians from vertical
      const speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
      ball.vx = Math.sin(angle) * speed;
      ball.vy = -Math.cos(angle) * speed;
      ball.y = PADDLE_Y - BALL_R - 0.5;
      sfxPaddle();
    }

    // Brick collisions
    for (const b of bricks) {
      if (!b.alive) continue;

      if (aabbOverlap(ball.x, ball.y, BALL_R, b.x, b.y, b.w, b.h)) {
        // Determine which face was hit
        const overlapLeft   = (ball.x + BALL_R) - b.x;
        const overlapRight  = (b.x + b.w) - (ball.x - BALL_R);
        const overlapTop    = (ball.y + BALL_R) - b.y;
        const overlapBottom = (b.y + b.h) - (ball.y - BALL_R);

        const minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom);

        if (minOverlap === overlapTop    && ball.vy > 0)    { ball.vy = -ball.vy; }
        else if (minOverlap === overlapBottom && ball.vy < 0) { ball.vy = -ball.vy; }
        else if (minOverlap === overlapLeft  && ball.vx < 0) { ball.vx = -ball.vx; }
        else if (minOverlap === overlapRight && ball.vx > 0) { ball.vx = -ball.vx; }

        // Damage brick
        b.hp--;
        b.flash = 0.15;
        score += 10;

        if (b.hp <= 0) {
          b.alive = false;
          score += 50;
          spawnParticles(b.x + b.w / 2, b.y + b.h / 2, b.color, 14);
          triggerShake(3);
        } else {
          spawnParticles(ball.x, ball.y, '#fff', 5);
        }

        updateHUD();
        sfxBrick();

        // Speed up
        const newSpeed = Math.min(MAX_SPEED, ball.speed + SPEED_INC);
        const currentSpeed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
        if (currentSpeed > 0) {
          ball.vx = (ball.vx / currentSpeed) * newSpeed;
          ball.vy = (ball.vy / currentSpeed) * newSpeed;
          ball.speed = newSpeed;
        }
        break;  // one brick per sub-step
      }
    }

    // Ball lost
    if (ball.y - BALL_R > H) {
      lives--;
      updateHUD();
      sfxLoseLife();
      if (lives <= 0) {
        state = 'lost';
        sfxLose();
      } else {
        resetBall();
      }
      break;
    }
  }

  // ── Trail update ─────────────────────────────
  if (!ball.stuck) {
    trail.unshift({ x: ball.x, y: ball.y });
    if (trail.length > TRAIL_LEN) trail.pop();
  }

  // ── Shake decay ──────────────────────────────
  if (shakeAmount > 0) shakeAmount = Math.max(0, shakeAmount - shakeDecay * dt);

  // ── Brick flash decay ────────────────────────
  for (const b of bricks) {
    if (b.flash > 0) b.flash -= dt;
  }

  // ── Particles ────────────────────────────────
  updateParticles(dt);

  // ── Win check ────────────────────────────────
  if (bricks.every(b => !b.alive) && state === 'playing') {
    state = 'won';
    sfxWin();
  }
}

// ── Render ───────────────────────────────────────
function render() {
  ctx.save();

  // Screen shake offset
  if (shakeAmount > 0) {
    const sx = (Math.random() - 0.5) * shakeAmount * 2;
    const sy = (Math.random() - 0.5) * shakeAmount * 2;
    ctx.translate(sx, sy);
  }

  // Background
  ctx.fillStyle = '#0e0e22';
  ctx.fillRect(0, 0, W, H);

  // Subtle grid lines
  ctx.strokeStyle = 'rgba(255,255,255,0.015)';
  ctx.lineWidth = 1;
  for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
  for (let y = 0; y < H; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }

  // ── Bricks ───────────────────────────────────
  for (const b of bricks) {
    if (!b.alive) continue;

    const dmg = b.hp < b.maxHp;

    // Brick body
    ctx.fillStyle = dmg ? darken(b.color, 0.55) : b.color;
    ctx.beginPath();
    roundRect(ctx, b.x, b.y, b.w, b.h, 3);
    ctx.fill();

    // Flash overlay
    if (b.flash > 0) {
      ctx.globalAlpha = b.flash / 0.15 * 0.7;
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      roundRect(ctx, b.x, b.y, b.w, h, 3);
      ctx.fill();
      ctx.globalAlpha = 1;
    }

    // Damage cracks (top 2 rows)
    if (dmg) {
      ctx.strokeStyle = 'rgba(0,0,0,0.35)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(b.x + b.w * 0.25, b.y);
      ctx.lineTo(b.x + b.w * 0.45, b.y + b.h * 0.5);
      ctx.lineTo(b.x + b.w * 0.35, b.y + b.h);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(b.x + b.w * 0.7, b.y + b.h * 0.2);
      ctx.lineTo(b.x + b.w * 0.55, b.y + b.h * 0.6);
      ctx.lineTo(b.x + b.w * 0.8, b.y + b.h * 0.9);
      ctx.stroke();
    }

    // Top highlight
    ctx.fillStyle = 'rgba(255,255,252,0.18)';
    ctx.fillRect(b.x + 2, b.y + 1, b.w - 4, 3);
  }

  // ── Trail ────────────────────────────────────
  if (!ball.stuck && trail.length > 1) {
    for (let i = 1; i < trail.length; i++) {
      const a = (1 - i / trail.length) * 0.3;
      ctx.globalAlpha = a;
      ctx.fillStyle = '#88bbff';
      ctx.beginPath();
      ctx.arc(trail[i].x, trail[i].y, BALL_R * (1 - i / trail.length * 0.5), 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  }

  // ── Ball ─────────────────────────────────────
  if (state !== 'lost') {
    // Glow
    const grd = ctx.createRadialGradient(ball.x, ball.y, 0, ball.x, ball.y, BALL_R * 3);
    grd.addColorStop(0, 'rgba(140,200,255,0.25)');
    grd.addColorStop(1, 'rgba(140,200,200,0)');
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, BALL_R * 3, 0, Math.PI * 2);
    ctx.fill();

    // Ball body
    ctx.fillStyle = '#fff';
    ctx.shadowColor = '#88ccff';
    ctx.shadowBlur = 10;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
  }

  // ── Paddle ───────────────────────────────────
  // Shadow
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  roundRect(ctx, paddle.x + 2, PADDLE_Y + 3, PADDLE_W, PADDLE_H, 5);
  ctx.fill();

  // Body gradient
  const pg = ctx.createLinearGradient(0, PADDLE_Y, 0, PADDLE_Y + PADDLE_H);
  pg.addColorStop(0, '#66ccff');
  pg.addColorStop(1, '#2277bb');
  ctx.fillStyle = pg;
  roundRect(ctx, paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H, 5);
  ctx.fill();

  // Top highlight
  ctx.fillStyle = 'rgba(255,255,250,0.35)';
  roundRect(ctx, paddle.x + 4, PADDLE_Y + 1, PADDLE_W - 8, 4, 2);
  ctx.fill();

  // ── Particles ───────────────────────────────
  drawParticles();

  // ── Overlays ─────────────────────────────────
  if (state === 'paused') {
    drawOverlay('PAUSED', 'Press P to resume');
  } else if (state === 'won') {
    drawOverlay('YOU WIN!', 'Score: ' + score + '  ·  Click or Space to play again');
  } else if (state === 'lost') {
    drawOverlay('GAME OVER', 'Score: ' + score + '  ·  Click or Space to try again');
  }

  ctx.restore();
}

function drawOverlay(title, sub) {
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(0, 0, W, H);

  ctx.textAlign = 'center';
  ctx.fillStyle = '#fff';
  ctx.font = 'bold 48px system-ui, sans-serif';
  ctx.shadowColor = 'rgba(100,180,255,0.6)';
  ctx.shadowBlur = 20;
  ctx.fillText(title, W / 2, H / 2 - 20);
  ctx.shadowBlur = 0;

  ctx.fillStyle = '#aac';
  ctx.font = '18px system-ui, sans-serif';
  ctx.fillText(sub, W / 2, H / 2 + 25);
}

// ── Utility ──────────────────────────────────────
function roundRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
  ctx.lineTo(x + w, y + h - r);
  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
  ctx.lineTo(x + r, y + h);
  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
  ctx.lineTo(x, y + r);
  ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();
}

function darken(hex, factor) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${Math.round(r * factor)},${Math.round(g * factor)},${Math.round(b * factor)})`;
}

// ── Game loop ────────────────────────────────────
let lastTime = 0;

const paddle = { x: W / 2 - PADDLE_W / 2 };  // mutable

function loop(timestamp) {
  requestAnimationFrame(loop);

  const dt = Math.min((timestamp - lastTime) / 1000, 0.05);  // cap at 50ms
  lastTime = timestamp;

  if (state === 'playing') {
    update(dt);
  }

  render();
}

// ── Start ────────────────────────────────────────
state = 'playing';
initGame();
requestAnimationFrame(loop);

if ((e.code === 'Space' || e.code === 'Enter') && (state === 'won' || state === 'lost')) {
    initGame();
    state = 'playing';
  }
});
document.addEventListener('keyup', e => { keys[e.code] = false; });

canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  mouseX = (e.clientX - rect.left) * (W / rect.width);
});

canvas.addEventListener('mousedown', e => {
  e.preventDefault();
  ensureAudio();
  if (state === 'playing') launchBall();
  else if (state === 'won' || state === 'lost') { initGame(); state = 'playing'; }
});

window.addEventListener('blur', () => {
  if (state === 'playing') state = 'paused';
});
window.addEventListener('focus', () => {
  if (state === 'paused') state = 'playing';
});

// ── Collision helpers ────────────────────────────
function aabbOverlap(cx, cy, cr, rx, ry, rw, rh) {
  const closestX = Math.max(rx, Math.min(cx, rx + rw));
  const closestY = Math.max(ry, Math.min(cy, ry + rh));
  const dx = cx - closestX;
  const dy = cy - closestY;
  return (dx * dx + dy * dy) <= (cr * cr);
}

// ── Update ───────────────────────────────────────
function update(dt) {
  // ── Paddle movement ──────────────────────────
  const paddleSpeed = 450;
  if (keys['ArrowLeft'])  paddle.x -= paddleSpeed * dt;
  if (keys['ArrowRight']) paddle.x += paddleSpeed * dt;

  // Mouse paddle (only when mouse has moved recently or keys not pressed)
  if (!keys['ArrowLeft'] && !keys['ArrowRight']) {
    const targetX = mouseX - PADDLE_W / 2;
    const diff = targetX - paddle.x;
    paddle.x += diff * Math.min(1, 12 * dt);  // smooth follow
  }

  // Clamp paddle
  paddle.x = Math.max(0, Math.min(W - PADDLE_W, paddle.x));

  // ── Ball ─────────────────────────────────────
  if (ball.stuck) {
    ball.x = paddle.x + PADDLE_W / 2;
    ball.y = PADDLE_Y - BALL_R - 1;
    return;
  }

  // ── Sub-step for no-tunnel collision ─────────
  const steps = Math.max(4, Math.ceil(ball.speed * dt / (BRICK_H * 0.6)));
  const subDt = dt / steps;

  for (let s = 0; s < steps; s++) {
    ball.x += ball.vx * subDt;
    ball.y += ball.vy * subDt;

    // Wall bounces
    if (ball.x - BALL_R <= 0)   { ball.x = BALL_R;       ball.vx = Math.abs(ball.vx); sfxPaddle(); }
    if (ball.x + BALL_R >= W)   { ball.x = W - BALL_R;   ball.vx = -Math.abs(ball.vx); }
    if (ball.y - BALL_R <= 0)   { ball.y = BALL_R;       ball.vy =  Math.abs(ball.vy); }

    // Paddle bounce
    if (ball.vy > 0 &&
        ball.y + BALL_R >= PADDLE_Y &&
        ball.y + BALL_R <= PADDLE_Y + PADDLE_H + 4 &&
        ball.x >= paddle.x - BALL_R &&
        ball.x <= paddle.x + PADDLE_W + BALL_R) {
      // Normalise hit position: -1 (left edge) to +1 (right edge)
      const t = Math.max(0, Math.min(1, (ball.x - paddle.x) / PADDLE_W));
      const angle = (t - 0.5) * -1.2;  // -0.6 to +0.6 radians from vertical
      const speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
      ball.vx = Math.sin(angle) * speed;
      ball.vy = -Math.cos(angle) * speed;
      ball.y = PADDLE_Y - BALL_R - 0.5;
      sfxPaddle();
    }

    // Brick collisions
    for (const b of bricks) {
      if (!b.alive) continue;

      if (aabbOverlap(ball.x, ball.y, BALL_R, b.x, b.y, b.w, b.h)) {
        // Determine which face was hit
        const overlapLeft   = (ball.x + BALL_R) - b.x;
        const overlapRight  = (b.x + b.w) - (ball.x - BALL_R);
        const overlapTop    = (ball.y + BALL_R) - b.y;
        const overlapBottom = (b.y + b.h) - (ball.y - BALL_R);


[269 more lines in file. Use offset=300 to continue.]

const minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom);

        if (minOverlap === overlapTop    && ball.vy > 0)    { ball.vy = -ball.vy; }
        else if (minOverlap === overlapBottom && ball.vy < 0) { ball.vy = -ball.vy; }
        else if (minOverlap === overlapLeft  && ball.vx < 0) { ball.vx = -ball.vx; }
        else if (minOverlap === overlapRight && ball.vx > 0) { ball.vx = -ball.vx; }

        // Damage brick
        b.hp--;
        b.flash = 0.15;
        score += 10;

        if (b.hp <= 0) {
          b.alive = false;
          score += 50;
          spawnParticles(b.x + b.w / 2, b.y + b.h / 2, b.color, 14);
          triggerShake(3);
        } else {
          spawnParticles(ball.x, ball.y, '#fff', 5);
        }

        updateHUD();
        sfxBrick();

        // Speed up
        const newSpeed = Math.min(MAX_SPEED, ball.speed + SPEED_INC);
        const currentSpeed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
        if (currentSpeed > 0) {
          ball.vx = (ball.vx / currentSpeed) * newSpeed;
          ball.vy = (ball.vy / currentSpeed) * newSpeed;
          ball.speed = newSpeed;
        }
        break;  // one brick per sub-step
      }
    }

    // Ball lost
    if (ball.y - BALL_R > H) {
      lives--;
      updateHUD();
      sfxLoseLife();
      if (lives <= 0) {
        state = 'lost';
        sfxLose();
      } else {
        resetBall();
      }
      break;
    }
  }

  // ── Trail update ─────────────────────────────
  if (!ball.stuck) {
    trail.unshift({ x: ball.x, y: ball.y });
    if (trail.length > TRAIL_LEN) trail.pop();
  }

  // ── Shake decay ──────────────────────────────
  if (shakeAmount > 0) shakeAmount = Math.max(0, shakeAmount - shakeDecay * dt);

  // ── Brick flash decay ────────────────────────
  for (const b of bricks) {
    if (b.flash > 0) b.flash -= dt;
  }

  // ── Particles ────────────────────────────────
  updateParticles(dt);

  // ── Win check ────────────────────────────────
  if (bricks.every(b => !b.alive) && state === 'playing') {
    state = 'won';
    sfxWin();
  }
}

// ── Render ───────────────────────────────────────
function render() {
  ctx.save();

  // Screen shake offset
  if (shakeAmount > 0) {
    const sx = (Math.random() - 0.5) * shakeAmount * 2;
    const sy = (Math.random() - 0.5) * shakeAmount * 2;
    ctx.translate(sx, sy);
  }

  // Background
  ctx.fillStyle = '#0e0e22';
  ctx.fillRect(0, 0, W, H);

  // Subtle grid lines
  ctx.strokeStyle = 'rgba(255,255,255,0.015)';
  ctx.lineWidth = 1;
  for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
  for (let y = 0; y < H; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }

  // ── Bricks ───────────────────────────────────
  for (const b of bricks) {
    if (!b.alive) continue;


[169 more lines in file. Use offset=400 to continue.]

const dmg = b.hp < b.maxHp;

    // Brick body
    ctx.fillStyle = dmg ? darken(b.color, 0.55) : b.color;
    ctx.beginPath();
    roundRect(ctx, b.x, b.y, b.w, b.h, 3);
    ctx.fill();

    // Flash overlay
    if (b.flash > 0) {
      ctx.globalAlpha = b.flash / 0.15 * 0.7;
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      roundRect(ctx, b.x, b.y, b.w, h, 3);
      ctx.fill();
      ctx.globalAlpha = 1;
    }

    // Damage cracks (top 2 rows)
    if (dmg) {
      ctx.strokeStyle = 'rgba(0,0,0,0.35)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(b.x + b.w * 0.25, b.y);
      ctx.lineTo(b.x + b.w * 0.45, b.y + b.h * 0.5);
      ctx.lineTo(b.x + b.w * 0.35, b.y + b.h);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(b.x + b.w * 0.7, b.y + b.h * 0.2);
      ctx.lineTo(b.x + b.w * 0.55, b.y + b.h * 0.6);
      ctx.lineTo(b.x + b.w * 0.8, b.y + b.h * 0.9);
      ctx.stroke();
    }

    // Top highlight
    ctx.fillStyle = 'rgba(255,255,252,0.18)';
    ctx.fillRect(b.x + 2, b.y + 1, b.w - 4, 3);
  }

  // ── Trail ────────────────────────────────────
  if (!ball.stuck && trail.length > 1) {
    for (let i = 1; i < trail.length; i++) {
      const a = (1 - i / trail.length) * 0.3;
      ctx.globalAlpha = a;
      ctx.fillStyle = '#88bbff';
      ctx.beginPath();
      ctx.arc(trail[i].x, trail[i].y, BALL_R * (1 - i / trail.length * 0.5), 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  }

  // ── Ball ─────────────────────────────────────
  if (state !== 'lost') {
    // Glow
    const grd = ctx.createRadialGradient(ball.x, ball.y, 0, ball.x, ball.y, BALL_R * 3);
    grd.addColorStop(0, 'rgba(140,200,255,0.25)');
    grd.addColorStop(1, 'rgba(140,200,200,0)');
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, BALL_R * 3, 0, Math.PI * 2);
    ctx.fill();

    // Ball body
    ctx.fillStyle = '#fff';
    ctx.shadowColor = '#88ccff';
    ctx.shadowBlur = 10;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
  }

  // ── Paddle ───────────────────────────────────
  // Shadow
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  roundRect(ctx, paddle.x + 2, PADDLE_Y + 3, PADDLE_W, PADDLE_H, 5);
  ctx.fill();

  // Body gradient
  const pg = ctx.createLinearGradient(0, PADDLE_Y, 0, PADDLE_Y + PADDLE_H);
  pg.addColorStop(0, '#66ccff');
  pg.addColorStop(1, '#2277bb');
  ctx.fillStyle = pg;
  roundRect(ctx, paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H, 5);
  ctx.fill();

  // Top highlight
  ctx.fillStyle = 'rgba(255,255,250,0.35)';
  roundRect(ctx, paddle.x + 4, PADDLE_Y + 1, PADDLE_W - 8, 4, 2);
  ctx.fill();

  // ── Particles ───────────────────────────────
  drawParticles();

  // ── Overlays ─────────────────────────────────
  if (state === 'paused') {
    drawOverlay('PAUSED', 'Press P to resume');
  } else if (state === 'won') {
    drawOverlay('YOU WIN!', 'Score: ' + score + '  ·  Click or Space to play again');

[69 more lines in file. Use offset=500 to continue.]

roundRect(ctx, b.x, b.y, b.w, h, 3);$
      ctx.fill();$
      ctx.globalAlpha = 1;$
    }$

00000000: 2020 2020 2020 726f 756e 6452 6563 7428        roundRect(
00000010: 6374 782c 2062 2e78 2c20 622e 792c 2062  ctx, b.x, b.y, b
00000020: 2e77 2c20 682c 2033 293b 0a              .w, h, 3);.

cat: /home/lzienew/Documents/vram-arcade/.work/game-breakout__qwen3.6-35b-3b__minimal-v1/game.js: No such file or directory

/* ──────────────────────────────────────────────────

ctx.globalAlpha = b.flash / 0.15 * 0.7;
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      roundRect(ctx, b.x, b.y, b.w, h, 3);
      ctx.fill();
      ctx.globalAlpha = 1;
    }

    // Damage cracks (top 2 rows)
    if (dmg) {
      ctx.strokeStyle = 'rgba(0,0,0,0.35)';

(no output)

35:function sfxPaddle()      { playTone(330, 0.07, 'triangle', 0.06); }
269:    if (ball.x - BALL_R <= 0)   { ball.x = BALL_R;       ball.vx = Math.abs(ball.vx); sfxPaddle(); }
286:      sfxPaddle();

(no output)

34:function sfxBrick()       { playTone(880, 0.10, 'square', 0.07); }
35:function sfxPaddle()      { playTone(330, 0.07, 'triangle', 0.06); }
286:      sfxPaddle();
322:        sfxBrick();

405:    roundRect(ctx, b.x, b.y, b.w, b.h, 3);
413:      roundRect(ctx, b.x, b.y, b.w, b.h, 3);

/* ──────────────────────────────────────────────────
   Breakout – complete game logic
   ────────────────────────────────────────────────── */

// ── Canvas & context ─────────────────────────────
const canvas  = document.getElementById('game');
const ctx     = canvas.getContext('2d');
const W       = canvas.width;          // 960
const H       = canvas.height;         // 600
const scoreEl = document.getElementById('score-val');
const livesEl = document.getElementById('lives-val');

// ── Audio (WebAudio, no external files) ──────────
let audioCtx = null;
function ensureAudio() {
  if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  if (audioCtx.state === 'suspended') audioCtx.resume();
}

function playTone(freq, dur, type, vol, detune) {
  if (!audioCtx) return;
  const osc  = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type        = type || 'square';
  osc.frequency.value = freq;
  if (detune) osc.detune.value = detune;
  gain.gain.setValueAtTime(vol || 0.08, audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
  osc.connect(gain).connect(audioCtx.destination);
  osc.start();
  osc.stop(audioCtx.currentTime + dur);
}

function sfxBrick()       { playTone(880, 0.10, 'square', 0.07); }
function sfxPaddle()      { playTone(330, 0.07, 'triangle', 0.06); }
function sfxLoseLife()    {
  playTone(440, 0.15, 'sawtooth', 0.09);
  setTimeout(() => playTone(220, 0.25, 'sawtooth', 0.10), 120);
}
function sfxWin() {
  [523,659,784,1047].forEach((f,i) => setTimeout(() => playTone(f,0.18,'square',0.07), i*120));
}
function sfxLose()  {
  [400,320,260,180].forEach((f,i) => setTimeout(() => playTone(f,0.22,'sawtooth',0.07), i*150));
}

// ── Constants ────────────────────────────────────
const BRICK_COLS = 8;
const BRICK_ROWS = 5;
const BRICK_H    = 22;
const BRICK_GAP  = 4;
const BRICK_PAD  = 40;          // left/right padding of brick area
const BRICK_W    = Math.floor((W - BRICK_PAD * 2 - (BRICK_COLS - 1) * BRICK_GAP) / BRICK_COLS);
const BRICK_TOP  = 50;
const PADDLE_W   = 110;
const PADDLE_H   = 14;
const PADDLE_Y   = H - 40;
const BALL_R     = 8;
const BASE_SPEED = 280;         // px / second
const MAX_SPEED  = 520;
const SPEED_INC  = 6;           // px/s per brick destroyed
const LAUNCH_KEYS = ['Space', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];

const ROW_COLORS = [
  '#ff4466', '#ff8844', '#ffcc33', '#44dd88', '#4488ff',
];
const ROW_HP   = [2, 2, 1, 1, 1];   // top 2 rows take 2 hits

// ── Game state ───────────────────────────────────
let bricks, ball, paddle, score, lives, state, shake, trail;
let keys = {};
let mouseX = W / 2;

// ── Particles ────────────────────────────────────
let particles = [];

function spawnParticles(x, y, color, count) {
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 60 + Math.random() * 180;
    particles.push({
      x, y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 0.3 + Math.random() * 0.4,
      maxLife: 0.3 + Math.random() * 0.4,
      color,
      size: 2 + Math.random() * 3,
    });
  }
}

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

function drawParticles() {
  for (const p of particles) {
    const a = Math.max(0, p.life / p.maxLife);
    ctx.globalAlpha = a;
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size * a, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;
}

// ── Trail ────────────────────────────────────────
const TRAIL_LEN = 12;
function initTrail() {
  trail = [];
  for (let i = 0; i < TRAIL_LEN; i++) trail.push({ x: W / 2, y: PADDLE_Y - BALL_R });
}

// ── Screen shake ─────────────────────────────────
let shakeAmount = 0;
let shakeDecay  = 12;

function triggerShake(amount) { shakeAmount = Math.min(amount, 8); }

// ── Brick grid ───────────────────────────────────
function createBricks() {
  const arr = [];
  for (let r = 0; r < BRICK_ROWS; r++) {
    for (let c = 0; c < BRICK_COLS; c++) {
      arr.push({
        x: BRICK_PAD + c * (BRICK_W + BRICK_GAP),
        y: BRICK_TOP + r * (BRICK_H + BRICK_GAP),
        w: BRICK_W,
        h: BRICK_H,
        hp: ROW_HP[r],
        maxHp: ROW_HP[r],
        color: ROW_COLORS[r],
        alive: true,
        flash: 0,
      });
    }
  }
  return arr;
}

// ── Initialise a fresh game ──────────────────────
function initGame() {
  bricks      = createBricks();
  score       = 0;
  lives       = 3;
  particles   = [];
  shakeAmount = 0;
  initTrail();
  resetBall();
  updateHUD();
}

function resetBall() {
  ball = {
    x: W / 2,
    y: PADDLE_Y - BALL_R - 1,
    vx: 0,
    vy: 0,
    speed: BASE_SPEED,
    stuck: true,
  };
}

function launchBall() {
  if (ball.stuck) {
    ball.stuck = false;
    const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.6; // slight random
    ball.vx = Math.cos(angle) * ball.speed;
    ball.vy = Math.sin(angle) * ball.speed;
  }
}

function updateHUD() {
  scoreEl.textContent = score;
  livesEl.textContent = lives;
}

// ── Input ────────────────────────────────────────
document.addEventListener('keydown', e => {
  if (LAUNCH_KEYS.includes(e.code)) e.preventDefault();
  keys[e.code] = true;

  if (e.code === 'KeyP') {
    if (state === 'playing') state = 'paused';
    else if (state === 'paused') state = 'playing';
  }

  if ((e.code === 'Space' || e.code === 'Enter') && state === 'playing') {
    launchBall();
  }

  if ((e.code === 'Space' || e.code === 'Enter') && (state === 'won' || state === 'lost')) {
    initGame();
    state = 'playing';
  }
});
document.addEventListener('keyup', e => { keys[e.code] = false; });

canvas.addEventListener('mousemove', e => {
  const rect = canvas.getBoundingClientRect();
  mouseX = (e.clientX - rect.left) * (W / rect.width);
});

canvas.addEventListener('mousedown', e => {
  e.preventDefault();
  ensureAudio();
  if (state === 'playing') launchBall();
  else if (state === 'won' || state === 'lost') { initGame(); state = 'playing'; }
});

window.addEventListener('blur', () => {
  if (state === 'playing') state = 'paused';
});
window.addEventListener('focus', () => {
  if (state === 'paused') state = 'playing';
});

// ── Collision helpers ────────────────────────────
function aabbOverlap(cx, cy, cr, rx, ry, rw, rh) {
  const closestX = Math.max(rx, Math.min(cx, rx + rw));
  const closestY = Math.max(ry, Math.min(cy, ry + rh));
  const dx = cx - closestX;
  const dy = cy - closestY;
  return (dx * dx + dy * dy) <= (cr * cr);
}

// ── Update ───────────────────────────────────────
function update(dt) {
  // ── Paddle movement ──────────────────────────
  const paddleSpeed = 450;
  if (keys['ArrowLeft'])  paddle.x -= paddleSpeed * dt;
  if (keys['ArrowRight']) paddle.x += paddleSpeed * dt;

  // Mouse paddle (only when mouse has moved recently or keys not pressed)
  if (!keys['ArrowLeft'] && !keys['ArrowRight']) {
    const targetX = mouseX - PADDLE_W / 2;
    const diff = targetX - paddle.x;
    paddle.x += diff * Math.min(1, 12 * dt);  // smooth follow
  }

  // Clamp paddle
  paddle.x = Math.max(0, Math.min(W - PADDLE_W, paddle.x));

  // ── Ball ─────────────────────────────────────
  if (ball.stuck) {
    ball.x = paddle.x + PADDLE_W / 2;
    ball.y = PADDLE_Y - BALL_R - 1;
    return;
  }

  // ── Sub-step for no-tunnel collision ─────────
  const steps = Math.max(4, Math.ceil(ball.speed * dt / (BRICK_H * 0.6)));
  const subDt = dt / steps;

  for (let s = 0; s < steps; s++) {
    ball.x += ball.vx * subDt;
    ball.y += ball.vy * subDt;

    // Wall bounces
    if (ball.x - BALL_R <= 0)   { ball.x = BALL_R;       ball.vx = Math.abs(ball.vx); }
    if (ball.x + BALL_R >= W)   { ball.x = W - BALL_R;   ball.vx = -Math.abs(ball.vx); }
    if (ball.y - BALL_R <= 0)   { ball.y = BALL_R;       ball.vy =  Math.abs(ball.vy); }

    // Paddle bounce
    if (ball.vy > 0 &&
        ball.y + BALL_R >= PADDLE_Y &&
        ball.y + BALL_R <= PADDLE_Y + PADDLE_H + 4 &&
        ball.x >= paddle.x - BALL_R &&
        ball.x <= paddle.x + PADDLE_W + BALL_R) {
      // Normalise hit position: -1 (left edge) to +1 (right edge)
      const t = Math.max(0, Math.min(1, (ball.x - paddle.x) / PADDLE_W));
      const angle = (t - 0.5) * -1.2;  // -0.6 to +0.6 radians from vertical
      const speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
      ball.vx = Math.sin(angle) * speed;
      ball.vy = -Math.cos(angle) * speed;
      ball.y = PADDLE_Y - BALL_R - 0.5;
      sfxPaddle();
    }

    // Brick collisions
    for (const b of bricks) {
      if (!b.alive) continue;

      if (aabbOverlap(ball.x, ball.y, BALL_R, b.x, b.y, b.w, b.h)) {
        // Determine which face was hit
        const overlapLeft   = (ball.x + BALL_R) - b.x;
        const overlapRight  = (b.x + b.w) - (ball.x - BALL_R);
        const overlapTop    = (ball.y + BALL_R) - b.y;
        const overlapBottom = (b.y + b.h) - (ball.y - BALL_R);

        const minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom);

        if (minOverlap === overlapTop    && ball.vy > 0)    { ball.vy = -ball.vy; }
        else if (minOverlap === overlapBottom && ball.vy < 0) { ball.vy = -ball.vy; }
        else if (minOverlap === overlapLeft  && ball.vx < 0) { ball.vx = -ball.vx; }
        else if (minOverlap === overlapRight && ball.vx > 0) { ball.vx = -ball.vx; }

        // Damage brick
        b.hp--;
        b.flash = 0.15;
        score += 10;

        if (b.hp <= 0) {
          b.alive = false;
          score += 50;
          spawnParticles(b.x + b.w / 2, b.y + b.h / 2, b.color, 14);
          triggerShake(3);
        } else {
          spawnParticles(ball.x, ball.y, '#fff', 5);
        }

        updateHUD();
        sfxBrick();

        // Speed up
        const newSpeed = Math.min(MAX_SPEED, ball.speed + SPEED_INC);
        const currentSpeed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
        if (currentSpeed > 0) {
          ball.vx = (ball.vx / currentSpeed) * newSpeed;
          ball.vy = (ball.vy / currentSpeed) * newSpeed;
          ball.speed = newSpeed;
        }
        break;  // one brick per sub-step
      }
    }

    // Ball lost
    if (ball.y - BALL_R > H) {
      lives--;
      updateHUD();
      sfxLoseLife();
      if (lives <= 0) {
        state = 'lost';
        sfxLose();
      } else {
        resetBall();
      }
      break;
    }
  }

  // ── Trail update ─────────────────────────────
  if (!ball.stuck) {
    trail.unshift({ x: ball.x, y: ball.y });
    if (trail.length > TRAIL_LEN) trail.pop();
  }

  // ── Shake decay ──────────────────────────────
  if (shakeAmount > 0) shakeAmount = Math.max(0, shakeAmount - shakeDecay * dt);

  // ── Brick flash decay ────────────────────────
  for (const b of bricks) {
    if (b.flash > 0) b.flash -= dt;
  }

  // ── Particles ────────────────────────────────
  updateParticles(dt);

  // ── Win check ────────────────────────────────
  if (bricks.every(b => !b.alive) && state === 'playing') {
    state = 'won';
    sfxWin();
  }
}

// ── Render ───────────────────────────────────────
function render() {
  ctx.save();

  // Screen shake offset
  if (shakeAmount > 0) {
    const sx = (Math.random() - 0.5) * shakeAmount * 2;
    const sy = (Math.random() - 0.5) * shakeAmount * 2;
    ctx.translate(sx, sy);
  }

  // Background
  ctx.fillStyle = '#0e0e22';
  ctx.fillRect(0, 0, W, H);

  // Subtle grid lines
  ctx.strokeStyle = 'rgba(255,255,255,0.015)';
  ctx.lineWidth = 1;
  for (let x = 0; x < W; x += 40) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }
  for (let y = 0; y < H; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }

  // ── Bricks ───────────────────────────────────
  for (const b of bricks) {
    if (!b.alive) continue;

    const dmg = b.hp < b.maxHp;

    // Brick body
    ctx.fillStyle = dmg ? darken(b.color, 0.55) : b.color;
    ctx.beginPath();
    roundRect(ctx, b.x, b.y, b.w, b.h, 3);
    ctx.fill();

    // Flash overlay
    if (b.flash > 0) {
      ctx.globalAlpha = b.flash / 0.15 * 0.7;
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      roundRect(ctx, b.x, b.y, b.w, b.h, 3);
      ctx.fill();
      ctx.globalAlpha = 1;
    }

    // Damage cracks (top 2 rows)
    if (dmg) {
      ctx.strokeStyle = 'rgba(0,0,0,0.35)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(b.x + b.w * 0.25, b.y);
      ctx.lineTo(b.x + b.w * 0.45, b.y + b.h * 0.5);
      ctx.lineTo(b.x + b.w * 0.35, b.y + b.h);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(b.x + b.w * 0.7, b.y + b.h * 0.2);
      ctx.lineTo(b.x + b.w * 0.55, b.y + b.h * 0.6);
      ctx.lineTo(b.x + b.w * 0.8, b.y + b.h * 0.9);
      ctx.stroke();
    }

    // Top highlight
    ctx.fillStyle = 'rgba(255,255,252,0.18)';
    ctx.fillRect(b.x + 2, b.y + 1, b.w - 4, 3);
  }

  // ── Trail ────────────────────────────────────
  if (!ball.stuck && trail.length > 1) {
    for (let i = 1; i < trail.length; i++) {
      const a = (1 - i / trail.length) * 0.3;
      ctx.globalAlpha = a;
      ctx.fillStyle = '#88bbff';
      ctx.beginPath();
      ctx.arc(trail[i].x, trail[i].y, BALL_R * (1 - i / trail.length * 0.5), 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  }

  // ── Ball ─────────────────────────────────────
  if (state !== 'lost') {
    // Glow
    const grd = ctx.createRadialGradient(ball.x, ball.y, 0, ball.x, ball.y, BALL_R * 3);
    grd.addColorStop(0, 'rgba(140,200,255,0.25)');
    grd.addColorStop(1, 'rgba(140,200,200,0)');
    ctx.fillStyle = grd;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, BALL_R * 3, 0, Math.PI * 2);
    ctx.fill();

    // Ball body
    ctx.fillStyle = '#fff';
    ctx.shadowColor = '#88ccff';
    ctx.shadowBlur = 10;
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
  }

  // ── Paddle ───────────────────────────────────
  // Shadow
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  roundRect(ctx, paddle.x + 2, PADDLE_Y + 3, PADDLE_W, PADDLE_H, 5);
  ctx.fill();

  // Body gradient
  const pg = ctx.createLinearGradient(0, PADDLE_Y, 0, PADDLE_Y + PADDLE_H);
  pg.addColorStop(0, '#66ccff');
  pg.addColorStop(1, '#2277bb');
  ctx.fillStyle = pg;
  roundRect(ctx, paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H, 5);
  ctx.fill();

  // Top highlight
  ctx.fillStyle = 'rgba(255,255,250,0.35)';
  roundRect(ctx, paddle.x + 4, PADDLE_Y + 1, PADDLE_W - 8, 4, 2);
  ctx.fill();

  // ── Particles ───────────────────────────────
  drawParticles();

  // ── Overlays ─────────────────────────────────
  if (state === 'paused') {
    drawOverlay('PAUSED', 'Press P to resume');
  } else if (state === 'won') {
    drawOverlay('YOU WIN!', 'Score: ' + score + '  ·  Click or Space to play again');
  } else if (state === 'lost') {
    drawOverlay('GAME OVER', 'Score: ' + score + '  ·  Click or Space to try again');
  }

  ctx.restore();
}

function drawOverlay(title, sub) {
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(0, 0, W, H);

  ctx.textAlign = 'center';
  ctx.fillStyle = '#fff';
  ctx.font = 'bold 48px system-ui, sans-serif';
  ctx.shadowColor = 'rgba(100,180,255,0.6)';
  ctx.shadowBlur = 20;
  ctx.fillText(title, W / 2, H / 2 - 20);
  ctx.shadowBlur = 0;

  ctx.fillStyle = '#aac';
  ctx.font = '18px system-ui, sans-serif';
  ctx.fillText(sub, W / 2, H / 2 + 25);
}

// ── Utility ──────────────────────────────────────
function roundRect(ctx, x, y, w, h, r) {
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + w - r, y);
  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
  ctx.lineTo(x + w, y + h - r);
  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
  ctx.lineTo(x + r, y + h);
  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
  ctx.lineTo(x, y + r);
  ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();
}

function darken(hex, factor) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${Math.round(r * factor)},${Math.round(g * factor)},${Math.round(b * factor)})`;
}

// ── Game loop ────────────────────────────────────
let lastTime = 0;

const paddle = { x: W / 2 - PADDLE_W / 2 };  // mutable

function loop(timestamp) {
  requestAnimationFrame(loop);

  const dt = Math.min((timestamp - lastTime) / 1000, 0.05);  // cap at 50ms
  lastTime = timestamp;

  if (state === 'playing') {
    update(dt);
  }

  render();
}

// ── Start ────────────────────────────────────────
state = 'playing';
initGame();
requestAnimationFrame(loop);

-rw-r--r-- 1 lzieniew lzieniew 19113 Aug 13 01:53 game.js
-rw-r--r-- 1 lzieniew lzieniew  2146 Aug 13 01:53 index.html
---
   93 index.html
  567 game.js
  660 total

<script src="game.js"></script>

70:let bricks, ball, paddle, score, lives, state, shake, trail;
239:  const paddleSpeed = 450;
549:const paddle = { x: W / 2 - PADDLE_W / 2 };  // mutable

let lastTime = 0;

const paddle = { x: W / 2 - PADDLE_W / 2 };  // mutable

function loop(timestamp) {
  requestAnimationFrame(loop);

(no output)

}

// ── Initialise a fresh game ──────────────────────
function initGame() {
  bricks      = createBricks();
  score       = 0;
  lives       = 3;
  particles   = [];
  shakeAmount = 0;
  initTrail();
  resetBall();
  updateHUD();
}

(no output)

Syntax OK

// ── Initialise a fresh game ──────────────────────
function initGame() {
  bricks      = createBricks();
  score       = 0;
  lives       = 3;
  particles   = [];
  shakeAmount = 0;
  initTrail();
  resetBall();
  paddle.x = W / 2 - PADDLE_W / 2;
  updateHUD();
}

=== File sizes ===
   93 index.html
  568 game.js
  661 total

=== Key features check ===
2
requestAnimationFrame calls
10
sound effect calls
5
juice calls
4
sub-stepping references

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakout</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    width: 100%; height: 100%;
    background: #0a0a1a;
    color: #ccc;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, san-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    user-select: none;
  }

  h1 {
    font-size: 1.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 12px rgba(10,180,255,0.5);
  }

  #game-container {
    position: relative;
    border: 2px solid #334;
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(60,20,255,0.15);
  }

  canvas {
    display: block;
    border-radius: 4px;
  }

  #hud {
    display: flex;
    justify-content: space-between;
    width: 960px;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: #8af;
  }
  #hud span { min-width: 120px; }
  #hud .score  { text-align: left; }
  #hud .lives { text-align: right; }

  #controls {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #667;
    line-height: 1.7;
  }
  kbd {
    display: inline-block;
    padding: 0.1em 0.55em;
    border: 1px solid #445;
    border-radius: 3px;
    background: #151528;
    font-family: inherit;
    font-size: 0.95em;
    color: #99a;
  }
</style>
</head>
<body>
  <h1>Breakout</h1>
  <div id="game-container">
    <canvas id="game" width="960" height="600"></canvas>
  </div>
  <div id="hud">
    <span class="score">Score: <strong id="score-val">0</strong></span>
    <span class="lives">Lives: <strong id="lives-val">3</strong></span>
  </div>
  <div id="controls">
    <kbd>←</kbd> <kbd>→</kbd> or <strong>mouse</strong> to move paddle &nbsp;·&nbsp;
    <kbd>Space</kbd> or <strong>click</strong> to launch &nbsp;·&nbsp;
    <kbd>P</kbd> to pause
  </div>

  <script src="game.js"></script>
</body>
</html>

(no output)

let lastTime = 0;


function loop(timestamp) {
  requestAnimationFrame(loop);

  const dt = Math.min((timestamp - lastTime) / 1000, 0.05);  // cap at 50ms
  lastTime = timestamp;

  if (state === 'playing') {
    update(dt);
  }

  render();
}

// ── Start ────────────────────────────────────────
state = 'playing';
initGame();
requestAnimationFrame(loop);

=== Files in CWD ===
-rw-r--r-- 1 lzieniew lzieniew 19127 Aug 13 01:54 game.js
-rw-r--r-- 1 lzieniew lzieniew  2147 Aug 13 01:54 index.html

=== No external dependencies ===
index.html:    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
index.html:    font-size: 1.6rem;
index.html:    font-size: 0.95rem;
index.html:    font-size: 0.85rem;
index.html:    font-family: inherit;
index.html:    font-size: 0.95em;
game.js:  ctx.font = 'bold 48px system-ui, sans-serif';
game.js:  ctx.font = '18px system-ui, sans-serif';

=== Canvas dimensions ===
<meta name="viewport" content="width=device-width, initial-scale=1.0">

=== Brick layout ===
const BRICK_COLS = 8;
const BRICK_ROWS = 5;
const BRICK_W    = Math.floor((W - BRICK_PAD * 2 - (BRICK_COLS - 1) * BRICK_GAP) / BRICK_COLS);
const ROW_COLORS = [
const ROW_HP   = [2, 2, 1, 1, 1];   // top 2 rows take 2 hits
  for (let r = 0; r < BRICK_ROWS; r++) {

<canvas id="game" width="960" height="600"></canvas>