<div class="instructions">
      <p>
        Bounce the ball with the paddle. Use your mouse to move the paddle and
        break the bricks.
      </p>
    </div>

    <canvas id="myCanvas" width="640" height="420"></canvas>
    <button id="start_btn">Start game</button>

 * {
        padding: 0;
        margin: 0;
      }
      @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        height: 100vh;
        font-family: "DM Mono", monospace;
        background-color: #2c3e50;
        text-align: center;
      }
      canvas {
        background: #fff;
        border: 2px solid #34495e;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    
      .instructions {
        font-size: 1.3rem;
        color: #fff;
        max-width: 600px;
        margin-bottom: 20px;
      }

      #start_btn {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #0c89dd;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: 500;
        font-family: "DM Mono", monospace;
      }

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

const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 40;
const brickOffsetLeft = 30;
const numberOfBricks = 7;
const no0fRows = 3;
const colors = ["#0095DD", "#4CAF50", "#FF5733", "#FFC300"];

const bricks = [];
function initializeBricks() {
  bricks.length = 0;
  for (let row = 0; row < no0fRows; row++) {
    const brickY = brickOffsetLeft + row * (brickHeight + brickPadding);

    for (let i = 0; i < numberOfBricks; i++) {
      const brickX = brickOffsetLeft + i * (brickWidth + brickPadding);
      bricks.push({
        x: brickX,
        y: brickY,
        width: brickWidth,
        height: brickHeight,
        color: colors[i % colors.length]
      });
    }
  }
}
initializeBricks();

function drawBricks() {
  for (let i = 0; i < bricks.length; i++) {
    const brick = bricks[i];
    ctx.beginPath();
    ctx.rect(brick.x, brick.y, brick.width, brick.height);
    ctx.fillStyle = brick.color;
    ctx.fill();
    ctx.closePath();
  }
}

//   console.table(bricks)

const paddleHeight = 10;
const paddleWidth = 80;

let paddleStart = (canvas.width - paddleWidth) / 2;
function drawPaddle() {
  ctx.beginPath();

  ctx.rect(
    paddleStart,
    canvas.height - paddleHeight,
    paddleWidth,
    paddleHeight
  );
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

document.addEventListener("mousemove", movePaddle, false);
function movePaddle(e) {
  let mouseX = e.clientX - canvas.offsetLeft;
  if (mouseX > 0 && mouseX < canvas.width) {
    paddleStart = mouseX - paddleWidth / 2;
  }
}

let startX = canvas.width / 2;
let startY = canvas.height - 100;
let deltaX = 2;
let deltaY = 2;

function drawBall() {
  ctx.beginPath();
  ctx.rect(startX, startY, 6, 6);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();

  if (startX < 0 || startX + 6 > canvas.width) {
    deltaX = -deltaX;
  }

  if (startY < 0) {
    deltaY = -deltaY;
  }
  if (startY + 6 >= canvas.height) {
    deltaY = -deltaY;
    alert("Try Again");
    resetGame();

    // window.location.href = window.location.href;
  }
  startX += deltaX;
  startY += deltaY;
}
function checkBallPaddleCollision() {
  if (
    startY + 6 >= canvas.height - paddleHeight &&
    startX + 6 > paddleStart &&
    startX < paddleStart + paddleWidth
  ) {
    deltaY = -deltaY;
  }
}
let score = 0;
function checkBrickBallCollision() {
  for (let i = 0; i < bricks.length; i++) {
    const brick = bricks[i];

    if (
      startX < brick.x + brick.width &&
      startX + 6 > brick.x &&
      startY < brick.y + brick.height &&
      startY + 6 > brick.y
    ) {
      deltaY = -deltaY;
      bricks.splice(i, 1);
      score += 10;
      break;
    }
  }
}
function updateScore() {
  ctx.font = "16px Arial";
  ctx.fillText("Score: " + score, 10, 20);
}

let gameWon = false;
function gameLoop() {
  if (bricks.length === 0 && !gameWon) {
    gameWon = true;
    alert("You Won: Play Again");
    resetGame();
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  updateScore();
  drawBricks();
  drawPaddle();
  drawBall();

  checkBallPaddleCollision();
  checkBrickBallCollision();
  if (!gameWon) {
    requestAnimationFrame(gameLoop);
  }
}

function resetGame() {
        score = 0;
        startX = canvas.width / 2;
        startY = canvas.height - 100;
        deltaX = -2;
        deltaY = -2;
        paddleStart = canvas.width / 2 - paddleWidth / 2;

        initializeBricks();

        gameWon = false;
      }
document.getElementById("start_btn").addEventListener("click", function () {
  gameLoop();
});