Boucing Ball Using Javascript Request Animation Frame

requestAnimationFrame - The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument.
Coordinates:
Example 1 Example 2
 <style>
 #container{
     border: 1px solid gray;
     background-color: rgb(236, 225, 225);
     height: 100px;
     width: 100%;
}
 #animated_circle{
     height: 35px;
     width: 35px;
     margin:10px;
     background-color: rgb(103, 74, 184);
     border-radius: 50%;
}
 #coordinate_values{
     border: 1px solid gray;
     background-color: rgb(236, 225, 225);
     padding: 10px;
     width: 50px;
}
       
    </style>
  </head>
  <body>
    
      <h1>Boucing Ball Using Javascript Request Animation Frame</h1>

      <p>requestAnimationFrame -
      The window.requestAnimationFrame() method tells the browser that you wish to 
      perform an animation and requests that the browser calls a specified function 
      to update an animation before the next repaint. The method takes a callback as 
      an argument.</p>

	Coordinates:<br/>
	<p id="coordinate_values"></p>
	<div id="container" >
		<p id="animated_circle"></p>
	</div>

	<br>
	  <button id="btnStop">Stop ball</button>
	  <button id="btnStart">Start ball</button>

<br><br>      
<a href = "bouncing_ball_1.html">Example 1</a>
<a href = "bouncing_ball_2.html">Example 2</a>

    <script>
        let coordinate_values = document.getElementById('coordinate_values');  
        let animated_circle = document.getElementById('animated_circle');
        let xpos = 0; // new vertical position
        let ypos = 0; // new horizontal position
        let multiplierX = 1  // multiplier controls speed
        let multiplierY = 1  // multiplier controls speed
        let animationRequest = null;

        const myContainer = document.querySelector('#container');
        const screen_width = myContainer.offsetWidth - 50;
        
        var btnStop = document.getElementById("btnStop");
        btnStop.addEventListener("click", ballStop);

        var btnStart = document.getElementById("btnStart");
        btnStart.addEventListener("click", ballStart);

        function ballStop() {
            window.cancelAnimationFrame(animationRequest);
        }

        function ballStart() {
            animationRequest = window.requestAnimationFrame(ballMove);
        }

        function ballMove() {

            // if on screen - left right
            if (xpos < screen_width && xpos > 1) { // position within range - no change

            }
            // ball too far right: then move left (-1)
            else if (xpos >= screen_width) { // position < width            
                multiplierX = -1 * Math.random(.5);
            }
            // too far left: then move right (+1)
            else if (xpos < 1) { // position < width            
                multiplierX = 1 * Math.random(.5);
            }

            xpos = xpos + (10 * multiplierX); // horizonatal position

            // put x, y values to 
            document.getElementById("coordinate_values").innerHTML = "x=" + parseInt(xpos); 

            // translateX() function is used to move elements in a two-dimensional space 
            // along the x-axis (horizontally).</p>

            // The translate() CSS function repositions an element in the horizontal 
            // and/or vertical directions.  

            animated_circle.style.transform = `translateX(${xpos}px)`;

            // initial call   
            animationRequest = window.requestAnimationFrame(ballMove);
        }

        // recursive call
        animationRequest = window.requestAnimationFrame(ballMove);
    </script>
  </body>