let paddle;

let bricks = [];

let brickRowCount = 3;

let brickColumnCount = 5;

let brickWidth;

let brickHeight;

let brickPadding = 10;

let brickOffsetTop = 30;

let brickOffsetLeft = 30;

​

function setup() {

  createCanvas(400, 400);

  ball = new Ball();

  paddle = new Paddle();

  brickWidth = (width - 2 * brickOffsetLeft) / brickColumnCount - brickPadding;

  brickHeight = 20;

  // Create bricks

  for (let c = 0; c < brickColumnCount; c++) {

    bricks[c] = [];

    for (let r = 0; r < brickRowCount; r++) {

      bricks[c][r] = new Brick(

        c * (brickWidth + brickPadding) + brickOffsetLeft,

        r * (brickHeight + brickPadding) + brickOffsetTop

      );

    }

  }

}

​

function draw() {

  background(0);

  ball.update();

  ball.display();

  paddle.display();

  paddle.checkEdges();

  ball.checkEdges();

  ball.checkPaddle(paddle);

  for (let c = 0; c < brickColumnCount; c++) {

    for (let r = 0; r < brickRowCount; r++) {

      let brick = bricks[c][r];

      if (brick.active) {

        brick.display();

        ball.checkBrickCollision(brick);

      }

    }

  }

  // Check win condition

  let totalBricks = brickRowCount * brickColumnCount;

  let bricksRemaining = 0;

  for (let c = 0; c < brickColumnCount; c++) {

    for (let r = 0; r < brickRowCount; r++) {

      if (bricks[c][r].active) {

        bricksRemaining++;

      }

    }

  }

  if (bricksRemaining === 0) {

    textSize(32);

    textAlign(CENTER, CENTER);

    fill(255);

    text('You Win!', width / 2, height / 2);

    noLoop();

  }

}

​

function keyPressed() {

  if (key === 'ArrowLeft') {

    paddle.move(-1);

  } else if (key === 'ArrowRight') {

    paddle.move(1);

  }

}

​

function keyReleased() {

  if (key === 'ArrowLeft' || key === 'ArrowRight') {

    paddle.move(0);

   }

}

​

class Ball {

  constructor() {

    this.x = width / 2;

    this.y = height - 30;

    this.radius = 10;

    this.speedX = 5;

    this.speedY = -5;

  }

​

  update() {

    this.x += this.speedX;

    this.y += this.speedY;

  }

​

  display() {

    fill(255);

    ellipse(this.x, this.y, this.radius * 2);

  }

​

  checkEdges() {

    if (this.x - this.radius < 0 || this.x + this.radius > width) {

      this.speedX *= -1;

    }

    if (this.y - this.radius < 0) {

      this.speedY *= -1;

    }

    if (this.y + this.radius > height) {

      // Reset the game when the ball goes below the paddle

      textSize(32);

      textAlign(CENTER, CENTER);

      fill(255);

      text('Game Over', width / 2, height / 2);

      noLoop();

    }

  }

​

  checkPaddle(paddle) {

    if (

      this.x + this.radius > paddle.x &&

      this.x - this.radius < paddle.x + paddle.width &&

      this.y + this.radius > paddle.y

    ) {

      this.speedY *= -1;

    }

  }

​

  checkBrickCollision(brick) {

    if (

      this.x + this.radius > brick.x &&

      this.x - this.radius < brick.x + brick.width &&

      this.y + this.radius > brick.y &&

      this.y - this.radius < brick.y + brickHeight

    ) {

      this.speedY *= -1;

      brick.active = false;

    }

  }

}

​

class Paddle {

  constructor() {

    this.width = 80;

    this.height = 10;

    this.x = (width - this.width) / 2;

    this.y = height - this.height;

    this.speed = 0;

  }

​

  display() {

    fill(255);

    rect(this.x, this.y, this.width, this.height);

  }

​

  move(direction) {

    // Direction: -1 for left, 1 for right, 0 for stop

    this.speed = direction * 5;

  }

​

  checkEdges() {

    if (this.x < 0) {

      this.x = 0;

    } else if (this.x + this.width > width) {

      this.x = width - this.width;

    }

  }

}

​

class Brick {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.width = brickWidth;

    this.active = true;

  }

​

  display() {

    fill(255);

    rect(this.x, this.y, this.width, brickHeight);

  }

}

​