HTML and CSS Reference
In-Depth Information
document.addEventListener('touchend',trackTouch,false);
document.addEventListener('touchcancel',trackTouch,false);
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
</script>
</head>
<body>
</body>
</html>
All the code before the
onDeviceReady
method is the standard AppMobi boilerplate that sets up some
default styles and loads the AppMobi JavaScript.
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.
questAnimationFrame
shim along with changes to the initialize method and the new
setKeys
method.
Listing 27-7:
Changes to engine.js for DirectCanvas
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0;
x < vendors.length && !window.requestAnimationFrame;
++x) {
