var x = 300;

var y = 300;

var xSpeed = (2, 7);

var ySpeed = (-7, -2);

var score = 0;

​

var xDirection = 3; //left or right

var yDirection = 0; //top or bottom

​

function setup() {

  createCanvas(600, 600);

  ellipseMode(RADIUS);

}

​

function draw() {

  background('#201E50');

  strokeWeight(4);

  stroke('#A2C3A4');

  fill('#C4F1BE');

  ellipse(x, y, radius, radius);

//continuously updating the position of the ball

  x = x + xDirection; 

  y = y + yDirection;

  x += xSpeed;

  y += ySpeed;

//if the ball exceeds the right boundaries of the screen

//the direction of the ball will reverse

  if (x >= width - radius || x <= radius) {

    xDirection = -xDirection;

    xSpeed *= -1;

  }  

//if the ball exceeds the bottom boundary of the screen

//the direction of the ball will reverse

  if (y <= radius || y >= height - radius) {

    yDirection = -yDirection;

    ySpeed *= -1;

  }

  noStroke();

  fill('#BBA0CA');

  rect(mouseX, 565, 100, 20);

  if ((x > mouseX) && (x < mouseX + 130) && (y + 10 >= 555)) {

    yDirection = -yDirection;

    xSpeed *= -1;

    ySpeed *= -1;

    score++;

  }

  fill('#F0FBEE');

  textSize(24);

  text("Score: " + score, 10, 35);

}