quando eu aperto a seta para baixo ,minha raquete vai para frente..

bom dia quando aperto a seta para cima minha raquete vai para cima , quando aperto a tecla para baixo a raquete vai para frente, não consigo entender pq a seta para cima não funciona direito.. gostaria de uma explicação e uma solução por favor , abaixo está meu código ..

function setup() {

createCanvas(600, 400); } //Variáveis da bolinha let xBolinha = 300; let yBolinha = 200; let diametro = 15; let raio = diametro/2;

//Variáveis velocidade da bolinha. let velocidadeXBolinha = 5 ; let velocidadeYBolinha = 5 ;

//variáveis da raquete let xRaquete = 5; let yRaquete =150; let comprimentoRaquete = 10; let alturaRaquete = 90;

function draw() { background(0); mostraBolinha(); //movimentaBolinha(); verificaColisaoBolinha(); mostraRaquete(); movimentaMinhaRaquete(); }

function mostraBolinha(){ circle(xBolinha, yBolinha ,diametro); }

function movimentaBolinha(){

xBolinha += velocidadeXBolinha ; // essa linha de código é o movimento da bolinha no eixo x. yBolinha += velocidadeYBolinha ; // essa linha de código é o movimento da bolinha no eixo y.

}

function verificaColisaoBolinha(){ if(xBolinha + raio > width || xBolinha - raio < 0 ){ // essa linha de código é para nao deixar a bolinha ultrapassa a borda do eixo X

velocidadeXBolinha *= -1;

}

if(yBolinha + raio > height || yBolinha - raio < 0){ // essa linha de código é para nÃo deixar a bolinha ultrapassa a borda do eixo Y velocidadeYBolinha *= -1; }

} function mostraRaquete (){ rect(xRaquete ,yRaquete, comprimentoRaquete, alturaRaquete) }

function movimentaMinhaRaquete(){ if (keyIsDown(UP_ARROW)){

  yRaquete -= 10 ; 

  }

if (keyIsDown(DOWN_ARROW)){

xRaquete += 10;

}

}