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

antigravitygemini · 22 steps · 45s · 5 filessession e3e30364-4ed@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 07 / 22
game.jschange 1/2
/**
 * Retro Arcade Breakout - Core Physics & Game Engine
 */
 
// ==========================================
// 1. GAME ENTITIES & CORE PHYSICS
// ==========================================
 
class Ball {
  constructor(x = 400, y = 500, radius = 7, speed = 6) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.baseSpeed = speed;
    this.speed = speed;
    this.vx = 0;
    this.vy = -speed;
    this.stuckToPaddle = true;
    this.trail = [];
    this.maxTrailLength = 10;
  }
 
  reset(paddleX, paddleY, paddleWidth) {
    this.x = paddleX + paddleWidth / 2;
    this.y = paddleY - this.radius - 2;
    this.speed = this.baseSpeed;
    this.vx = 0;
    this.vy = -this.speed;
    this.stuckToPaddle = true;
    this.trail = [];
  }
 
  launch(angleOffset = 0) {
    if (!this.stuckToPaddle) return;
    this.stuckToPaddle = false;
    // Launch slightly angled upward
    const angle = (-Math.PI / 2) + angleOffset;
    this.vx = this.speed * Math.cos(angle);
    this.vy = this.speed * Math.sin(angle);
  }
 
  update(dt = 1) {
    if (this.stuckToPaddle) return;
 
    // Record trail
    this.trail.unshift({ x: this.x, y: this.y });
    if (this.trail.length > this.maxTrailLength) {
      this.trail.pop();
    }
 
    this.x += this.vx * dt;
    this.y += this.vy * dt;
  }
 
  setSpeed(newSpeed) {
    const currentSpeed = Math.hypot(this.vx, this.vy) || 1;
    this.speed = newSpeed;
    this.vx = (this.vx / currentSpeed) * newSpeed;
    this.vy = (this.vy / currentSpeed) * newSpeed;
  }
 
  getSpeed() {
    return Math.hypot(this.vx, this.vy);
  }
}
 
class Paddle {
  constructor(canvasWidth = 800, canvasHeight = 600) {
    this.width = 110;
    this.height = 14;
    this.x = (canvasWidth - this.width) / 2;
    this.y = canvasHeight - 40;
    this.speed = 9;
    this.vx = 0;
    this.targetX = this.x;
  }
 
  moveLeft() {
    this.vx = -this.speed;
  }
 
  moveRight() {
    this.vx = this.speed;
  }
 
  stop() {
    this.vx = 0;
  }
 
  update(canvasWidth) {
    this.x += this.vx;
    // Boundary checks
    if (this.x < 0) {
      this.x = 0;
    } else if (this.x + this.width > canvasWidth) {
      this.x = canvasWidth - this.width;
    }
  }
 
  setPosition(x, canvasWidth) {
    this.x = Math.max(0, Math.min(canvasWidth - this.width, x - this.width / 2));
  }
}
 
class Brick {
  constructor(id, x, y, width, height, hp = 1, color = '#00f3ff', scoreValue = 10) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.hp = hp;
    this.maxHp = hp;
    this.color = color;
    this.scoreValue = scoreValue;
    this.active = true;
  }
 
  hit() {
    if (!this.active) return false;
    this.hp -= 1;
    if (this.hp <= 0) {
      this.active = false;
      return true; // destroyed
    }
    return false; // hit but survived
  }
}
 
// ==========================================
// 2. PHYSICS ENGINE & COLLISION DETECTION
// ==========================================
 
class PhysicsEngine {
  static checkWallCollision(ball, canvasWidth, canvasHeight) {
    let bounced = false;
    let outOfBounds = false;
 
    // Left wall
    if (ball.x - ball.radius <= 0) {
      ball.x = ball.radius;
      ball.vx = Math.abs(ball.vx);
      bounced = true;
    }
    // Right wall
    else if (ball.x + ball.radius >= canvasWidth) {
      ball.x = canvasWidth - ball.radius;
      ball.vx = -Math.abs(ball.vx);
      bounced = true;
    }
 
    // Top wall
    if (ball.y - ball.radius <= 0) {
      ball.y = ball.radius;
      ball.vy = Math.abs(ball.vy);
      bounced = true;
    }
 
    // Bottom floor (Lose life)
    if (ball.y - ball.radius >= canvasHeight) {
      outOfBounds = true;
    }
 
    return { bounced, outOfBounds };
  }
 
  static checkPaddleCollision(ball, paddle) {
    if (ball.stuckToPaddle) return false;
 
    // Circle vs AABB bounding box check
    const closestX = Math.max(paddle.x, Math.min(ball.x, paddle.x + paddle.width));
    const closestY = Math.max(paddle.y, Math.min(ball.y, paddle.y + paddle.height));
 
    const distX = ball.x - closestX;
    const distY = ball.y - closestY;
    const distanceSq = distX * distX + distY * distY;
 
    if (distanceSq <= ball.radius * ball.radius) {
      // Only bounce if ball is moving downward or hitting top half of paddle
      if (ball.vy > 0 && ball.y <= paddle.y + paddle.height / 2 + ball.radius) {
        ball.y = paddle.y - ball.radius;
 
        // Dynamic bounce deflection angle based on hit position
        const paddleCenter = paddle.x + paddle.width / 2;
        const hitOffset = (ball.x - paddleCenter) / (paddle.width / 2);
        const clampedOffset = Math.max(-0.9, Math.min(0.9, hitOffset));
 
        // Max bounce angle = 65 degrees (1.13 rad)
        const maxAngle = Math.PI * 0.36;
        const bounceAngle = clampedOffset * maxAngle;
 
        const currentSpeed = ball.getSpeed();
        ball.vx = currentSpeed * Math.sin(bounceAngle);
        ball.vy = -currentSpeed * Math.cos(bounceAngle);
 
        return true;
      }
    }
    return false;
  }
 
  static checkBrickCollision(ball, brick) {
    if (!brick.active || ball.stuckToPaddle) return null;
 
    // Find closest point on brick to ball center
    const closestX = Math.max(brick.x, Math.min(ball.x, brick.x + brick.width));
    const closestY = Math.max(brick.y, Math.min(ball.y, brick.y + brick.height));
 
    const distX = ball.x - closestX;
    const distY = ball.y - closestY;
    const distanceSq = distX * distX + distY * distY;
 
    if (distanceSq < ball.radius * ball.radius) {
      // Determine collision side
      const prevX = ball.x - ball.vx;
      const prevY = ball.y - ball.vy;
 
      const hitFromLeft = prevX <= brick.x;
      const hitFromRight = prevX >= brick.x + brick.width;
      const hitFromTop = prevY <= brick.y;
      const hitFromBottom = prevY >= brick.y + brick.height;
 
      if (hitFromLeft || hitFromRight) {
        ball.vx = hitFromLeft ? -Math.abs(ball.vx) : Math.abs(ball.vx);
      }
      if (hitFromTop || hitFromBottom) {
        ball.vy = hitFromTop ? -Math.abs(ball.vy) : Math.abs(ball.vy);
      }
      if (!hitFromLeft && !hitFromRight && !hitFromTop && !hitFromBottom) {
        // Fallback: invert vertical
        ball.vy = -ball.vy;
      }
 
      const destroyed = brick.hit();
      return { destroyed, hpRemaining: brick.hp };
    }
 
    return null;
  }
}
 
// ==========================================
// 3. LEVEL & BRICK MATRIX GENERATOR
// ==========================================
 
class LevelManager {
  static get COLOR_PALETTE() {
    return [
      { name: 'pink', color: '#ff007f', hp: 3, score: 50 },
      { name: 'orange', color: '#ff6600', hp: 2, score: 30 },
      { name: 'yellow', color: '#ffe600', hp: 1, score: 20 },
      { name: 'green', color: '#00ff66', hp: 1, score: 15 },
      { name: 'cyan', color: '#00f3ff', hp: 1, score: 10 }
    ];
  }
 
  static createLevel(levelNumber, canvasWidth = 800) {
    const cols = 9;
    const rows = Math.min(8, 4 + Math.floor(levelNumber / 2));
    const padding = 8;
    const marginTop = 70;
    const marginLeft = 35;
    const availableWidth = canvasWidth - marginLeft * 2;
    const brickWidth = (availableWidth - (cols - 1) * padding) / cols;
    const brickHeight = 22;
 
    const bricks = [];
    let idCounter = 1;
 
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        // Level pattern variations
        let shouldCreate = true;
 
        if (levelNumber === 2) {
          // Diamond / checker hole pattern
          if ((r + c) % 2 === 1 && r > 1 && r < rows - 1) shouldCreate = false;
        } else if (levelNumber === 3) {
          // Castle / Fort gaps
          if (r === 2 && (c === 2 || c === 6)) shouldCreate = false;
        } else if (levelNumber > 3) {
          // Custom wave pattern
          if (r % 2 === 1 && (c === 0 || c === cols - 1)) shouldCreate = false;
        }
 
        if (shouldCreate) {
          const paletteIndex = r % this.COLOR_PALETTE.length;
          const config = this.COLOR_PALETTE[paletteIndex];
 
          // Scaling HP on higher levels
          let hp = config.hp;
          if (levelNumber >= 3 && r === 0) hp = Math.min(4, hp + 1);
 
          const x = marginLeft + c * (brickWidth + padding);
          const y = marginTop + r * (brickHeight + padding);
 
          bricks.push(new Brick(idCounter++, x, y, brickWidth, brickHeight, hp, config.color, config.score));
        }
      }
    }
 
    // Ball speed scales with level
    const baseSpeed = 6 + (levelNumber - 1) * 0.75;
 
    return { bricks, baseSpeed };
  }
}
 
// ==========================================
// 4. PARTICLE EFFECTS ENGINE
// ==========================================
 
class ParticleSystem {
  constructor() {
    this.particles = [];
  }
 
  spawnBrickExplosion(x, y, width, height, color, count = 14) {
    for (let i = 0; i < count; i++) {
      const px = x + Math.random() * width;
      const py = y + Math.random() * height;
      const angle = Math.random() * Math.PI * 2;
      const speed = 1.5 + Math.random() * 4.5;
      this.particles.push({
        x: px,
        y: py,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        size: 2 + Math.random() * 4,
        color: color,
        alpha: 1,
        decay: 0.02 + Math.random() * 0.03,
        gravity: 0.1
      });
    }
  }
 
  spawnPaddleSpark(x, y, count = 8) {
    for (let i = 0; i < count; i++) {
      const angle = -Math.PI / 2 + (Math.random() - 0.5) * 1.2;
      const speed = 2 + Math.random() * 4;
      this.particles.push({
        x: x,
        y: y,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        size: 2 + Math.random() * 3,
        color: '#00f3ff',
        alpha: 1,
        decay: 0.04 + Math.random() * 0.04,
        gravity: 0.05
      });
    }
  }
 
  update() {
    for (let i = this.particles.length - 1; i >= 0; i--) {
      const p = this.particles[i];
      p.x += p.vx;
      p.y += p.vy;
      p.vy += p.gravity;
      p.alpha -= p.decay;
      if (p.alpha <= 0) {
        this.particles.splice(i, 1);
      }
    }
  }
 
  draw(ctx) {
    ctx.save();
    for (const p of this.particles) {
      ctx.globalAlpha = Math.max(0, p.alpha);
      ctx.fillStyle = p.color;
      ctx.shadowColor = p.color;
      ctx.shadowBlur = 8;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.restore();
  }
 
  clear() {
    this.particles = [];
  }
}
 
// ==========================================
// 5. WEBAUDIO SOUND SYNTHESIZER
// ==========================================
 
class SoundSynth {
  constructor() {
    this.ctx = null;
    this.muted = false;
    if (typeof window !== 'undefined') {
      const savedMute = localStorage.getItem('breakout_muted');
      if (savedMute !== null) {
        this.muted = savedMute === 'true';
      }
    }
  }
 
  init() {
    if (!this.ctx && typeof window !== 'undefined') {
      const AudioCtx = window.AudioContext || window.webkitAudioContext;
      if (AudioCtx) {
        this.ctx = new AudioCtx();
      }
    }
    if (this.ctx && this.ctx.state === 'suspended') {
      this.ctx.resume();
    }
  }
 
  toggleMute() {
    this.muted = !this.muted;
    if (typeof window !== 'undefined') {
      localStorage.setItem('breakout_muted', this.muted);
    }
    return this.muted;
  }
 
  playTone(freq, type, duration, startVol = 0.2, endVol = 0.001) {
    if (this.muted) return;
    this.init();
    if (!this.ctx) return;
 
    try {
      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
 
      osc.type = type;
      osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
 
      gain.gain.setValueAtTime(startVol, this.ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(endVol, this.ctx.currentTime + duration);
 
      osc.connect(gain);
      gain.connect(this.ctx.destination);
 
      osc.start();
      osc.stop(this.ctx.currentTime + duration);
    } catch (e) {
      // Ignore audio context autoplay errors before user gesture
    }
  }
 
  playPaddleHit() {
    if (this.muted) return;
    this.init();
    if (!this.ctx) return;
    try {
      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(320, this.ctx.currentTime);
      osc.frequency.exponentialRampToValueAtTime(540, this.ctx.currentTime + 0.08);
 
      gain.gain.setValueAtTime(0.25, this.ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.08);
 
      osc.connect(gain);
      gain.connect(this.ctx.destination);
 
      osc.start();
      osc.stop(this.ctx.currentTime + 0.08);
    } catch (e) {}
  }
 
  playWallHit() {
    this.playTone(220, 'square', 0.05, 0.15);
  }
 
  playBrickHit() {
    this.playTone(600, 'sine', 0.06, 0.2);
  }
 
  playBrickBreak() {
    if (this.muted) return;
    this.init();
    if (!this.ctx) return;
    try {
      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(800, this.ctx.currentTime);
      osc.frequency.exponentialRampToValueAtTime(200, this.ctx.currentTime + 0.12);
 
      gain.gain.setValueAtTime(0.3, this.ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.12);
 
      osc.connect(gain);
      gain.connect(this.ctx.destination);
 
      osc.start();
      osc.stop(this.ctx.currentTime + 0.12);
    } catch (e) {}
  }
 
  playLifeLost() {
    if (this.muted) return;
    this.init();
    if (!this.ctx) return;
    try {
      const osc = this.ctx.createOscillator();
      const gain = this.ctx.createGain();
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(350, this.ctx.currentTime);
      osc.frequency.linearRampToValueAtTime(100, this.ctx.currentTime + 0.35);
 
      gain.gain.setValueAtTime(0.35, this.ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.35);
 
      osc.connect(gain);
      gain.connect(this.ctx.destination);
 
      osc.start();
      osc.stop(this.ctx.currentTime + 0.35);
    } catch (e) {}
  }
 
  playLevelUp() {
    if (this.muted) return;
    const notes = [440, 554.37, 659.25, 880];
    notes.forEach((freq, i) => {
      setTimeout(() => {
        this.playTone(freq, 'triangle', 0.15, 0.25);
      }, i * 90);
    });
  }
 
  playGameOver() {
    if (this.muted) return;
    const notes = [400, 350, 300, 220];
    notes.forEach((freq, i) => {
      setTimeout(() => {
        this.playTone(freq, 'sawtooth', 0.25, 0.3);
      }, i * 140);
    });
  }
}
 
// ==========================================
// 6. GAME STATE MANAGEMENT CLASS
// ==========================================
 
const GameState = {
  START: 'START',
  PLAYING: 'PLAYING',
  PAUSED: 'PAUSED',
  LEVEL_COMPLETE: 'LEVEL_COMPLETE',
  GAME_OVER: 'GAME_OVER'
};
 
class GameController {
  constructor() {
    this.score = 0;
    this.highScore = this.loadHighScore();
    this.lives = 3;
    this.level = 1;
    this.state = GameState.START;
 
    this.canvasWidth = 800;
    this.canvasHeight = 600;
 
    this.paddle = new Paddle(this.canvasWidth, this.canvasHeight);
    this.ball = new Ball(this.canvasWidth / 2, this.paddle.y - 10);
    this.particles = new ParticleSystem();
    this.sound = new SoundSynth();
 
    this.bricks = [];
    this.loadLevel(this.level);
  }
 
  loadHighScore() {
    if (typeof window !== 'undefined' && window.localStorage) {
      const val = parseInt(localStorage.getItem('breakout_highscore'), 10);
      return isNaN(val) ? 0 : val;
    }
    return 0;
  }
 
  saveHighScore() {
    if (this.score > this.highScore) {
      this.highScore = this.score;
      if (typeof window !== 'undefined' && window.localStorage) {
        localStorage.setItem('breakout_highscore', this.highScore.toString());
      }
      return true; // New record!
    }
    return false;
  }
 
  loadLevel(lvl) {
    this.level = lvl;
    const levelData = LevelManager.createLevel(this.level, this.canvasWidth);
    this.bricks = levelData.bricks;
    this.ball.baseSpeed = levelData.baseSpeed;
    this.ball.reset(this.paddle.x, this.paddle.y, this.paddle.width);
  }
 
  startNewGame() {
    this.score = 0;
    this.lives = 3;
    this.level = 1;
    this.loadLevel(1);
    this.state = GameState.PLAYING;
    this.particles.clear();
  }
 
  launchBall() {
    if (this.state === GameState.PLAYING && this.ball.stuckToPaddle) {
      this.ball.launch((Math.random() - 0.5) * 0.2);
    }
  }
 
  togglePause() {
    if (this.state === GameState.PLAYING) {
      this.state = GameState.PAUSED;
    } else if (this.state === GameState.PAUSED) {
      this.state = GameState.PLAYING;
    }
  }
 
  update() {
    if (this.state !== GameState.PLAYING) return;
 
    this.paddle.update(this.canvasWidth);
 
    if (this.ball.stuckToPaddle) {
      this.ball.x = this.paddle.x + this.paddle.width / 2;
      this.ball.y = this.paddle.y - this.ball.radius - 2;
    } else {
      this.ball.update();
 
      // Check wall collisions
      const wallResult = PhysicsEngine.checkWallCollision(this.ball, this.canvasWidth, this.canvasHeight);
      if (wallResult.bounced) {
        this.sound.playWallHit();
      }
      if (wallResult.outOfBounds) {
        this.lives -= 1;
        this.sound.playLifeLost();
 
        if (this.lives <= 0) {
          this.state = GameState.GAME_OVER;
          this.saveHighScore();
          this.sound.playGameOver();
        } else {
          this.ball.reset(this.paddle.x, this.paddle.y, this.paddle.width);
        }
        return;
      }
 
      // Check paddle collision
      if (PhysicsEngine.checkPaddleCollision(this.ball, this.paddle)) {
        this.sound.playPaddleHit();
        this.particles.spawnPaddleSpark(this.ball.x, this.paddle.y);
      }
 
      // Check brick collisions
      let remainingActive = 0;
      for (const brick of this.bricks) {
        if (brick.active) {
          const hitResult = PhysicsEngine.checkBrickCollision(this.ball, brick);
          if (hitResult) {
            if (hitResult.destroyed) {
              this.score += brick.scoreValue;
              this.saveHighScore();
              this.sound.playBrickBreak();
              this.particles.spawnBrickExplosion(brick.x, brick.y, brick.width, brick.height, brick.color);
            } else {
              this.sound.playBrickHit();
            }
          }
          if (brick.active) {
            remainingActive++;
          }
        }
      }
 
      // Level clear check
      if (remainingActive === 0) {
        this.state = GameState.LEVEL_COMPLETE;
        this.sound.playLevelUp();
        setTimeout(() => {
          if (this.state === GameState.LEVEL_COMPLETE) {
            this.loadLevel(this.level + 1);
            this.state = GameState.PLAYING;
          }
        }, 1800);
      }
    }
 
    this.particles.update();
  }
}
 
// Module Export for Node testing
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    Ball,
    Paddle,
    Brick,
    PhysicsEngine,
    LevelManager,
    ParticleSystem,
    SoundSynth,
    GameState,
    GameController
  };
}
 
714 linesjs
Writes …/game.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#antigravity #css #game #gemini #graphics #html #javascript #quick #testing
a5-agy
← all sessions