HTML and CSS Reference
In-Depth Information
var dt = now - Q.lastGameLoopFrame;
if(dt > 100) { dt = 100; }
callback.apply(Q,[dt / 1000]);
Q.lastGameLoopFrame = now;
};
requestAnimationFrame(Q.gameLoopCallbackWrapper);
};
Q.pauseGame = function() {
if(Q.loop) {
cancelAnimationFrame(Q.loop);
}
Q.loop = null;
};
Q.unpauseGame = function() {
if(!Q.loop) {
Q.lastGameLoopFrame = new Date().getTime();
Q.loop = requestAnimationFrame(Q.gameLoopCallbackWrapper);
}
}
The
Q.gameLoop
method takes in a callback that expects a
dt
parameter representing the difference in
seconds from the last frame (this is a small fraction close to 1/60th of a second) and wraps that callback
in a method that calculates this difference from the current time that is passed into the
requestAnima-
tionFrame
callback. This wrapped callback is saved in
Q. gameLoopCallbackWrapper
and used in
Q.pauseGame
and
Q.unpauseGame
to start and stop the game timer.
Testing the Game Loop
Quintus now has enough functionality to at least drop it on the page and try out the game loop and the
pause
and
unpause
code.
Open a new HTML file called
gameloop_test.html
and put in the HTML in
Listing 9-6
into the file. Make
sure the dependencies of jquery and underscore.js are in the directory as well as your
quintus.js
code to
this point.
Listing 9-6:
Game loop test gameloop_test.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src='jquery.min.js'></script>
<script src='underscore.js'></script>
<script src='quintus.js'></script>
