let xBolinha = 300;

let yBolinha = 200;

let dBolinha = 15;

​

let rBolinha = dBolinha / 2;

​

let velXBolinha = 6;

let velYBolinha = 6;

​

let xRaquete = 5;

let yRaquete = 150;

let compRaquete = 10;

let altRaquete = 90;

​

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(0);

  mostraBolinha();

  moveBolinha();

  verificaBordas();

  mostraRaquete();

  moveMinhaRaquete();

  verificaMinhaRaquete();

}

​

function mostraBolinha(){

  circle(xBolinha, yBolinha, dBolinha);

}

​

function moveBolinha(){

  xBolinha += velXBolinha;

  yBolinha += velYBolinha;

}

​

function verificaBordas(){

  if(xBolinha + rBolinha > width || xBolinha - rBolinha < 0){

    velXBolinha *= -1;

  }

  if(yBolinha + rBolinha > height || yBolinha - rBolinha <0){

    velYBolinha *= -1;

  }

}

​

function mostraRaquete(){

  rect(xRaquete, yRaquete, compRaquete, altRaquete);

}

​

function moveMinhaRaquete(){

  if(keyIsDown(UP_ARROW)){

    yRaquete -= 10;

  }

  if(keyIsDown(DOWN_ARROW)){

    yRaquete += 10;

  }

}

​

function verificaMinhaRaquete(){

  if(xBolinha - rBolinha < xRaquete + compRaquete && yBolinha - rBolinha < yRaquete + altRaquete && yBolinha + rBolinha > yRaquete){

    velXBolinha *= -1;

  }

}