HTML and CSS Reference
In-Depth Information
// 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
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0,
minimum-scale=1.0, maximum-scale=1.0"/>
Search WWH ::

Custom Search