.lw { font-size: 60px; font-family: Arial, Helvetica, sans-serif; }
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #070b19;
  font-family: system-ui, sans-serif;
  color: white;
}

.arcade {
  width: min(760px, 100%);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  color: #64e8fa;
  font-weight: 800;
}

h1 {
  margin: 5px 0 0;
  font-size: clamp(22px, 4vw, 35px);
  letter-spacing: 2px;
}

.stats {
  display: flex;
  gap: 12px;
}

.stats div {
  background: #151d35;
  padding: 10px 16px;
  border-radius: 12px;
  color: #9eabc9;
  font-size: 12px;
  text-align: center;
}

.stats strong {
  display: block;
  font-size: 23px;
  color: white;
  margin-top: 3px;
}

.game-wrap {
  position: relative;
  border: 1px solid #26365d;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 70px #0008;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #0b1125;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: rgba(7, 11, 25, .88);
  padding: 20px;
}

.overlay.hidden {
  display: none;
}

.overlay h2 {
  font-size: clamp(24px, 5vw, 42px);
  margin: 0 0 10px;
}

.overlay p {
  color: #aab6d6;
  margin-bottom: 25px;
}

button {
  border: 0;
  padding: 15px 35px;
  border-radius: 10px;
  background: #64e8fa;
  color: #071021;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .2s;
}

button:hover {
  transform: scale(1.05);
}

.hint {
  text-align: center;
  color: #7887aa;
  font-size: 12px;
  line-height: 1.7;
}

@media(max-width: 550px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
}

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const scoreEl = document.getElementById("score");
const livesEl = document.getElementById("lives");
const overlay = document.getElementById("overlay");
const titleEl = document.getElementById("title");
const messageEl = document.getElementById("message");
const startBtn = document.getElementById("start");

const W = canvas.width;
const H = canvas.height;

let score = 0;
let lives = 3;
let running = false;
let animationId = null;

const paddle = {
  x: W / 2 - 50,
  y: H - 35,
  w: 100,
  h: 12,
  speed: 8
};

const ball = {
  x: W / 2,
  y: H - 55,
  r: 7,
  dx: 3.2,
  dy: -4.2
};

const rows = 5;
const cols = 9;
const brickW = 62;
const brickH = 18;
const gap = 9;
const offsetX = 31;
const offsetY = 65;

const colors = [
  "#fa6385",
  "#ff9e62",
  "#f6d365",
  "#61d6c4",
  "#788cff"
];

let bricks = [];
let leftPressed = false;
let rightPressed = false;

function createBricks() {
  bricks = [];

for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      bricks.push({
        x: offsetX + c * (brickW + gap),
        y: offsetY + r * (brickH + gap),
        active: true,
        color: colors[r]
      });
    }
  }
}

function resetBall() {
  ball.x = W / 2;
  ball.y = H - 55;
  ball.dx = Math.random() > 0.5 ? 3.2 : -3.2;
  ball.dy = -4.2;
  paddle.x = W / 2 - paddle.w / 2;
}

function startGame() {
  if (animationId !== null) {
    cancelAnimationFrame(animationId);
    animationId = null;
  }

score = 0;
  lives = 3;
  running = true;

scoreEl.textContent = String(score);
  livesEl.textContent = String(lives);

createBricks();
  resetBall();

overlay.classList.add("hidden");
  loop();
}

function endGame(won) {
  running = false;

titleEl.textContent = won
    ? "YOU WIN!"
    : "GAME OVER";

messageEl.textContent =
    "Your final score: " + score;

startBtn.textContent = "PLAY AGAIN";
  overlay.classList.remove("hidden");
}

function drawBackground() {
  ctx.fillStyle = "#0b1125";
  ctx.fillRect(0, 0, W, H);

ctx.strokeStyle = "#192340";
  ctx.lineWidth = 1;

for (let x = 0; x < W; x += 35) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, H);
    ctx.stroke();
  }

for (let y = 0; y < H; y += 35) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(W, y);
    ctx.stroke();
  }
}

function drawBricks() {
  bricks.forEach(function(b) {
    if (!b.active) return;

ctx.fillStyle = b.color;
    ctx.shadowColor = b.color;
    ctx.shadowBlur = 9;

ctx.beginPath();
    ctx.roundRect(b.x, b.y, brickW, brickH, 5);
    ctx.fill();

ctx.shadowBlur = 0;
  });
}

function drawPaddle() {
  ctx.fillStyle = "#64e8fa";
  ctx.shadowColor = "#64e8fa";
  ctx.shadowBlur = 18;

ctx.beginPath();
  ctx.roundRect(
    paddle.x,
    paddle.y,
    paddle.w,
    paddle.h,
    7
  );
  ctx.fill();

ctx.shadowBlur = 0;
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);

ctx.fillStyle = "#ffffff";
  ctx.shadowColor = "#64e8fa";
  ctx.shadowBlur = 20;
  ctx.fill();

ctx.shadowBlur = 0;
}

function updatePaddle() {
  if (leftPressed) paddle.x -= paddle.speed;
  if (rightPressed) paddle.x += paddle.speed;

paddle.x = Math.max(
    0,
    Math.min(W - paddle.w, paddle.x)
  );
}

function updateBall() {
  const oldX = ball.x;
  const oldY = ball.y;

ball.x += ball.dx;
  ball.y += ball.dy;

if (ball.x < ball.r) {
    ball.x = ball.r;
    ball.dx = Math.abs(ball.dx);
  }

if (ball.x > W - ball.r) {
    ball.x = W - ball.r;
    ball.dx = -Math.abs(ball.dx);
  }

if (ball.y < ball.r) {
    ball.y = ball.r;
    ball.dy = Math.abs(ball.dy);
  }

if (
    ball.dy > 0 &&
    oldY + ball.r <= paddle.y &&
    ball.y + ball.r >= paddle.y &&
    ball.x >= paddle.x &&
    ball.x <= paddle.x + paddle.w
  ) {
    const hit =
      (ball.x - (paddle.x + paddle.w / 2)) /
      (paddle.w / 2);

ball.dx = hit * 5;
    ball.dy = -Math.sqrt(
      Math.max(9, 25 - ball.dx * ball.dx)
    );
    ball.y = paddle.y - ball.r;
  }

for (const b of bricks) {
    if (!b.active) continue;

if (
      ball.x + ball.r > b.x &&
      ball.x - ball.r < b.x + brickW &&
      ball.y + ball.r > b.y &&
      ball.y - ball.r < b.y + brickH
    ) {
      b.active = false;
      score += 10;
      scoreEl.textContent = String(score);

if (
        oldY + ball.r <= b.y ||
        oldY - ball.r >= b.y + brickH
      ) {
        ball.dy *= -1;
      } else {
        ball.dx *= -1;
      }

break;
    }
  }

if (bricks.every(function(b) {
    return !b.active;
  })) {
    endGame(true);
    return;
  }

if (ball.y - ball.r > H) {
    lives--;
    livesEl.textContent = String(lives);

if (lives <= 0) {
      endGame(false);
    } else {
      resetBall();
    }
  }
}

function loop() {
  if (!running) {
    animationId = null;
    return;
  }

drawBackground();
  updatePaddle();
  updateBall();
  drawBricks();
  drawPaddle();
  drawBall();

if (running) {
    animationId = requestAnimationFrame(loop);
  } else {
    animationId = null;
  }
}

document.addEventListener("keydown", function(e) {
  if (e.key === "ArrowLeft" || e.key === "a") {
    leftPressed = true;
    e.preventDefault();
  }

if (e.key === "ArrowRight" || e.key === "d") {
    rightPressed = true;
    e.preventDefault();
  }
});

document.addEventListener("keyup", function(e) {
  if (e.key === "ArrowLeft" || e.key === "a") {
    leftPressed = false;
  }

if (e.key === "ArrowRight" || e.key === "d") {
    rightPressed = false;
  }
});

function movePointer(clientX) {
  const rect = canvas.getBoundingClientRect();
  const scale = W / rect.width;

const x = (clientX - rect.left) * scale;

paddle.x = Math.max(
    0,
    Math.min(W - paddle.w, x - paddle.w / 2)
  );
}

canvas.addEventListener("mousemove", function(e) {
  movePointer(e.clientX);
});

canvas.addEventListener("touchmove", function(e) {
  if (e.touches.length > 0) {
    movePointer(e.touches[0].clientX);
    e.preventDefault();
  }
}, { passive: false });

startBtn.addEventListener("click", startGame);

createBricks();
drawBackground();
drawBricks();
drawPaddle();
drawBall();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground