Using HTML5 to Catch a Snake - Learn HTML5 by Creating Fun Games - page 171

function executes, we take the current time, subtract the last time that a frame was
rendered, and check if their difference is greater than, or equal to the ideal fps we
have chosen. If it is less than our desired fps, we don't animate anything, but still
register requestAnimationFrame to call us back in the future.
This we do until enough time has elapsed so that our frames per second rate can be
achieved (in other words, so that the fastest frame rate we can possibly run would be
our fps). If the system is running slower than that, there's nothing we can do about it.
What this technique does is control the maximum speed.
Once requestAnimationFrame has called our animation function, and enough
time has passed since the last time a frame was rendered, we update all the data
we need to, for the animation, render the animation to the screen (or let the browser
do it, if it can), and update the variable that keeps track of when a frame was last
updated.
// 1. Create some element
var el = document.createElement("h1");
el.textContent = "I Love HTML5!";
el.style.position = "absolute";
// 2. Attach it to the document
document.body.appendChild(el);
// 3. Set some variables to control the
animation
var loop = 0;
var lastFrame = 0;
var fps = 1000 / 60;
// 4. Perform the animation one frame at a time
function slideRight(time) {
// 5. Control the animation to a set frames
per second
if (time - lastFrame >= fps) {
var left = parseInt(el.style.left);