Why does my animation teleport to the bottom left at the end

I am trying to make an animation of a circle bouncing around in a square. Currently when ever the animation reaches the last section of the script it warps to the bottom left. If any one knows why it is warping or a simpler way to write this animation let me know. Thank you for your time.

function myMove() {
  var elem = document.getElementById("color");
  var pos = 286;
  var num = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (num >= 183 && num < 512) {
      pos--;
      num++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    } else if (pos < 469 && num < 183) {
      pos++;
      num++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';

    } else if (pos == 140 || num >= 512 && num < 918) {
      pos++;
      num++;
      elem.style.top = pos / 2 + 'px';
      elem.style.left = pos + 'px';


    } else if (pos <= 140 || num >= 918 && num < 929) {
      pos--;
      num++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';


    }


  }
}
.square {
  height: 500px;
  width: 500px;
  background-color: white;
  border-style: solid;
  border-width: 2px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle {
  height: 100px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<p>
  <button onclick="myMove()">Click Me</button>
</p>


<div class="square"></div>
<div class="circle" id="color"></div>

Answer

This is how I would do it:

I commented my code with the steps I took.

I moved the circle into the square and changed the position to be relative to let css handle the rest.

var timer;
function myMove() {
  var circle = document.getElementById("circle");
  var square = document.getElementById("square");
  var posx = 0, posy = 0;
  var squarew = square.clientWidth, squareh = square.clientHeight;
  
  // moved timer to outer scope to clear it evertime the button is clicked
  if (timer) clearInterval(timer);
  timer = setInterval(frame, 10);
  
  // made the circle configurable to be able to change the size of it
  var circleRadius = 50;
  circle.style.height = circleRadius * 2 + 'px';
  circle.style.width = circleRadius * 2 + 'px';
  
  // this is how fast the ball is going to move (in pixels)
  var distance = 10;
  
  // fire off in a random direction
  var randomDirection = Math.random(0, 100);
  // get the velocity in the x direction and y direction
  var vy = distance * Math.sin(randomDirection);
  var vx = distance * Math.cos(randomDirection);

  function frame() {
    // if i hit any edge of the box
    if (posy + vy <= 0) {
      // reverse the direction
      vy *= -1;
    }
    
    if (posy + vy >= squareh - circleRadius * 2) {
      // reverse the direction
      vy *= -1;
    }
    
    if (posx + vy <= 0) {
      // reverse the direction
      vx *= -1;
    }
    
    if (posx + vy >= squarew - circleRadius * 2) {
      // reverse the direction
      vx *= -1;
    }
    
    // keep track of the position
    posx += vx;
    posy += vy;
    
    // apply it to the circle
    circle.style.top = posy + 'px';
    circle.style.left = posx + 'px';
  }
}
#square {
  height: 500px;
  width: 500px;
  background-color: white;
  border-style: solid;
  border-width: 2px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#circle {
  background-color: #555;
  border-radius: 50%;
  position: relative;
  top: 0;
  left: 0;
}
<p>
  <button onclick="myMove()">Click Me</button>
</p>


<div id="square">
  <div id="circle"></div>
</div>