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 10 / 22
game.jschange 2/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 marginTop = 65;
    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;
          if ((r + c) % 2 === 1 && r > 0 && 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
−    }
    } catch (e) {}
  }
 
  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 true;
    }
    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();
  }
}
 
// ==========================================
// 7. BROWSER CANVAS RENDERER & EVENT BINDINGS
// ==========================================
 
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
  window.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('gameCanvas');
    if (!canvas) return;
 
    const ctx = canvas.getContext('2d');
    const game = new GameController();
 
    // DOM UI elements
    const scoreVal = document.getElementById('scoreVal');
    const highScoreVal = document.getElementById('highScoreVal');
    const levelVal = document.getElementById('levelVal');
    const livesContainer = document.getElementById('livesContainer');
    const muteBtn = document.getElementById('muteBtn');
 
    // Overlays
    const startOverlay = document.getElementById('startOverlay');
    const pauseOverlay = document.getElementById('pauseOverlay');
    const gameOverOverlay = document.getElementById('gameOverOverlay');
    const levelOverlay = document.getElementById('levelOverlay');
 
    const finalScore = document.getElementById('finalScore');
    const finalHighScore = document.getElementById('finalHighScore');
    const newRecordBadge = document.getElementById('newRecordBadge');
    const levelBanner = document.getElementById('levelBanner');
 
    const startBtn = document.getElementById('startBtn');
    const restartBtn = document.getElementById('restartBtn');
    const resumeBtn = document.getElementById('resumeBtn');
 
    // Sync high score on load
    highScoreVal.textContent = game.highScore;
 
    function updateMuteBtnUI() {
      muteBtn.innerHTML = game.sound.muted ? '🔇 Muted' : '🔊 Sound';
      muteBtn.classList.toggle('muted', game.sound.muted);
    }
    updateMuteBtnUI();
 
    muteBtn.addEventListener('click', (e) => {
      e.blur();
      game.sound.toggleMute();
      updateMuteBtnUI();
    });
 
    // Keyboard state
    const keys = {};
 
    window.addEventListener('keydown', (e) => {
      keys[e.code] = true;
 
      if (e.code === 'Space') {
        e.preventDefault();
        if (game.state === GameState.START) {
          game.startNewGame();
        } else if (game.state === GameState.GAME_OVER) {
          game.startNewGame();
        } else if (game.state === GameState.PLAYING) {
          game.launchBall();
        }
      } else if (e.code === 'KeyP' || e.code === 'Escape') {
        e.preventDefault();
        game.togglePause();
      } else if (e.code === 'KeyM') {
        game.sound.toggleMute();
        updateMuteBtnUI();
      }
    });
 
    window.addEventListener('keyup', (e) => {
      keys[e.code] = false;
    });
 
    // Mouse / Touch Controls
    canvas.addEventListener('mousemove', (e) => {
      const rect = canvas.getBoundingClientRect();
      const scaleX = canvas.width / rect.width;
      const mouseX = (e.clientX - rect.left) * scaleX;
      game.paddle.setPosition(mouseX, game.canvasWidth);
    });
 
    canvas.addEventListener('click', () => {
      game.sound.init();
      if (game.state === GameState.START) {
        game.startNewGame();
      } else if (game.state === GameState.PLAYING) {
        game.launchBall();
      }
    });
 
    // Touch support
    canvas.addEventListener('touchmove', (e) => {
      e.preventDefault();
      if (e.touches.length > 0) {
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const touchX = (e.touches[0].clientX - rect.left) * scaleX;
        game.paddle.setPosition(touchX, game.canvasWidth);
      }
    }, { passive: false });
 
    canvas.addEventListener('touchstart', (e) => {
      game.sound.init();
      if (game.state === GameState.START) {
        game.startNewGame();
      } else if (game.state === GameState.PLAYING) {
        game.launchBall();
      }
    });
 
    if (startBtn) startBtn.addEventListener('click', () => game.startNewGame());
    if (restartBtn) restartBtn.addEventListener('click', () => game.startNewGame());
    if (resumeBtn) resumeBtn.addEventListener('click', () => game.togglePause());
 
    // Update Keyboard Movements
    function handleKeyboardInput() {
      if (keys['ArrowLeft'] || keys['KeyA']) {
        game.paddle.moveLeft();
      } else if (keys['ArrowRight'] || keys['KeyD']) {
        game.paddle.moveRight();
      } else {
        game.paddle.stop();
      }
    }
 
    // Render Helpers
    function drawBackground() {
      ctx.fillStyle = '#08091a';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
      // Subtle cyber grid lines
      ctx.strokeStyle = 'rgba(0, 243, 255, 0.03)';
      ctx.lineWidth = 1;
      const gridSize = 40;
      for (let x = 0; x < canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
      }
      for (let y = 0; y < canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
      }
    }
 
    function drawBricks() {
      for (const brick of game.bricks) {
        if (!brick.active) continue;
 
        ctx.save();
        // Brick body gradient
        const grad = ctx.createLinearGradient(brick.x, brick.y, brick.x, brick.y + brick.height);
        grad.addColorStop(0, brick.color);
        grad.addColorStop(1, '#0c0d24');
 
        ctx.fillStyle = grad;
        ctx.shadowColor = brick.color;
        ctx.shadowBlur = 10;
 
        // Rounded rect for brick
        const r = 4;
        ctx.beginPath();
        ctx.roundRect(brick.x, brick.y, brick.width, brick.height, r);
        ctx.fill();
 
        // Neon Border
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = brick.color;
        ctx.stroke();
 
        // Inner bevel highlight
        ctx.beginPath();
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
        ctx.lineWidth = 1;
        ctx.moveTo(brick.x + r, brick.y + 2);
        ctx.lineTo(brick.x + brick.width - r, brick.y + 2);
        ctx.stroke();
 
        // Multi-hit indicator lines if damaged
        if (brick.maxHp > 1) {
          if (brick.hp < brick.maxHp) {
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
            ctx.beginPath();
            ctx.moveTo(brick.x + 8, brick.y + brick.height / 2);
            ctx.lineTo(brick.x + brick.width - 8, brick.y + brick.height / 2);
            ctx.stroke();
          }
        }
 
        ctx.restore();
      }
    }
 
    function drawPaddle() {
      const p = game.paddle;
      ctx.save();
 
      // Neon Gradient Fill
      const grad = ctx.createLinearGradient(p.x, p.y, p.x, p.y + p.height);
      grad.addColorStop(0, '#00f3ff');
      grad.addColorStop(0.5, '#b500ff');
      grad.addColorStop(1, '#00f3ff');
 
      ctx.fillStyle = grad;
      ctx.shadowColor = '#00f3ff';
      ctx.shadowBlur = 14;
 
      ctx.beginPath();
      ctx.roundRect(p.x, p.y, p.width, p.height, 7);
      ctx.fill();
 
      // Specular Top Rim
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.roundRect(p.x + 2, p.y + 1, p.width - 4, 3, 2);
      ctx.stroke();
 
      ctx.restore();
    }
 
    function drawBall() {
      const b = game.ball;
      ctx.save();
 
      // Motion Trail
      for (let i = 0; i < b.trail.length; i++) {
        const pt = b.trail[i];
        const alpha = (1 - i / b.trail.length) * 0.45;
        const radius = b.radius * (1 - (i / b.trail.length) * 0.5);
 
        ctx.fillStyle = '#00f3ff';
        ctx.globalAlpha = alpha;
        ctx.shadowColor = '#ff007f';
        ctx.shadowBlur = 8;
        ctx.beginPath();
        ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2);
        ctx.fill();
      }
 
      // Ball Core
      ctx.globalAlpha = 1.0;
      ctx.fillStyle = '#ffffff';
      ctx.shadowColor = '#00f3ff';
      ctx.shadowBlur = 15;
 
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.radius, 0, Math.PI * 2);
      ctx.fill();
 
      // Outer neon ring
      ctx.strokeStyle = '#00f3ff';
      ctx.lineWidth = 1.5;
      ctx.stroke();
 
      ctx.restore();
    }
 
    function updateUI() {
      scoreVal.textContent = game.score;
      highScoreVal.textContent = game.highScore;
      levelVal.textContent = game.level;
 
      // Render lives indicators
      let livesHTML = '';
      for (let i = 0; i < 3; i++) {
        const active = i < game.lives ? 'active' : 'lost';
        livesHTML += `<span class="life-icon ${active}">⚡</span>`;
      }
      livesContainer.innerHTML = livesHTML;
 
      // Overlay toggling
      startOverlay.classList.toggle('hidden', game.state !== GameState.START);
      pauseOverlay.classList.toggle('hidden', game.state !== GameState.PAUSED);
      gameOverOverlay.classList.toggle('hidden', game.state !== GameState.GAME_OVER);
      levelOverlay.classList.toggle('hidden', game.state !== GameState.LEVEL_COMPLETE);
 
      if (game.state === GameState.GAME_OVER) {
        finalScore.textContent = game.score;
        finalHighScore.textContent = game.highScore;
        const isNewRecord = game.score > 0 && game.score >= game.highScore;
        newRecordBadge.classList.toggle('hidden', !isNewRecord);
      } else if (game.state === GameState.LEVEL_COMPLETE) {
        levelBanner.textContent = `LEVEL ${game.level + 1}`;
      }
    }
 
    // Main Game Loop
    function gameLoop() {
      handleKeyboardInput();
      game.update();
 
      // Render frame
      drawBackground();
      drawBricks();
      drawPaddle();
      drawBall();
      game.particles.draw(ctx);
      updateUI();
 
      requestAnimationFrame(gameLoop);
    }
 
    // Launch loop
    requestAnimationFrame(gameLoop);
  });
}
 
// Module Export for Node testing
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    Ball,
    Paddle,
    Brick,
    PhysicsEngine,
    LevelManager,
    ParticleSystem,
    SoundSynth,
    GameState,
    GameController
  };
}
 
1007 linesjs
Writes …/style.css
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