movimento da raquete

raquete só funciona quando clico com mouse dentro da tela preta, está correto? ps: eu sei que palavras duplas devem iniciar com a segunda maiuscula, porém lembrei só depois.

// variáveis da bolinha 

let bolinhax = 300;
let bolinhay = 200;
let diametro = 30;
let velocidadexbolinha = 2;
let velocidadeybolinha = 2;
let raio = diametro/2

//variaveis da raquete 

let raquetex = 5;
let raquetey = 160;
let larguraraquete = 10;
let alturaraquete = 80; 






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

function draw() {
  background(0);
  mostrabolinha ();
  movimentodabolinha();
  colisaocomborda();

  mostraraquete();
  movimentaminharaquete();

  colisaoraquetebola();



 }

function mostrabolinha() {
   circle (bolinhax,bolinhay,diametro);
}

function movimentodabolinha() {
  bolinhax = bolinhax+ velocidadexbolinha
  bolinhay = bolinhay+ velocidadeybolinha
}

function colisaocomborda() {
  if (bolinhax+raio > width  || bolinhax-raio < 0){
  velocidadexbolinha *= -1;}

  if (bolinhay+raio > height  || bolinhay-raio < 0){
  velocidadeybolinha = velocidadeybolinha * -1;}
}

function mostraraquete (){

 rect (raquetex,raquetey,larguraraquete,alturaraquete);
}

function movimentaminharaquete(){

    if (keyIsDown(UP_ARROW) ){
     raquetey -= 10;
  }
    if (keyIsDown(DOWN_ARROW)) {
        raquetey += 10;
    }
}

function colisaoraquetebola(){

  if (bolinhax - raio <  raquetex + larguraraquete 
     && bolinhay - raio < raquetey + alturaraquete
     && bolinhay + raio  > raquetey ){

      velocidadexbolinha *= -1
      }
}