Building your first browser game — a complete Breakout clone step by step

const canvas = document.createElement('canvas');
canvas.width = 800; canvas.height = 600;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

const PADDLE_W = 100, PADDLE_H = 14, PADDLE_Y = 560;
const BALL_R = 8;
const BRICK_ROWS = 5, BRICK_COLS = 10;
const BRICK_W = 72, BRICK_H = 24, BRICK_PAD = 4;
const BRICK_OFFSET_X = 36, BRICK_OFFSET_Y = 40;

let paddle = { x: 350, w: PADDLE_W };
let ball = { x: 400, y: 500, vx: 250, vy: -300 };
let bricks = [];
let score = 0, lives = 3;

const COLORS = ['#e94560','#0f3460','#533483','#16213e','#e94560'];

function initBricks() {
  bricks = [];
  for (let r = 0; r < BRICK_ROWS; r++)
    for (let c = 0; c < BRICK_COLS; c++)
      bricks.push({
        x: BRICK_OFFSET_X + c * (BRICK_W + BRICK_PAD),
        y: BRICK_OFFSET_Y + r * (BRICK_H + BRICK_PAD),
        alive: true, color: COLORS[r]
      });
}

let mouseX = paddle.x;
canvas.addEventListener('mousemove', e => {
  mouseX = e.clientX - canvas.getBoundingClientRect().left;
});

let lastTime = 0;
function loop(ts) {
  const dt = (ts - lastTime) / 1000;
  lastTime = ts;

  // Paddle follows mouse
  paddle.x = Math.max(0, Math.min(canvas.width - PADDLE_W, mouseX - PADDLE_W / 2));

  // Move ball
  ball.x += ball.vx * dt;
  ball.y += ball.vy * dt;

  // Wall bounces
  if (ball.x - BALL_R < 0 || ball.x + BALL_R > canvas.width) ball.vx *= -1;
  if (ball.y - BALL_R < 0) ball.vy *= -1;

  // Paddle bounce
  if (ball.vy > 0 && ball.y + BALL_R >= PADDLE_Y &&
      ball.x >= paddle.x && ball.x <= paddle.x + PADDLE_W) {
    ball.vy *= -1;
    // Angle based on where ball hit paddle
    const hit = (ball.x - paddle.x) / PADDLE_W; // 0..1
    ball.vx = 300 * (hit - 0.5) * 2;
  }

  // Ball lost
  if (ball.y > canvas.height) {
    lives--;
    if (lives <= 0) { alert('Game Over! Score: ' + score); return; }
    ball.x = 400; ball.y = 500; ball.vx = 250; ball.vy = -300;
  }

  checkBrickCollisions();
  render();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

function checkBrickCollisions() {
  for (const b of bricks) {
    if (!b.alive) continue;
    // Closest point on brick to ball center
    const cx = Math.max(b.x, Math.min(ball.x, b.x + BRICK_W));
    const cy = Math.max(b.y, Math.min(ball.y, b.y + BRICK_H));
    const dx = ball.x - cx, dy = ball.y - cy;
    if (dx * dx + dy * dy < BALL_R * BALL_R) {
      b.alive = false;
      score += 10;
      // Determine bounce axis
      const overlapX = BALL_R - Math.abs(dx);
      const overlapY = BALL_R - Math.abs(dy);
      if (overlapX < overlapY) ball.vx *= -1;
      else ball.vy *= -1;
    }
  }
  // Level complete
  if (bricks.every(b => !b.alive)) {
    initBricks();
    ball.vx *= 1.1; ball.vy *= 1.1; // speed up
  }
}

function render() {
  // Background
  ctx.fillStyle = '#0a0a23';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Bricks
  for (const b of bricks) {
    if (!b.alive) continue;
    ctx.fillStyle = b.color;
    ctx.beginPath();
    ctx.roundRect(b.x, b.y, BRICK_W, BRICK_H, 4);
    ctx.fill();
  }

  // Paddle (gradient)
  const grad = ctx.createLinearGradient(paddle.x, PADDLE_Y, paddle.x + PADDLE_W, PADDLE_Y);
  grad.addColorStop(0, '#e94560');
  grad.addColorStop(1, '#533483');
  ctx.fillStyle = grad;
  ctx.beginPath();
  ctx.roundRect(paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H, 7);
  ctx.fill();

  // Ball (glow)
  ctx.shadowColor = '#e94560';
  ctx.shadowBlur = 15;
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, BALL_R, 0, Math.PI * 2);
  ctx.fillStyle = '#fff';
  ctx.fill();
  ctx.shadowBlur = 0;

  // HUD
  ctx.font = '18px monospace';
  ctx.fillStyle = '#ccc';
  ctx.fillText('Score: ' + score, 10, 25);
  ctx.fillText('Lives: ' + '❤️'.repeat(lives), canvas.width - 150, 25);
}