How do I make my Javascript animation smoother?

Question

https://code.sololearn.com/W75dhFrByRxb/?ref=app
The animation shows a box bouncing off walls and changing colors. It does what I want it to, but the movement is clunky and isn’t the smooth gliding motion I want for the box. I’ve tried increasing the speed of setInterval so it moves faster, but this only looks less glitchy and causes the code to ‘break’ after a certain point. How can I make the movement of the box smoother?

Answer 1

Further to Shashi's explanation,
because your
xPos = xPos + xSpeed;
yPos = yPos + ySpeed;
So these "Speed" are actually displacements

Change the name of these two variables into displacements

Then add another variable called framerate, and put replace the time of your setInterval with 1000/framerate

This would be a meaningful speed

Answer 2

https://code.sololearn.com/WhDYWdTabLWP/?ref=app

Answer 3

Consider decreasing xSpeed and ySpeed. Make them 1 or 2. The smaller the position, the smoother the animation. And decrease the time in setInterval to 20 or 10. It should produce a smoother animation.