Build a retro arcade Breakout game as a static page in this directory: index.html, styl…

pigpt-5.5 · 24 steps · 2m 21s · 5 filessession 534065f1-d41@patrick-toulme
Build a retro arcade Breakout game as a static page in this directory: index.html, style.css, game.js. Canvas gameplay with paddle, ball, brick rows, lives, score, levels with increasing speed, particle effects on brick hits, WebAudio sound with a mute toggle, pause overlay, high score in localStorage, dark neon theme. Also create tests.html + tests.js exercising the core physics/collision logic. Run the tests headless with node and fix what fails.
same matchclaude-code · 68 steps codex · 74 steps opencode · 36 steps pi · 24 steps antigravity · 22 steps
compare in arena
step 13 / 24
game.jschange 1/2
(function (root, factory) {
  const api = factory();
  if (typeof module !== "undefined" && module.exports) module.exports = api;
  root.BreakoutCore = api;
  if (typeof window !== "undefined") window.addEventListener("DOMContentLoaded", () => api.boot());
})(typeof globalThis !== "undefined" ? globalThis : this, function () {
  "use strict";
 
  const W = 900, H = 600;
  const COLORS = ["#ff2bd6", "#28f7ff", "#ffe66d", "#5cff89", "#a855ff"];
 
  function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }
 
  function circleRectCollision(ball, rect) {
    const cx = clamp(ball.x, rect.x, rect.x + rect.w);
    const cy = clamp(ball.y, rect.y, rect.y + rect.h);
    const dx = ball.x - cx, dy = ball.y - cy;
    return dx * dx + dy * dy <= ball.r * ball.r;
  }
 
  function createState(level = 1) {
    const state = {
      width: W,
      height: H,
      score: 0,
      highScore: 0,
      lives: 3,
      level,
      paused: true,
      gameOver: false,
      won: false,
      keys: {},
      particles: [],
      paddle: { x: W / 2 - 65, y: H - 48, w: 130, h: 16, speed: 560 },
      ball: { x: W / 2, y: H - 70, r: 8, vx: 0, vy: 0, stuck: true, speed: 330 + (level - 1) * 38 },
      bricks: []
    };
    buildBricks(state);
    return state;
  }
 
  function buildBricks(state) {
    state.bricks.length = 0;
    const rows = Math.min(5 + state.level, 9), cols = 10, gap = 8;
    const bw = (state.width - 90 - gap * (cols - 1)) / cols, bh = 24;
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        state.bricks.push({
          x: 45 + c * (bw + gap), y: 68 + r * (bh + gap), w: bw, h: bh,
          alive: true, color: COLORS[r % COLORS.length], points: (rows - r) * 10
        });
      }
    }
  }
 
  function resetBall(state) {
    state.ball.x = state.paddle.x + state.paddle.w / 2;
    state.ball.y = state.paddle.y - state.ball.r - 2;
    state.ball.vx = 0;
    state.ball.vy = 0;
    state.ball.stuck = true;
  }
 
  function launchBall(state) {
    if (!state.ball.stuck) return;
    const dir = Math.random() < 0.5 ? -1 : 1;
    state.ball.vx = dir * state.ball.speed * 0.46;
    state.ball.vy = -state.ball.speed;
    state.ball.stuck = false;
  }
 
  function reflectFromPaddle(ball, paddle) {
    const hit = ((ball.x - (paddle.x + paddle.w / 2)) / (paddle.w / 2));
    const angle = clamp(hit, -1, 1) * (Math.PI * 0.38);
    const speed = Math.hypot(ball.vx, ball.vy) || ball.speed;
    ball.vx = Math.sin(angle) * speed;
    ball.vy = -Math.abs(Math.cos(angle) * speed);
    ball.y = paddle.y - ball.r - 0.1;
  }
 
  function collideBrick(ball, brick) {
    const prevX = ball.x - ball.vx * 0.016;
    const prevY = ball.y - ball.vy * 0.016;
    const wasAbove = prevY <= brick.y, wasBelow = prevY >= brick.y + brick.h;
    const wasLeft = prevX <= brick.x, wasRight = prevX >= brick.x + brick.w;
    if (wasAbove || wasBelow) ball.vy *= -1;
    else if (wasLeft || wasRight) ball.vx *= -1;
    else ball.vy *= -1;
  }
 
  function spawnParticles(state, x, y, color) {
    for (let i = 0; i < 14; i++) {
      const a = Math.random() * Math.PI * 2, s = 70 + Math.random() * 190;
      state.particles.push({ x, y, vx: Math.cos(a) * s, vy: Math.sin(a) * s, life: 0.45 + Math.random() * 0.35, color });
    }
  }
 
  function step(state, dt, input, hooks) {
    hooks = hooks || {};
    if (state.paused || state.gameOver) return state;
    dt = Math.min(dt, 0.033);
    const p = state.paddle, b = state.ball;
    const move = (input && input.move) || 0;
    p.x = clamp(p.x + move * p.speed * dt, 0, state.width - p.w);
    if (input && typeof input.pointerX === "number") p.x = clamp(input.pointerX - p.w / 2, 0, state.width - p.w);
    if (b.stuck) { b.x = p.x + p.w / 2; b.y = p.y - b.r - 2; }
    else {
      b.x += b.vx * dt; b.y += b.vy * dt;
      if (b.x - b.r < 0) { b.x = b.r; b.vx = Math.abs(b.vx); hooks.sound && hooks.sound("wall"); }
      if (b.x + b.r > state.width) { b.x = state.width - b.r; b.vx = -Math.abs(b.vx); hooks.sound && hooks.sound("wall"); }
      if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy); hooks.sound && hooks.sound("wall"); }
      if (circleRectCollision(b, p) && b.vy > 0) { reflectFromPaddle(b, p); hooks.sound && hooks.sound("paddle"); }
      for (const brick of state.bricks) {
        if (brick.alive && circleRectCollision(b, brick)) {
          brick.alive = false; state.score += brick.points; collideBrick(b, brick);
          spawnParticles(state, b.x, b.y, brick.color); hooks.sound && hooks.sound("brick");
          break;
        }
      }
      if (b.y - b.r > state.height) {
        state.lives--; hooks.sound && hooks.sound("lose");
        if (state.lives <= 0) state.gameOver = true; else resetBall(state);
      }
      if (state.bricks.every(br => !br.alive)) {
        state.level++; state.ball.speed += 38; buildBricks(state); resetBall(state); state.paused = true; state.won = true; hooks.sound && hooks.sound("level");
      }
    }
    for (const part of state.particles) { part.x += part.vx * dt; part.y += part.vy * dt; part.vy += 280 * dt; part.life -= dt; }
    state.particles = state.particles.filter(part => part.life > 0);
    return state;
  }
 
  function boot() {
    const canvas = document.getElementById("game"), ctx = canvas.getContext("2d");
    const ui = {
      score: document.getElementById("score"), high: document.getElementById("highScore"), lives: document.getElementById("lives"), level: document.getElementById("level"),
      overlay: document.getElementById("overlay"), start: document.getElementById("startBtn"), pause: document.getElementById("pauseBtn"), mute: document.getElementById("muteBtn")
    };
    const state = createState();
    state.highScore = Number(localStorage.getItem("neonBreakoutHigh") || 0);
    let last = performance.now(), pointerX = null, muted = false, audioCtx = null;
 
    function beep(kind) {
      if (muted) return;
      audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();
      const o = audioCtx.createOscillator(), g = audioCtx.createGain();
      const table = { wall: 180, paddle: 320, brick: 620, lose: 90, level: 880 };
      o.type = kind === "brick" ? "square" : "sine"; o.frequency.value = table[kind] || 240;
      g.gain.setValueAtTime(0.045, audioCtx.currentTime); g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.11);
      o.connect(g).connect(audioCtx.destination); o.start(); o.stop(audioCtx.currentTime + 0.12);
    }
    function setOverlay(title, text) {
      ui.overlay.querySelector("h2").textContent = title;
      ui.overlay.querySelector("p").textContent = text;
      ui.overlay.classList.remove("hidden");
    }
    function start() { if (state.gameOver) Object.assign(state, createState()); state.paused = false; state.won = false; ui.overlay.classList.add("hidden"); if (state.ball.stuck) launchBall(state); }
    ui.start.onclick = start;
    ui.pause.onclick = () => togglePause();
    ui.mute.onclick = () => { muted = !muted; ui.mute.textContent = muted ? "Sound Off" : "Sound On"; ui.mute.setAttribute("aria-pressed", String(muted)); };
    function togglePause() { state.paused = !state.paused; state.paused ? setOverlay("PAUSED", "Press P or Pause to resume") : ui.overlay.classList.add("hidden"); }
    addEventListener("keydown", e => { if (["ArrowLeft","ArrowRight"," "].includes(e.key)) e.preventDefault(); state.keys[e.key.toLowerCase()] = true; if (e.key === " ") start(); if (e.key.toLowerCase() === "p") togglePause(); });
    addEventListener("keyup", e => state.keys[e.key.toLowerCase()] = false);
    canvas.addEventListener("mousemove", e => { const r = canvas.getBoundingClientRect(); pointerX = (e.clientX - r.left) * canvas.width / r.width; });
    canvas.addEventListener("mouseleave", () => pointerX = null);
    canvas.addEventListener("click", start);
 
    function draw() {
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = "#050510"; ctx.fillRect(0, 0, W, H);
      ctx.strokeStyle = "rgba(40,247,255,.18)"; ctx.lineWidth = 1;
      for (let y = 0; y < H; y += 30) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }
      for (const br of state.bricks) if (br.alive) { ctx.fillStyle = br.color; ctx.shadowColor = br.color; ctx.shadowBlur = 14; roundRect(br.x, br.y, br.w, br.h, 6); ctx.fill(); }
      ctx.shadowBlur = 18; ctx.shadowColor = "#28f7ff"; ctx.fillStyle = "#28f7ff"; roundRect(state.paddle.x, state.paddle.y, state.paddle.w, state.paddle.h, 8); ctx.fill();
      ctx.shadowColor = "#ffe66d"; ctx.beginPath(); ctx.arc(state.ball.x, state.ball.y, state.ball.r, 0, Math.PI * 2); ctx.fillStyle = "#fff7a8"; ctx.fill();
      for (const part of state.particles) { ctx.globalAlpha = Math.max(0, part.life * 2); ctx.fillStyle = part.color; ctx.fillRect(part.x, part.y, 4, 4); }
      ctx.globalAlpha = 1; ctx.shadowBlur = 0;
    }
    function roundRect(x, y, w, h, r) { ctx.beginPath(); ctx.roundRect ? ctx.roundRect(x, y, w, h, r) : ctx.rect(x, y, w, h); }
    function frame(now) {
      const move = (state.keys.arrowright || state.keys.d ? 1 : 0) - (state.keys.arrowleft || state.keys.a ? 1 : 0);
      step(state, (now - last) / 1000, { move, pointerX }, { sound: beep }); last = now;
      state.highScore = Math.max(state.highScore, state.score); localStorage.setItem("neonBreakoutHigh", state.highScore);
      ui.score.textContent = state.score; ui.high.textContent = state.highScore; ui.lives.textContent = state.lives; ui.level.textContent = state.level;
      if (state.gameOver) setOverlay("GAME OVER", "Click INSERT COIN or press Space to play again");
      else if (state.won && state.paused) setOverlay("LEVEL " + state.level, "Speed increased. Press Space to launch.");
      draw(); requestAnimationFrame(frame);
    }
    setOverlay("READY?", "Move: ← → / A D / mouse · Launch: Space · Pause: P"); requestAnimationFrame(frame);
  }
 
  return { W, H, clamp, circleRectCollision, createState, buildBricks, resetBall, launchBall, reflectFromPaddle, collideBrick, step, boot };
});
 
194 linesjs
Writes tests.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#css #game #gpt #gpt-5.5 #graphics #html #javascript #pi #quick #testing #ui
a4-pi
← all sessions