Ball rolling to the right only?

I’m relatively new to coding, and I’ve been experimenting with creating a bouncing ball animation. While most aspects of the coding have been okay, I’ve encountered a peculiar issue that has left me scratching my head. I’ve managed to get the ball to bounce, but for some reason, it seems to only roll to the right until it collides with the right side of the viewport. I’m really confused, and I’m eager to delve deeper into understanding what might be causing this unexpected behavior and how I can rectify it. Here’s the snippet of my JavaScript file:

var ball = document.querySelector('.ball'),
    isDragging = false,
    isAnimating = false,
    isAnimationAllowed = true, // New flag to control animation while dragging
    offsetX,
    offsetY,
    velocityX = 0,
    velocityY = 0,
    friction = 0.95,
    gravity = 0.5,
    floorLevel = 500,
    animationFrame;

ball.addEventListener('mousedown', startDragging);
ball.addEventListener('touchstart', startDragging);

function startDragging(event) {
    isDragging = true;
    isAnimating = false; // Reset isAnimating to false
    isAnimationAllowed = false; // Disable animation while dragging
    offsetX = event.clientX - ball.getBoundingClientRect().left;
    offsetY = event.clientY - ball.getBoundingClientRect().top;
  
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDragging);
    
    document.addEventListener('touchmove', drag);
    document.addEventListener('touchend', stopDragging);
  }

function drag(event) {
  if (!isDragging) return;

  event.preventDefault();

  var newX, newY;

  if (event.type === 'mousemove') {
    newX = event.clientX - offsetX;
    newY = event.clientY - offsetY;
  } else if (event.type === 'touchmove') {
    newX = event.touches[0].clientX - offsetX;
    newY = event.touches[0].clientY - offsetY;
  }

  ball.style.left = newX + "px";
  ball.style.top = newY + "px";

  velocityX = newX - ball.offsetLeft;
  velocityY = newY - ball.offsetTop;
}

function stopDragging() {
  isDragging = false;
  isAnimationAllowed = true; // Enable animation after dragging stops

  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', stopDragging);

  document.removeEventListener('touchmove', drag);
  document.removeEventListener('touchend', stopDragging);

  if (!isAnimating) {
    animate();
  }
}

function animate() {
  if (!isAnimationAllowed) return; // Check if animation is allowed
  
  isAnimating = true;

  animationFrame = requestAnimationFrame(animate);

  velocityX *= friction;
  velocityY += gravity;

  var newX = ball.offsetLeft + velocityX;
  var newY = ball.offsetTop + velocityY;

  if (newY >= floorLevel - ball.offsetHeight) {
    newY = floorLevel - ball.offsetHeight;
    velocityY *= -0.6; // Bounce effect
  }

  if (newX < 0) {
    newX = 0;
    velocityX *= -0.6; // Bounce effect for the left boundary
  } else if (newX > window.innerWidth - ball.offsetWidth) {
    newX = window.innerWidth - ball.offsetWidth;
    velocityX *= -0.6; // Bounce effect for the right boundary
  }

  ball.style.left = newX + "px";
  ball.style.top = newY + "px";

  if (Math.abs(velocityX) < 0.1 && Math.abs(velocityY) < 0.1 && newY >= floorLevel - ball.offsetHeight) {
    cancelAnimationFrame(animationFrame);
    isAnimating = false;
  }
}