HTML and CSS Reference
In-Depth Information
<body>
<div ng-controller="WelcomeCtrl">
<p>Welcome <%= playerId %></p>
</div>
<canvas id="c" width="800" height="600"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
Note that the
bundle.js
file can be minified and obfuscated for added performance and security. The Browserify
options are located in the
build.js
file. Once the client-side code is compiled, start the server with the following
command:
node server/app.js
You should see some logging that ends with this code:
Express server listening on port 3000
The server is now running. To create a new game, enter the following URL in any modern web browser:
This command creates a new game room with the ID 1234 and adds player “Player1” to the room. After the initial
handshake and state transfer, the game will start, and you can direct your light cycle with the W, S, A, and D keys.
To test the networking capability, open a second browser tab, and visit the following URL:
Separate the tabs on your screen so that you can see both at the same time. Note that each tab controls a different
player but that the changes from one player are propagated to the other player in rea -time. The remainder of the
chapter is dedicated to explaining how this demo application works.
The Game State
As described previously, it is important to keep the game state as small as possible. The game state for
FrightCycle
contains the following elements:
•
Tick
: An integer that is incremented at every game engine update.
•
GameStartTick
: This contains the tick when the game begins (i.e., when the light cycles begin
moving); if less than the current tick, the game is active.
•
Players
: An associative array that holds objects for each light cycle (where it is, the trails it has
left behind, who is controlling it,and so on).
•
ConnectedClients
: A list of player IDs that were connected to the game server during this state.
