Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
47 lines (47 loc) · 2.73 KB
/
Copy pathindex.html
File metadata and controls
47 lines (47 loc) · 2.73 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Basketball</title>
<link rel="icon" href="data:,">
<style>
html, body { margin: 0; height: 100%; background: #0e1f33; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; font-family: system-ui, Arial, sans-serif; }
#wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#ping { position: absolute; top: 6px; left: 8px; color: rgba(0,0,0,.75); font-size: 16px; font-weight: 600; text-shadow: 0 1px 2px rgba(200,0,200,.6); display: none; z-index: 5; }
#hud { position: absolute; top: 8px; right: 8px; color: rgba(0,0,0,.75); font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(200,0,200,.6); display: none; z-index: 5; }
#dbg { position: absolute; top: 30px; left: 8px; color: #cfeeff; background: rgba(0,0,0,.55); font: 11px/1.4 ui-monospace, Consolas, monospace; white-space: pre; padding: 5px 7px; border-radius: 5px; display: none; z-index: 6; pointer-events: none; max-width: 96%; }
#stage { position: relative; }
canvas { display: block; touch-action: none; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(0,0,0,.5); color: #fff; text-align: center; }
.overlay.hidden { display: none; }
.overlay h1 { margin: 0 0 8px; font-size: 40px; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.overlay p { margin: 0; font-size: 16px; max-width: 80%; }
button { font: inherit; font-size: 22px; font-weight: 700; color: #fff; background: #DE8F6E; border: 4px solid #000; border-radius: 14px; padding: 10px 28px; min-width: 220px; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.5); }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.5); }
button.blue { background: #3F7DAC; }
</style>
</head>
<body>
<div id="wrap"><div id="stage">
<canvas id="c"></canvas>
<span id="ping"></span>
<span id="hud"></span>
<div id="dbg"></div>
<div id="menu" class="overlay">
<h1>BASKETBALL</h1>
<p>Touch the ball and drag it, then let go to shoot it into the hoop on the other side. The ball can only be dragged inside your own half. First to 5 wins.</p>
<button id="b2o" class="blue">2 Players - Online</button>
<p id="netStatus"></p>
</div>
<div id="over" class="overlay hidden">
<h1 id="overTitle"></h1>
<button id="again">Play again</button>
<button id="toMenu" class="blue">Menu</button>
</div>
</div></div>
<script src="sim.js?v=2"></script>
<script src="lib/snapshot-interpolation.js?v=1"></script>
<script src="game.js?v=9"></script>
</body>
</html>