let xBall = 300;
let yBall = 200;
let dBall = 20;
let radius = dBall/2;

let speedXBall = 2;
let speedYBall = 2;

let xRacketOne = 5;
let yRacketOne = 150;
let wRacketOne = 10;
let hRacketOne = 90;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(50);
  showBall();
  moveBall();
  checkTouchBorder();
  showRacketOne();
  moveRacketOne();
  checkTouchRacketOne();
}

function showBall (){
  circle(xBall,yBall,dBall)
  let colorBall = color('#0f0');
  fill(colorBall);
}

function moveBall() {
  xBall += speedXBall;
  yBall += speedYBall
}

function checkTouchBorder() {
    if (xBall + radius > width ||
     xBall - radius <  0){
    speedXBall *= -1;
}
    if (yBall + radius > height ||
     yBall - radius<  0){
    speedYBall *= -1;
  }
}

function showRacketOne(){
  rect (xRacketOne, yRacketOne, wRacketOne, hRacketOne, 20);
  // let colorRacket = color('red');
  // fill(colorRacket);
}

function moveRacketOne(){
  if (keyIsDown (UP_ARROW)) {
    yRacketOne -= 10;
  }
    if (keyIsDown (DOWN_ARROW)) {
    yRacketOne += 10;
  }
}

function checkTouchRacketOne() {
    if (xBall - radius < xRacketOne + wRacketOne &&
      yBall - radius < yRacketOne + hRacketOne  &&
      yBall + radius > yRacketOne){
    speedXBall *= -1;
  }
}