HTML and CSS Reference
In-Depth Information
To add this to
Alien Invasion
, modify the
Game.loop
method in
engine.js
to read as shown in
Listing
Listing 27-4:
A modified Game.loop
var lastTime = new Date().getTime();
var maxTime = 1/30;
// Game Loop
this.loop = function() {
var curTime = new Date().getTime();
webkitRequestAnimationFrame(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);
}
}
lastTime = curTime;
};
Doing so ensures that your app refreshes at the maximum rate the device can support to give you the
smoothest animation.
Testing CocoonJS on Android
CocoonJS has an application in the Google Play marketplace called the CocoonJS Launcher.
If you open this app, you are presented with two options: The first is to view some of the pre-created demos,
and the second is to launch your own app. To launch your app, you need to first get a registration code. You can
get that code by clicking the Register button, filling out the form, and confirming your e-mail.
Next, you need to package the files for the game into a .zip file. In creating the .zip file, make sure you don't
zip the directory but instead just zip up all the files because CocoonJS needs to find an
index.html
file in
the top level of your zip.
Now place that .zip file somewhere where you can access it from a URL on your device. If you run a web
server on your development machine, that works just fine as long as the Android device is on the same Wi-Fi
network; otherwise, just upload the file to a web host.
From the Android Launcher app, enter the URL for the .zip file in the Zip URL field and click Launch Cur-
rent. After a few moments to download the file and boot it up, you should have
Alien Invasion
running at an
elevated frame rate on your phone. In addition, Ludei supports Android all the way back to 2.2, so phones that
might not run your HTML5 game can still be targeted.
In the case of the Galaxy Nexus, the frame rate on the game rose from the mid-teens to approximately 200
FPS using CocoonJS, so there are significant performance benefits.
To restart your app or load a new version, you need to explicitly restart the app by removing it from the run-
ning app list and then run it again.
