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 18 / 22
tests.jschange 1/1
/**
 * Retro Arcade Breakout - Physics & Core Engine Test Suite
 * Compatible with Node.js headless environment and Browser HTML runner
 */
 
// Module resolution logic for Node vs Browser environment
let Ball, Paddle, Brick, PhysicsEngine, LevelManager, GameController, GameState;
 
if (typeof require !== 'undefined') {
  const game = require('./game.js');
  Ball = game.Ball;
  Paddle = game.Paddle;
  Brick = game.Brick;
  PhysicsEngine = game.PhysicsEngine;
  LevelManager = game.LevelManager;
  GameController = game.GameController;
  GameState = game.GameState;
} else {
  Ball = window.Ball;
  Paddle = window.Paddle;
  Brick = window.Brick;
  PhysicsEngine = window.PhysicsEngine;
  LevelManager = window.LevelManager;
  GameController = window.GameController;
  GameState = window.GameState;
}
 
// Simple assertion framework
class TestRunner {
  constructor() {
    this.passed = 0;
    this.failed = 0;
    this.tests = [];
    this.currentSuite = '';
  }
 
  suite(name, fn) {
    this.currentSuite = name;
    fn();
  }
 
  test(description, fn) {
    try {
      fn();
      this.passed++;
      this.tests.push({ suite: this.currentSuite, name: description, status: 'PASS' });
      this.log(`  [PASS] ${description}`, 'green');
    } catch (err) {
      this.failed++;
      this.tests.push({ suite: this.currentSuite, name: description, status: 'FAIL', error: err.message });
      this.log(`  [FAIL] ${description} -> ${err.message}`, 'red');
    }
  }
 
  assert(condition, message = 'Assertion failed') {
    if (!condition) {
      throw new Error(message);
    }
  }
 
  assertEqual(actual, expected, message) {
    if (actual !== expected) {
      throw new Error(message || `Expected ${expected}, but got ${actual}`);
    }
  }
 
  assertInDelta(actual, expected, delta = 0.001, message) {
    if (Math.abs(actual - expected) > delta) {
      throw new Error(message || `Expected ${expected} (+/- ${delta}), but got ${actual}`);
    }
  }
 
  log(msg, color = 'normal') {
    if (typeof process !== 'undefined' && process.stdout) {
      const colors = { red: '\x1b[31m', green: '\x1b[32m', cyan: '\x1b[36m', reset: '\x1b[0m' };
      console.log(`${colors[color] || ''}${msg}${colors.reset}`);
    } else {
      console.log(msg);
    }
  }
 
  report() {
    this.log(`\n==========================================`, 'cyan');
    this.log(`TEST SUMMARY: ${this.passed} PASSED, ${this.failed} FAILED`, this.failed === 0 ? 'green' : 'red');
    this.log(`==========================================\n`, 'cyan');
    return this.failed === 0;
  }
}
 
const runner = new TestRunner();
 
// ==========================================
// 1. BALL PHYSICS & VECTOR TESTS
// ==========================================
 
runner.suite('Ball Mechanics', () => {
  runner.test('Ball initializes at specified position', () => {
    const ball = new Ball(200, 300, 8, 5);
    runner.assertEqual(ball.x, 200);
    runner.assertEqual(ball.y, 300);
    runner.assertEqual(ball.radius, 8);
    runner.assertEqual(ball.stuckToPaddle, true);
  });
 
  runner.test('Ball moves according to velocity when launched', () => {
    const ball = new Ball(400, 500, 7, 6);
    ball.launch(0); // Launch straight up
    runner.assertEqual(ball.stuckToPaddle, false);
    const startY = ball.y;
    ball.update(1);
    runner.assertInDelta(ball.y, startY - 6, 0.01, 'Ball should move 6 units upward');
  });
 
  runner.test('Ball speed scaling alters velocity vector correctly', () => {
    const ball = new Ball(400, 500, 7, 6);
    ball.launch(0);
    ball.setSpeed(10);
    runner.assertInDelta(ball.getSpeed(), 10, 0.001);
  });
});
 
// ==========================================
// 2. PADDLE BOUNDARY & MOVEMENT TESTS
// ==========================================
 
runner.suite('Paddle Mechanics', () => {
  runner.test('Paddle clamps at left canvas boundary', () => {
    const paddle = new Paddle(800, 600);
    paddle.setPosition(-50, 800);
    runner.assertEqual(paddle.x, 0, 'Paddle position should be clamped to left wall (0)');
  });
 
  runner.test('Paddle clamps at right canvas boundary', () => {
    const paddle = new Paddle(800, 600);
    paddle.setPosition(1000, 800);
    runner.assertEqual(paddle.x, 800 - paddle.width, 'Paddle right edge should clamp at canvas right wall');
  });
 
  runner.test('Paddle moves smoothly left and right', () => {
    const paddle = new Paddle(800, 600);
    const startX = paddle.x;
    paddle.moveRight();
    paddle.update(800);
    runner.assert(paddle.x > startX, 'Paddle should move right');
    paddle.moveLeft();
    paddle.moveLeft();
    paddle.update(800);
    runner.assert(paddle.x < startX + paddle.speed, 'Paddle should move left');
  });
});
 
// ==========================================
// 3. WALL COLLISION ENGINE TESTS
// ==========================================
 
runner.suite('Wall Collision Physics', () => {
  runner.test('Left wall bounce reverses horizontal velocity', () => {
    const ball = new Ball(5, 300, 7, 6);
    ball.vx = -5;
    ball.vy = -3;
    ball.stuckToPaddle = false;
 
    const res = PhysicsEngine.checkWallCollision(ball, 800, 600);
    runner.assert(res.bounced, 'Wall collision should be registered');
    runner.assert(ball.vx > 0, 'Horizontal velocity should be positive after left wall hit');
    runner.assertEqual(ball.x, ball.radius, 'Ball position should be reset to radius');
  });
 
  runner.test('Right wall bounce reverses horizontal velocity', () => {
    const ball = new Ball(796, 300, 7, 6);
    ball.vx = 5;
    ball.vy = -3;
    ball.stuckToPaddle = false;
 
    const res = PhysicsEngine.checkWallCollision(ball, 800, 600);
    runner.assert(res.bounced, 'Wall collision should be registered');
    runner.assert(ball.vx < 0, 'Horizontal velocity should be negative after right wall hit');
  });
 
  runner.test('Top wall bounce reverses vertical velocity', () => {
    const ball = new Ball(400, 5, 7, 6);
    ball.vx = 2;
    ball.vy = -6;
    ball.stuckToPaddle = false;
 
    const res = PhysicsEngine.checkWallCollision(ball, 800, 600);
    runner.assert(res.bounced, 'Top wall collision should be registered');
    runner.assert(ball.vy > 0, 'Vertical velocity should be positive after top wall hit');
  });
 
  runner.test('Bottom boundary detects out of bounds life loss', () => {
    const ball = new Ball(400, 610, 7, 6);
    ball.stuckToPaddle = false;
 
    const res = PhysicsEngine.checkWallCollision(ball, 800, 600);
    runner.assert(res.outOfBounds, 'Should mark outOfBounds when dropping past floor');
  });
});
 
// ==========================================
// 4. PADDLE COLLISION & DEFLECTION ANGLE TESTS
// ==========================================
 
runner.suite('Paddle Collision Deflection', () => {
  runner.test('Paddle center hit deflects ball upward with low horizontal angle', () => {
    const paddle = new Paddle(800, 600);
    const ball = new Ball(paddle.x + paddle.width / 2, paddle.y - 2, 7, 6);
    ball.vx = 0;
    ball.vy = 6;
    ball.stuckToPaddle = false;
 
    const hit = PhysicsEngine.checkPaddleCollision(ball, paddle);
    runner.assert(hit, 'Paddle collision should be detected');
    runner.assert(ball.vy < 0, 'Ball should deflect upward');
    runner.assertInDelta(ball.vx, 0, 0.5, 'Center hit should result in near 0 horizontal velocity');
  });
 
  runner.test('Paddle left edge hit deflects ball to the left', () => {
    const paddle = new Paddle(800, 600);
    const ball = new Ball(paddle.x + 5, paddle.y - 2, 7, 6);
    ball.vx = 0;
    ball.vy = 6;
    ball.stuckToPaddle = false;
 
    const hit = PhysicsEngine.checkPaddleCollision(ball, paddle);
    runner.assert(hit, 'Paddle collision should be detected');
    runner.assert(ball.vy < 0, 'Ball should deflect upward');
    runner.assert(ball.vx < 0, 'Left edge hit should deflect ball to the left');
  });
 
  runner.test('Paddle right edge hit deflects ball to the right', () => {
    const paddle = new Paddle(800, 600);
    const ball = new Ball(paddle.x + paddle.width - 5, paddle.y - 2, 7, 6);
    ball.vx = 0;
    ball.vy = 6;
    ball.stuckToPaddle = false;
 
    const hit = PhysicsEngine.checkPaddleCollision(ball, paddle);
    runner.assert(hit, 'Paddle collision should be detected');
    runner.assert(ball.vy < 0, 'Ball should deflect upward');
    runner.assert(ball.vx > 0, 'Right edge hit should deflect ball to the right');
  });
});
 
// ==========================================
// 5. BRICK COLLISION & DESTRUCTION TESTS
// ==========================================
 
runner.suite('Brick Collision & HP System', () => {
  runner.test('1-HP Brick is destroyed on first hit', () => {
    const brick = new Brick(1, 100, 100, 60, 20, 1, '#00f3ff', 20);
    const ball = new Ball(130, 95, 7, 6);
    ball.vx = 0;
    ball.vy = 6;
    ball.stuckToPaddle = false;
 
    const hitResult = PhysicsEngine.checkBrickCollision(ball, brick);
    runner.assert(hitResult !== null, 'Brick collision should be registered');
    runner.assertEqual(hitResult.destroyed, true, 'Brick should be destroyed');
    runner.assertEqual(brick.active, false, 'Brick active state should be false');
  });
 
  runner.test('Multi-HP Brick reduces HP before being destroyed', () => {
    const brick = new Brick(1, 100, 100, 60, 20, 3, '#ff007f', 50);
    const ball = new Ball(130, 95, 7, 6);
    ball.vx = 0;
    ball.vy = 6;
    ball.stuckToPaddle = false;
 
    const hit1 = PhysicsEngine.checkBrickCollision(ball, brick);
    runner.assert(hit1 !== null, 'First hit registered');
    runner.assertEqual(hit1.destroyed, false, 'Brick should survive first hit');
    runner.assertEqual(brick.hp, 2, 'Brick HP should drop to 2');
    runner.assertEqual(brick.active, true, 'Brick should remain active');
  });
});
 
// ==========================================
// 6. LEVEL & GAME CONTROLLER INTEGRATION TESTS
// ==========================================
 
runner.suite('Game Flow & Levels', () => {
  runner.test('Level generator creates correct brick layout matrix', () => {
    const level1 = LevelManager.createLevel(1, 800);
    runner.assert(level1.bricks.length > 0, 'Bricks should be created for level 1');
    runner.assert(level1.baseSpeed >= 6, 'Level 1 base speed set correctly');
  });
 
  runner.test('GameController score and high score management', () => {
    const game = new GameController();
    game.score = 500;
    game.highScore = 300;
    const isNewHigh = game.saveHighScore();
    runner.assertEqual(isNewHigh, true, 'Should declare new high score');
    runner.assertEqual(game.highScore, 500, 'High score updated to 500');
  });
});
 
// Execute runner
const success = runner.report();
 
if (typeof process !== 'undefined' && process.exit) {
  process.exit(success ? 0 : 1);
}
 
if (typeof window !== 'undefined') {
  window.testRunner = runner;
}
 
309 linesjs
Writes …/tests.html
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