HTML and CSS Reference
In-Depth Information
When the server receives a
delay
event, which is used to time the round-trip time for a packet, it passes it
to the partner of the socket, incrementing the number of steps. When a socket receives a
delay
event with 3
hops, it knows that that packet has made a full round-trip, so an estimation of the time from one client to the
other is one half the total delay time.
The primary data events,
move
and
ball
, simply pass data from one socket to the partner. Both are emitted
as
volatile
, which means that the data is time dependent and in the case of a client doing long-polling, they may
be skipped if the client is between requests. This is done as the data is passed along often enough; it's better to
drop packets than to have the ball “fast-forward” when a player receives a bunch of packets in a row.
Finally, when a socket disconnects, it emits an event to its partner and removes itself from the game list. This
means the next player to join will get matched if the player is still hanging around.
Building the Pong Front End
The front end to two-player pong consists of the basic HTML file in the
public/
directory that loads all the
necessary dependencies, a
js/
directory with the dependencies and the Quintus engine, and a
pong.js
file
for the game.
The basic HTML file is shown in
Listing 21-8
;
it doesn't hold many surprises other than the addition of a
black border to mark the Canvas on the desktop.
Listing 21-8:
pong index.html
<!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"/>
<title>Pong</title>
<script src='js/jquery.min.js'></script>
<script src='js/underscore.js'></script>
<script src='js/quintus.js'></script>
<script src='js/quintus_input.js'></script>
<script src='js/quintus_sprites.js'></script>
<script src='js/quintus_scenes.js'></script>
<script src='pong.js'></script>
<script src="/socket.io/socket.io.js"></script>
<style>
* { padding:0px; margin:0px; }
canvas { border:1px solid black; }
</style>
</head>
<body>
</body>
</html>
