HTML and CSS Reference
All the code before the onDeviceReady method is the standard AppMobi boilerplate that sets up some
The application sets up a proper-sized viewport, hides the splash screen, and loads the index.js file into
DirectCanvas. Because DirectCanvas is a completely different execution environment than the index.html ,
no variables or methods leak across, so you need to explicitly execute code to run in the other context to shuttle
information back and forth.
The touch method from the main game has been moved into index.html from engine.js . This is
because all the input needs to be gathered in the index.html file because the DirectCanvas context can't re-
ceive any user input.
At the end of the touch method, you can see the call used to transfer data to the Canvas context:
AppMobi.canvas.execute('Game.setKeys(' + keys["left"] + ","
+ keys["right"] + ","
+ keys["fire"] + ")");
The setKeys method is new and needs to be added to engine.js .
Next, create the index.js file referenced in the Listing 27-5 . This file just has two lines, shown in Listing
Listing 27-6: The index.js file
AppMobi.context.include( 'engine.js' );
AppMobi.context.include( 'game.js' );
All that's left is to modify the engine.js to use the AppMobi DirectCanvas and pull input values from
the setKeys method rather than from bound events. You also want to modify the loop method to again use
requestAnimationFrame . Finally, after everything has been drawn, you need to explicitly call con-
text.present() to draw it on the screen.
Modify the top of engine.js as shown in the highlighted code in Listing 27-7 , adding in the re-
questAnimationFrame shim along with changes to the initialize method and the new setKeys method.
Listing 27-7: Changes to engine.js for DirectCanvas
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0;
x < vendors.length && !window.requestAnimationFrame;