Game Development Reference
In-Depth Information
// 6. Perform the animation while some
condition is true
if (left + el.offsetWidth <
document.body.offsetWidth) {
el.style.left = (left + loop) + "px";
loop += 5;
// 7. Perform the time control variable
lastFrame = time;
} else {
// 8. If the animation is done, return
from this function
el.style.left =
document.body.offsetWidth - el.offsetWidth;
return true;
}
}
// 9. If the animation is not done yet, do
it again
requestAnimationFrame(slideRight);
}
// 10. Register some event to begin the
animation
el.addEventListener("click", function(){
el.style.left = 0;
loop = 0;
slideRight(0);
});
This simple code snippet creates a
Document Object Model
(
DOM
) element, sets
some text to it, and registers an onclick handler to it. When the click handler is called,
we reset some styling properties of the element (namely, placing the element on
the far left side of the screen), and get the animation routine started. The animation
routine moves the element to the right a little bit every frame, until the element has
