This is a very common problem. To solve it right you need to make sure the game time and the game framerate are not dependent (you don't want all you game elements to move slowly if the framerate is low and faster if it's high). From my point of view setInterval will not be efficient. Here is what I suggest:
You need to have three methods in your game: main (that we will try to run 60 times per seconds), update (that will update elements positions) and draw (that will display all the elements) and a variable to store the current time. Initialize your currentTime variable to now then start your main method.
Here is what your main method should do:
- compute the time elapsed since the last execution of the main method (timeElapsed = now - currentTime)
- reset the current time variable (currentTime = now)
- run the update method with timeElapsed has argument
- run the draw method
- compute the time elapsed since we started the main method (timeElapsed = now - currentTime)
- compute the time wee need to wait before running again the main method for an expected framerate of 60 frame per seconds (timeout = 1000 / 60 - timeElapsed)
- prevent this time from being less than zero (timeout = timeout < 0 ? 0 : timeout)
- schedule the next execution of the main method using setTimeout: setTimeout(main, tiemout)
Then in your update method multiply every translations operations by the elapsedTime variable passed has argument (x = x + speed * elapsedTime). This way, if the ball has a speed of 1.6 it will always move 96 pixel per seconds even if the framerate too is slow or too high.
This way you make sure the game run at (almost) exactly 60 fps all the time and that you elements moves at the right speed even if the framerate changes for some reason.
I hope this help ! Good luck !