let ballX;

let ballW = 50;

let ballAngle;

let rectTopX;

let rectBotX;

let rectW = 120;

let speedBall = 6;

let speedRectBot = 0;

let colTop;

let colBot;

let lostBall = false;

let gameOn = false;

​

function reset(){

  lostBall = false;

  ballY = height/2;

  ballX = width/2;

  ballAngle = random(-3, 3);

  rectTopX = width/2-rectW/2;

  rectBotX = width/2-rectW/2;

  textSize(32);

  textAlign(CENTER, CENTER);

  textFont('Courier New');

  text('A', rectTopX - 50, 30);

  text('E', rectTopX + rectW + 50, 30);

  text('←', rectBotX - 50, height - 33);

  text('→', rectBotX + rectW + 50, height - 33);

  text('Press ENTER to start :)', width/2, height/2);

  noFill();

  stroke('#220650')

  strokeWeight(3);

  square(rectTopX - 70, 10, 40);

  square(rectTopX + rectW + 30, 10, 40);

  square(rectBotX - 70, height - 50, 40);

  square(rectBotX + rectW + 30, height - 50, 40);

}

​

function play(){

  colTop = ballX + ballW/2 > rectTopX && ballX - ballW/2 < rectTopX + rectW;

  colBot = ballX + ballW/2 > rectBotX && ballX - ballW/2 < rectBotX + rectW;

  if((ballY >= height - 20 - ballW/2 || ballY <= 20 + ballW/2)){

    lostBall = true;

    if(ballY < height/ 2){

      if(colTop){

        speedBall = -speedBall;

        ballAngle = (ballX - (rectTopX + rectW/2)) / 10;

        lostBall = false;

      }

    }else{

      if(colBot){

        speedBall = -speedBall;

        ballAngle = (ballX - (rectBotX + rectW/2)) / 10;

        lostBall = false;

      }

    }

  }

  if(lostBall) gameOn = false;

  if(ballX + ballW/2 > width || ballX - ballW/2 < 0){

    ballAngle = -ballAngle;

  }

  ballY += speedBall;

  ballX += ballAngle;

  if(keyIsDown(RIGHT_ARROW) && rectBotX + rectW < width){

    rectBotX += 5;

  }

  if(keyIsDown(LEFT_ARROW) && rectBotX > 0){

    rectBotX -= 5;

  }

  // e

  if(keyIsDown(69) && rectTopX + rectW < width){

    rectTopX += 5;

  }

  // a

  if(keyIsDown(65) && rectTopX > 0){

    rectTopX -= 5;

  }

  fill('#f0ab2d');

  circle(ballX, ballY, ballW);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  reset();

}

​

function draw() {

  background(170, 190, 190, 100);

  if(keyIsDown(ENTER)){

    gameOn = true;

  }

  if(gameOn){

    play(); 

  }else{

    reset();

  }

  noStroke();

  fill('#220650');

  rect(rectTopX, 0, rectW, 20);

  rect(rectBotX, height-20, rectW, 20);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}