HTML and CSS Reference
In-Depth Information
•
Express is a
node.js
web application framework. It deals with the server-side routing and
HTML generation.
•
AngularJS is a client-side web application framework. It handles client-side routing and HTML
generation.
•
Clone deep copies objects.
•
Underscore allows object merging, among many other useful functions.
•
Fabric.js
provides a scene-graph library on top of HTML5 Canvas.
NTPClient lets the clients and the server agree on a common time.
•
Next, let's cover the files at a high level. First, the server files:
•
server/app.js
contains the main server loop and event handlers for client events.
server/GameManager.js
handles spawning/releasing games and registering players to games.
Now, the client files:
•
•
public/js/main.js
initializes the network engine that is the entry point for
FrightCycle
.
•
common/ai.js
offers some simple logic for artificial intelligence (AI) players. Note that the AI
players do not use the network engine and are queried for commands at every tick.
•
common/game.js
is the main loop for the client code. It drives the game, network, input, and
rendering engines.
•
common/geometry.js
holds several functions specific to the
FrightCycle
game logic.
•
common/globals.js
contains many important constants and global parameters.
•
common/input.js
provides code for converting player key presses to in-game commands.
•
common/network.js
is the interface between client and server.
common/renderer.js
has the rendering engine.
Before diving into the code, let's run the game. First, you need the code. You can download a snapshot of the
code from the Source Code/Download area of the Apress web site (
www.apress.com
)
, or open a shell, and enter
the following command for the most recent copy:
•
Next, you have to compile the client-side code into a single bundle with Browserify. To do this, enter the
JSRealtimeNetworking directory, and run the following command:
node build.js
This creates a file called
bundle.js
in the
public/js
folder. The
bundle.js
file contains the entire client-side source
code for the project and is referenced by the
playgame
HTML fragment, which is in
server/views/playgame.ejs
:
<!DOCTYPE html>
<html xmlns:ng="
http://angularjs.org
">
<head>
<script src="js/bundle.js"></script>
</head>
