HTML and CSS Reference
In-Depth Information
window[vendors[x]+'CancelAnimationFrame'] ||
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime +
timeToCall); },
lastTime = currTime + timeToCall;
return id;
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
As you can see, if the nonvendor-prefixed version of requestAnimationFrame isn't available, the code
loops through each of the potential vendor-specific prefixes and uses that prefix as the nonprefixed version.
If that fails, the code approximates requestAnimationFrame and cancelAnimationFrame using
setTimeout and cancelTimeout . These polyfilled methods, because they don't have native browser sup-
port, do suffer from the drawbacks previously mentioned, but they are the best you can use.
Adding the Optimized Game Loop to Quintus
Having created a consistent polyfill to an optimized timer method, up next is creating the game loop itself.
The traditional game loop has two main pieces that execute each frame: update and render. The update piece
is responsible for stepping the game logic through a small chunk of time, handling any user input, motion, and
collisions between objects and updating each game object to a consistent state.
Next, the game needs to render itself onto the screen. How the rendering step is done depends on how your
game is built. For Canvas-based games, you usually want to clear the entire Canvas and then redraw all the ne-
cessary sprites on to the page, for CSS and SVG games. Provided you updated the properties of the objects on
the page correctly, your job is actually done—the browser takes care of moving and updating the objects.
Armed with this knowledge, you can add a game loop method to Quintus and pause and unpause meth-
ods. Open up quintus.js and add the code from Listing 9-5 before the final return statement.
Listing 9-5: Adding a game loop
Q.gameLoop = function(callback) {
Q.lastGameLoopFrame = new Date().getTime();
Q.gameLoopCallbackWrapper = function(now) {
Q.loop = requestAnimationFrame(Q.gameLoopCallbackWrapper);
Search WWH ::

Custom Search