HTML and CSS Reference
In-Depth Information
Game.keys['right'] = r;
Game.keys['fire'] = fire;
};
var lastTime = new Date().getTime();
var maxTime = 1/30;
// Game Loop
this.loop = function() {
var curTime = new Date().getTime();
requestAnimationFrame(Game.loop);
var dt = (curTime - lastTime)/1000;
if(dt > maxTime) { dt = maxTime; }
for(var i=0,len = boards.length;i<len;i++) {
if(boards[i]) {
boards[i].step(dt);
boards[i].draw(Game.ctx);
}
}
Game.ctx.present();
lastTime = curTime;
};
The
requestAnimationFrame
shim is the same as what you saw in Chapter 9, “Bootstrapping the
Quintus Engine: Part I.”
In the
Game.initialize
method, in lieu of creating a Canvas element, with DirectCanvas you need to
grab the context from the
AppMobi.canvas
element. The context can also be resized directly—something
you normally can do only to the
canvas
element. The remainder of the initialize method just defaults to mobile
and hardcodes a width and height into the game.
The
setKeys
method replaces the input handlers that were there before and explicitly sets the keys that are
active based on what
index.html
is sending over.
The last important change is that the loop explicitly calls
Game.ctx.present()
to render to the screen.
Testing Your App on a Device
AppMobi makes it easy to test your game live on a device. It provides the AppLab app for both iOS and Android
that you can download from the respective app stores for each. After you install this on your device, start it up.
AppLab enables you to run your apps (click the small My Apps button in the top right) that have been synced
to the cloud.
To sync an app to the cloud, click the Test Anywhere button in the top bar of the XDK. After the app syncs,
you should run the active version on your device. (Be careful because as of this writing the Android version of
DirectCanvas is still in beta and has a number of visual defects. These will hopefully be fixed by the time this
book is in print.)
