Game Development Reference
In-Depth Information
layer2.style.background = 'url(img/parallaxFront.png) transparent';
document.body.appendChild(layer2);
container.className = "container";
container.style.webkitPerspective= "400";
container.style.webkitPerspectiveOrigin= HALF_WIDTH+"px "+HALF_HEIGHT+"px";
container.style.width = SCREEN_WIDTH;
container.style.height = SCREEN_HEIGHT;
Events and game loop timer
The following shows the events and game loop timer.
function init() {
initMouseListeners();
setInterval(gameLoop, 1000/60);
}
We use
setInterval
to call
gameLoop
60 times a second. Because
setInterval
requires time in
milliseconds, we need to know the number of mils there are per frame. To learn this, we first convert
frames per second (fps) to seconds per frame by inverting, which gives us 1/60. Next, we convert seconds
per frame to mils per frame by multiplying by 1000—which is 1000/60.
Did I just lose you? Don't worry, all you need to know is that to convert fps into mils per frame, simply
divide 1000 by the frame rate.
requestAnimationFrame
At the risk of getting even more complicated, modern browsers have started
implementing
requestAnimationFrame
, which fires on a browser screen redraw. This has
the benefit of syncing smoothly with the refresh cycle on your graphics card, which
avoids screen tearing.
But because you never know how frequently
requestAnimationFrame
will fire, ensuring
that your game runs at the same speed across different computers and browsers is
complicated. However, it's something to look out for in the future. Paul Irish has
implemented a fallback that's worth looking at. For more information about this, see
The other benefit to
requestAnimationFrame
is that it stops firing when your browser tab
is hidden, saving CPU and battery life. Chrome has implemented a throttle on
setInterval
so that it only fires once per second if the page isn't visible.
