HTML and CSS Reference
In-Depth Information
</head>
<body>
<div id='timer'>0</div>
<div id='fps'>0</div>
<button id='pause'>Pause</button>
<button id='unpause'>Unpause</button>
<script>
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");
});
$("#pause").on('click',TimerTest.pauseGame);
$("#unpause").on('click',TimerTest.unpauseGame);
</script>
</body>
</html>
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.
