I am trying to create brick breaker but when my ball moves it is really glitchy. The ball position keeps jumping to where it previously was. If anyone knows how to fix this issue could you please let me know.

Here is my code.

```
let ballX = 200;
let ballY = 200;
let ballR = 15;
let ballSpeedX = 5;
let ballSpeedY = 5;
let terminalSpeed = 15;
let paddleThickness = 10;
let paddleLength = 100;
let brickW = 100;
let brickH = 50;
let brickGap = 1;
let brickRow = 1;
let brickCol = 8;
let brickGrid = new Array(brickCol);
function setup() {
createCanvas(800, 600);
brickReset();
}
function brickReset() {
for (let i = 0; i < brickCol; i++) {
brickGrid[i] = true;
}
}
function draw() {
background(0, 40, 90);
move();
ballPaddleCollision();
brickDraw();
fill(255, 105, 0);
ellipse(ballX, ballY, ballR * 2); // ball
fill(220);
rect(mouseX, height - 60, paddleLength, paddleThickness);
console.log(ballSpeedX);
}
function brickDraw() {
for (let i = 0; i < brickGrid.length; i++) {
fill(255, 105, 0);
rect(brickW * i, 0, brickW - brickGap, brickH - brickGap);
}
}
function ballReset() {
ballX = width / 2;
ballY = height / 2;
}
function move() {
ballX += ballSpeedX;
ballY += ballSpeedY;
ballSpeedX *= 0.999;
if (ballSpeedX >= 0) {
if (ballSpeedX > 15) {
ballSpeedX = terminalSpeed;
}
}
if(ballSpeedX <= 0) {
if(ballSpeedX < -15) {
ballSpeedX = -terminalSpeed
}
}
if (ballX > width - ballR) {
ballSpeedX *= -1;
}
if (ballX < 0 + ballR) {
ballSpeedX *= -1;
}
if (ballY > height - ballR) {
//ballSpeedY *= -1;
ballReset();
}
if (ballY < 0 + ballR) {
ballSpeedY *= -1;
}
}
function ballPaddleCollision() {
let paddleTop = height - 60;
let paddleBottom = paddleTop + paddleThickness;
let paddleLeft = mouseX;
let paddleRight = paddleLeft + paddleLength;
if (ballY > paddleTop - ballR &&
ballY < paddleBottom + ballR &&
ballX > paddleLeft - ballR &&
ballX < paddleRight + ballR) {
ballSpeedY *= -1;
let paddleCenter = mouseX + paddleLength / 2;
let ballDistFromPaddleCenX = ballX - paddleCenter;
ballSpeedX += ballDistFromPaddleCenX * 0.7;
}
}
```