Brick Breaker Challenge 🧱

.game-container {
  text-align: center;
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  margin: 5px 0;
  font-size: 18px;
}

.game-area {
  display: flex;
  justify-content: center;
  margin: 50px 0; /* Increased space between canvas and Start button */
}

#gameCanvas {
  background-color: #f4f4f4;
  border: 2px solid #333;
  display: block;
  max-width: 100%;
}

.start-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.start-btn:hover {
  background-color: #0056b3;
}

.start-btn:active {
  transform: scale(0.98);
}

<div class="game-container">
  <h1>Brick Breaker Challenge 🧱</h1>
  <p>Score: <span id="score">0</span></p>
  <div class="game-area">
    <canvas id="gameCanvas"></canvas>
  </div>
  <button class="start-btn" id="startBtn">Start Game</button>
  <input type="hidden" id="hiddenScore" value="0">
</div>

const hiddenScore = document.getElementById("hiddenScore");
const scoreElement = document.getElementById("score");
const startBtn = document.getElementById("startBtn");
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Responsive canvas dimensions
function resizeCanvas() {
  const parentWidth = canvas.parentElement.offsetWidth;
  canvas.width = Math.min(parentWidth, 400); // Max width of 400px
  canvas.height = canvas.width * 1.5;
}

resizeCanvas();
window.addEventListener("resize", resizeCanvas);

let paddleHeight = 10;
let paddleWidth = canvas.width * 0.2; // 20% of canvas width
let paddleX = (canvas.width - paddleWidth) / 2;

let ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

let rightPressed = false;
let leftPressed = false;

let brickRowCount = 3;
let brickColumnCount = 5;
let brickWidth = (canvas.width - (brickColumnCount - 1) * 10) / brickColumnCount; // Adjusted for responsive canvas
let brickHeight = 20;
let brickPadding = 10;
let brickOffsetTop = 30;
let brickOffsetLeft = 10;

let bricks = [];
let score = 0;

function setupBricks() {
  bricks = [];
  for (let c = 0; c < brickColumnCount; c++) {
    bricks[c] = [];
    for (let r = 0; r < brickRowCount; r++) {
      bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
  }
}

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#007bff";
  ctx.fill();
  ctx.closePath();
}

function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#333";
  ctx.fill();
  ctx.closePath();
}

function drawBricks() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      if (bricks[c][r].status === 1) {
        let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
        let brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;

        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "#28a745";
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}

function drawScore() {
  scoreElement.textContent = score;
}

function collisionDetection() {
  for (let c = 0; c < brickColumnCount; c++) {
    for (let r = 0; r < brickRowCount; r++) {
      let b = bricks[c][r];
      if (b.status === 1) {
        if (
          x > b.x &&
          x < b.x + brickWidth &&
          y > b.y &&
          y < b.y + brickHeight
        ) {
          dy = -dy;
          b.status = 0;
          score++;
          hiddenScore.value = score; // Update hidden score field
          if (score === brickRowCount * brickColumnCount) {
            alert("Congratulations! You win!");
            document.querySelector(".share-buttons").style.display = "flex"; // Show share buttons
            return;
          }
        }
      }
    }
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBricks();
  drawBall();
  drawPaddle();
  drawScore();
  collisionDetection();

  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
    dx = -dx;
  }
  if (y + dy < ballRadius) {
    dy = -dy;
  } else if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      dy = -dy;
    } else {
      alert("Game Over! Try Again.");
      document.querySelector(".share-buttons").style.display = "flex"; // Show share buttons
      return;
    }
  }

  x += dx;
  y += dy;

  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7;
  }
  if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  }

  requestAnimationFrame(draw);
}

function keyDownHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = true;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.key === "Right" || e.key === "ArrowRight") {
    rightPressed = false;
  } else if (e.key === "Left" || e.key === "ArrowLeft") {
    leftPressed = false;
  }
}

function touchMoveHandler(e) {
  const touchX = e.touches[0].clientX - canvas.getBoundingClientRect().left;
  if (touchX > 0 && touchX < canvas.width) {
    paddleX = touchX - paddleWidth / 2;
  }
}

function startGame() {
  document.querySelector(".share-buttons").style.display = "none"; // Hide share buttons
  score = 0;
  hiddenScore.value = score;
  x = canvas.width / 2;
  y = canvas.height - 30;
  dx = 2;
  dy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
  setupBricks();
  draw();
}

document.addEventListener("keydown", keyDownHandler);
document.addEventListener("keyup", keyUpHandler);
canvas.addEventListener("touchmove", touchMoveHandler);
startBtn.addEventListener("click", startGame);