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
<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"/>
<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="/"></script>
* { padding:0px; margin:0px; }
canvas { border:1px solid black; }
Search WWH ::

Custom Search