Breakout / Arkanoid en HTML5 con Cerewro: romper ladrillos con bola y paleta

Crea un juego de Breakout/Arkanoid completo en HTML5 Canvas puro:
- Canvas 800x600
- Paleta controlada por ratón y flechas de teclado
- Bola con física realista de rebote (ángulo variable según punto de impacto)
- 8 filas x 12 columnas de ladrillos con colores por fila
- Ladrillos que requieren 1, 2 o 3 golpes (con diferente color)
- Power-ups que caen de ladrillos (aleatoriamente):
  * Paleta más ancha (azul)
  * Bola lenta (verde)
  * Bola extra (dorado)
  * Disparo láser (rojo)
- 3 vidas, puntuación por tipo de ladrillo
- 3 niveles con layouts de ladrillos diferentes
- Efectos: partículas al romper ladrillo, flash de pantalla
- Sonidos con Web Audio API (boing, crack, power-up)
- Guardar récord en localStorage

function handlePaddleCollision(ball, paddle) {
  if (!collides(ball, paddle)) return;

  // Posición relativa del impacto (-1 a +1)
  const hitPos = (ball.x - paddle.x) / paddle.width * 2 - 1;

  // Ángulo de salida: -60° a +60° según donde golpea
  const angle = hitPos * (Math.PI / 3);
  const speed = Math.hypot(ball.vx, ball.vy);

  ball.vx = speed * Math.sin(angle);
  ball.vy = -Math.abs(speed * Math.cos(angle));  // siempre hacia arriba
}

const POWERUPS = {
  WIDE:   { color: '#4488ff', label: '⬛ Paleta ancha', duration: 10 },
  SLOW:   { color: '#44ff88', label: '🐢 Bola lenta',   duration: 8  },
  MULTI:  { color: '#ffdd00', label: '🔴 Bola extra',   duration: 0  },
  LASER:  { color: '#ff4444', label: '⚡ Láser',        duration: 6  }
};

function spawnPowerup(brick) {
  if (Math.random() > 0.2) return; // 20% de probabilidad
  const types = Object.keys(POWERUPS);
  const type  = types[Math.floor(Math.random() * types.length)];
  powerups.push({ x: brick.x, y: brick.y, vy: 80, type, ...POWERUPS[type] });
}