HTML and CSS Reference
In-Depth Information
<div id='timer'>0</div>
<div id='fps'>0</div>
<button id='pause'>Pause</button>
<button id='unpause'>Unpause</button>
var TimerTest = Quintus();
var totalFrames = 0,
totalTime = 0;
TimerTest.gameLoop(function(dt) {
totalTime += dt;
totalFrames += 1;
$("#timer").text(Math.round(totalTime * 1000) + " MS");
$("#fps").text(Math.round(totalFrames / totalTime) + " FPS");
Loading this page should execute the game loop function and enable you to pause and unpause the game
using the two buttons.
All the game loop in this exercise does is keep track of the total time and the total number of frames that have
run in two global variables and then update two <divs> using jQuery to display the time the loop has already
run in milliseconds and the frames per second that the animation runs.
It uses the jQuery.fn.on method to bind the Q.pauseGame and Q.unpauseGame methods to button
clicks. One nice side effect of the way the Quintus code is built is that nowhere in quintus.js have you
referred to the this object. The Quintus object is always referred to by the local variable Q , which is bound in
a closure. This means that one of the trickiest parts of JavaScript, knowing what object this refers to at any
given time won't affect the main Quintus code. As such, you can pass Quintus methods such as Q.pauseGame
and Q.unpauseGame into callbacks without worrying about binding them to their object.
This type of binding won't be possible to do when sprites are introduced because in that case you'll want
to use the prototype property to save memory and creation time as discussed in Chapter 2, but since very few
instances of the Quintus engine will ever be created (generally only one per page) this method of object creation
makes life easier.
Search WWH ::

Custom Search