let ball;

let bricks = [];

let rows = 10;

let cols = 10;

let brickSize;

let brickGap = 5;

let scoreA = 0; 

let scoreB = 0; 

​

function setup() {

  createCanvas(600, 600);

  paddle = new Paddle();

  ball = new Ball();

  brickSize = width / (cols) - brickGap;

  createBricks();

  // Initialize score A

  scoreA = bricks.length;

}

​

​

​

function createBricks() {

  for (let i = 0; i < rows; i++) {

    for (let j = 0; j < cols; j++) {

      let x = j * (brickSize + brickGap) + brickGap / 2;

      let y = i * (brickSize + brickGap) + brickGap / 2;

      bricks.push(new Brick(x, y, brickSize));

    }

  }

}

​

function keyPressed() {

  if (keyCode === RIGHT_ARROW) {

    paddle.setDir(1);

  } else if (keyCode === LEFT_ARROW) {

    paddle.setDir(-1);

  }

}

​

function keyReleased() {

  if (keyCode === RIGHT_ARROW || keyCode === LEFT_ARROW) {

    paddle.setDir(0);

  }

}

​

class Paddle {

  constructor() {

    this.width = 100;

    this.height = 20;

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

    this.y = height - 30;

    this.speed = 5;

    this.direction = 0;

  }

  display() {

    fill(255);

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

  }

  update() {

    this.x += this.speed * this.direction;

    this.x = constrain(this.x, 0, width - this.width);

  }

  setDir(dir) {

    this.direction = dir;

  }

}

​

class Ball {

  constructor() {

    this.x = width / 2;

    this.y = height / 2;

    this.diameter = 20;

    this.speedX = random(-5, 5);

    this.speedY = -5;

  }

   display() {

    fill(255);

     strokeWeight(0);

    ellipse(this.x, this.y, this.diameter);

    // Draw GBP sign in the middle of the ball

    textSize(20); // Adjust text size as needed

    textAlign(CENTER, CENTER);

    fill(0); // Set text color to black

       stroke(0, 0, 0); // Red border color

strokeWeight(3);

    text('£', this.x, this.y + 5); // Draw GBP sign at the center of the ball

  }

  update() {

    this.x += this.speedX;

    this.y += this.speedY;

    if (this.x <= 0 || this.x >= width) {

      this.speedX *= -1;

    }

    if (this.y <= 0 || (this.y + this.diameter / 2 >= paddle.y && this.x >= paddle.x && this.x <= paddle.x + paddle.width)) {

      this.speedY *= -1;

    }

    if (this.y > height) {

      // Game Over

      textSize(32);

      textAlign(CENTER, CENTER);

      fill(255);

      text("Game Over!", width / 2, height / 2);

      noLoop();

    }

  }

  reverse(axis) {

    if (axis === 'x') {

      this.speedX *= -1;

    } else if (axis === 'y') {

      this.speedY *= -1;

    }

  }

  hits(brick) {

    let closestX = constrain(this.x, brick.x, brick.x + brick.size);

    let closestY = constrain(this.y, brick.y, brick.y + brick.size);

    let distanceX = this.x - closestX;

    let distanceY = this.y - closestY;

    let distanceSquared = distanceX * distanceX + distanceY * distanceY;

    return distanceSquared < (this.diameter / 2) * (this.diameter / 2);

  }

}

​

class Brick {

  constructor(x, y, size) {

    this.x = x;

    this.y = y;

    this.size = size;

  }

  display() {

​

    fill(255, 0, 0);

           stroke(255, 0, 0); // Red border color

strokeWeight(3);

    ellipse(this.x + this.size / 2, this.y + this.size / 2, this.size);

  }

}

​

function draw() {

  background(200);

  paddle.display(); // Display paddle before updating

  paddle.update();

  ball.display(); // Display ball before updating

  ball.update();

  for (let i = bricks.length - 1; i >= 0; i--) {

    bricks[i].display();

    if (ball.hits(bricks[i])) {

      bricks.splice(i, 1);

      ball.reverse('y');

      scoreA--; // Decrease score A when a brick is hit and removed

      scoreB++; // Increase score B when a brick is hit and removed

    }

  }

  // Display score counters

  fill(255, 0, 0); // Set fill color to red

textSize(100);

textAlign(CENTER);

  stroke(0, 0, 0); // Red border color

strokeWeight(4);

  textFont('times');

text(`Critical: ${scoreA}`, width - 280, 320); // Draw "Critical" text in red

fill(255); // Reset fill color to white

  stroke(255, 0, 0); // Red border color

strokeWeight(3);

  textSize(60);

textFont('Zapfino');

text(`Performative: ${scoreB}`, width - 320, 400);

}

​