HTML and CSS Reference
In-Depth Information
app.use(express.errorHandler());
});
// Start the server on port 3000
app.listen(3000, function(){
console.log("Express server listening on port %d in %s mode",
app.address().port, app.settings.env);
});
This application loads a few dependencies at the start, sets up the server to parse incoming POST messages
using
express.bodyParser
, and sets up the public directory as the location to serve static assets using
express.static
. Next it sets up a couple of error handlers depending on whether the server is run in Devel-
opment or Production mode. (The default is Development.) Finally, the app server is started on port 3000.
To try this, copy all the code and image, js, and data directories from the last chapter into a new subdirectory
called
public
underneath the
app.js
file. Rename the file from
platform.html
to
index.html
.
You then need to run
npm
to install the necessary modules. From the command prompt in the same directory
as your
package.json
and
app.js
file, run:
npm install
This creates the necessary
node_modules
directory and installs the dependencies.
You should run the application by running the following:
node app.js
This starts the server on port 3000 and allows you to play the platformer game from the last chapter by vis-
iting
http://localhost:3000/
in a browser. If you determine your IP address, you can play the game
from a mobile device on the same Wifi network as your computer as well.
Creating the Editor
The editor consists of a layer of editing tools that sits on top of the existing platformer code. By making use of
as much of the existing platformer code as possible, the editor needs to add only the ability to move the view
around and changes tiles.
Modifying the Platform Game
The changes needed to get the editor code into the existing
platform.js
file are minimal. Open up the
in-
dex.html
file in the
public/
directory and add the soon-to-be-created
quintus_editor.js
file, as
shown in
Listing 19-3
.
Listing 19-3:
Modified index.html file
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
