HTML and CSS Reference
In-Depth Information
Creating the App
To create a new app, click the big Plus button to the left of the project selector drop-down. At the next screen,
choose Client-Side as the project type and click Next. Give the project a name like
alieninvasion
and click
Next. Click Next again to skip the API injection screen because you won't need any of those services for this
app. Finally, click Finish to complete the app and load it in the XDK.
Next, click the open project folder icon at the top of the page to open the location where AppMobi wants you
to put your game's files. Copy the final
Alien Invasion
code from Chapter 3 into the new folder for your project
and then click the Reload App button near the top left of the XDK. (It looks like a recycle symbol.) The App
pops up a warning because you removed the code that loads the XDK, but if you click OK, the game should
still load.
Modifying
Alien Invasion
to Use DirectCanvas
For
Alien Invasion
to use DirectCanvas, you need to separate the user input from the main game.
To start this process, replace the
index.html
file for the game with the code in
Listing 27-5
,
which is a
modified version of the boilerplate
index.html
AppMobi provides.
Listing 27-5:
The DirectCanvas index.html
<!DOCTYPE html>
<html>
<head>
<title>Alien Invasion</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none;
-webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
/* Set up the page with a default background image */
body {
background-color:#fff;
color:#000;
font-family:Arial;
font-size:48pt;
margin:0px;padding:0px;
background-image:url('images/background.jpg');
}
</style>
<script type="text/javascript" charset="utf-8"
↵
src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8"
↵
src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript">
