Resultados até aqui (final da aula 3)

Não sei se chego a dev (um dia quem sabe), mas estou me divertindo muito e aprendendo tudo que posso.

//about the Ball
let xBoll = 100;
let yBoll = 100;
let diameter = 30;
let radius = diameter / 2;

//about the Racket
let xRacket = 5;
let yRacket = 150;
let widthRacket = 10;
let lengthRacket = 90;
var hit = false;

//speed of the Ball
let speedXBoll = 6;
let speedYBoll = 6;

//game arena
function setup() {
  createCanvas(600, 400);
}

//master function
function draw() {
  background(0);
  showBall();
  moveBall();
  collisionBall();
  showRacket();
  moveRacket();
  //collisionRacket();
  collisionRacketLibrary();
}

//control functions Ball
function showBall(){
  circle(xBoll, yBoll, diameter);
}

function moveBall(){
  xBoll += speedXBoll;
  yBoll += speedYBoll;
}

function collisionBall(){
  if (xBoll + radius > width || xBoll - radius < 0) {
    speedXBoll *= -1;
  }
  if (yBoll + radius > height || yBoll - radius < 0) {
    speedYBoll *= -1;
  }
}

//control functions Racket
function showRacket(){
  rect(xRacket, yRacket, widthRacket, lengthRacket);
}

function moveRacket(){
  if (keyIsDown(UP_ARROW)) {
    yRacket -= 10;
  }
  if (keyIsDown(DOWN_ARROW)) {
    yRacket += 10;
  }
}

//Our solution - not to use
function collisionRacket(){
  if (xBoll - radius <  + widthRacket && yBoll - radius <yRacket+lengthRacket && yBoll + radius > yRacket){

  }
}

//Imported solution
function collisionRacketLibrary(){
  hit = collideRectCircle(xRacket,yRacket,widthRacket,lengthRacket,xBoll,yBoll,radius);
  if(hit){
    speedXBoll *= -1;
  }
}