-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmain.html
104 lines (92 loc) · 6 KB
/
main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Fast-Paced Multiplayer Implementation</title>
</head>
<body>
<div style="border: 5px solid blue; padding: 15px;">
<p>
<b>Player 1 view</b> - move with LEFT and RIGHT arrow keys<br>
<span id="player1_recv1"><b>Send</b> ·</span>
Lag min = <input id="player1_send_lag_min" size="5" value="100" type="text">ms ·
Lag max = <input id="player1_send_lag_max" size="5" value="200" type="text">ms ·
Dropped = <input id="player1_send_dropped" size="5" value="2" type="text">% ·
Correlation = <input id="player1_send_correlation" size="5" value="75" type="text">% ·
Duplicate = <input id="player1_send_duplicate" size="5" value="2" type="text">% ·
<input id="player1_symmetric" checked="checked" type="checkbox">Symmetric<br>
<span id="player1_recv2">
<b>Recv</b> ·
Lag min = <input id="player1_recv_lag_min" size="5" value="100" type="text">ms ·
Lag max = <input id="player1_recv_lag_max" size="5" value="200" type="text">ms ·
Dropped = <input id="player1_recv_dropped" size="5" value="2" type="text">% ·
Correlation = <input id="player1_recv_correlation" size="5" value="75" type="text">% ·
Duplicate = <input id="player1_recv_duplicate" size="5" value="2" type="text">%<br>
</span>
<input id="player1_prediction" checked="checked" type="checkbox">Prediction ·
<input id="player1_reconciliation" checked="checked" type="checkbox">Reconciliation ·
<input id="player1_interpolation" type="checkbox">Interpolation ·
<input id="player1_smoothing" checked="checked" type="checkbox">Smoothing
</p>
<canvas id="player1_canvas" width="920" height="75"></canvas>
<div id="player1_status" style="font-family:courier;">
Non-acknowledged inputs: 0
</div>
</div>
<div style="height: 1em;"></div>
<div style="border: 3px solid grey; padding: 15px;">
<p>
<b>Server view</b> - desync with E and R keys<br>
Update <input id="server_fps" size="5" value="10" type="text"> times per second
</p>
<canvas id="server_canvas" width="920" height="75"></canvas>
<div id="server_status" style="font-family:courier;">
Last acknowledged input: Player 0: #4368 Player 1: #852
</div>
</div>
<div style="height: 1em;"></div>
<div style="border: 5px solid red; padding: 15px;">
<p>
<b>Player 2 view</b> - move with LEFT and RIGHT arrow keys<br>
<span id="player2_recv1"><b>Send</b> ·</span>
Lag min = <input id="player2_send_lag_min" size="5" value="100" type="text">ms ·
Lag max = <input id="player2_send_lag_max" size="5" value="200" type="text">ms ·
Dropped = <input id="player2_send_dropped" size="5" value="2" type="text">% ·
Correlation = <input id="player2_send_correlation" size="5" value="75" type="text">% ·
Duplicate = <input id="player2_send_duplicate" size="5" value="2" type="text">% ·
<input id="player2_symmetric" checked="checked" type="checkbox">Symmetric<br>
<span id="player2_recv2">
<b>Recv</b> ·
Lag min = <input id="player2_recv_lag_min" size="5" value="100" type="text">ms ·
Lag max = <input id="player2_recv_lag_max" size="5" value="200" type="text">ms ·
Dropped = <input id="player2_recv_dropped" size="5" value="2" type="text">% ·
Correlation = <input id="player2_recv_correlation" size="5" value="75" type="text">% ·
Duplicate = <input id="player2_recv_duplicate" size="5" value="2" type="text">%<br>
</span>
<input id="player2_prediction" checked="checked" type="checkbox">Prediction ·
<input id="player2_reconciliation" checked="checked" type="checkbox">Reconciliation ·
<input id="player2_interpolation" type="checkbox">Interpolation ·
<input id="player2_smoothing" checked="checked" type="checkbox">Smoothing
</p>
<canvas id="player2_canvas" width="920" height="75"></canvas>
<div id="player2_status" style="font-family:courier;">
Non-acknowledged inputs: 0</div>
</div>
<script src="lib/require.js" data-main="main"></script>
<br>
<button id="tests_btn">Run netlib tests</button>
<br>
<br>
Derived from Gabriel Gambetta's <a href="http://www.gabrielgambetta.com/client-side-prediction-live-demo.html">live demo</a> and <a href="http://www.gabrielgambetta.com/client-server-game-architecture.html">article series on fast-paced multiplayer</a>.
<br>
<br>
<a href="https://github.com/Ohmnivore/FastPacedMultiplayerImplementation">
<svg viewBox="0 0 1024 1024" width="64px" height="64px" xmlns="http://www.w3.org/2000/svg">
<path d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.688 418.125 350.156 485.812 25.594 4.688 34.938-11.125 34.938-24.625 0-12.188-0.469-52.562-0.719-95.312C242 908.812 211.906 817.5 211.906 817.5c-23.312-59.125-56.844-74.875-56.844-74.875-46.531-31.75 3.53-31.125 3.53-31.125 51.406 3.562 78.47 52.75 78.47 52.75 45.688 78.25 119.875 55.625 149 42.5 4.654-33 17.904-55.625 32.5-68.375C304.906 725.438 185.344 681.5 185.344 485.312c0-55.938 19.969-101.562 52.656-137.406-5.219-13-22.844-65.094 5.062-135.562 0 0 42.938-13.75 140.812 52.5 40.812-11.406 84.594-17.031 128.125-17.219 43.5 0.188 87.312 5.875 128.188 17.281 97.688-66.312 140.688-52.5 140.688-52.5 28 70.531 10.375 122.562 5.125 135.5 32.812 35.844 52.625 81.469 52.625 137.406 0 196.688-119.75 240-233.812 252.688 18.438 15.875 34.75 47 34.75 94.75 0 68.438-0.688 123.625-0.688 140.5 0 13.625 9.312 29.562 35.25 24.562C877.438 930 1024 738.125 1024 512 1024 229.25 794.75 0 512 0z" />
</svg>
</a>
</body>
</html>