-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
115 lines (102 loc) · 4.21 KB
/
index.html
File metadata and controls
115 lines (102 loc) · 4.21 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
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
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html class="bg-0">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Complete the Square</title>
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="shortcut icon" href="assets/pinkTriangleLeftBottom.png" />
</head>
<body>
<div id="das-arr-controls">
<label>DAS: <input id="das-input" type="number" min="1" max="60" value="13"></label>
<label>ARR: <input id="arr-input" type="number" min="1" max="30" value="2"></label>
<span id="control-mode-toggle">
<label><input type="radio" name="control-mode" value="wasd" checked> WASD + K</label>
<label><input type="radio" name="control-mode" value="arrows"> ARROWKEYS + SPACEBAR</label>
</span>
<button id="music-toggle" type="button">MUSIC: ON</button>
<label id="fps" class="text" style="font-weight: 100">FPS: </label>
</div>
<div id="game-title-container">
<h2 class="text" style="text-align: center; font-weight: 900; margin: 0; padding: 0;">Complete the Square</h2>
<p id="hud" class="text" style="text-align: center; font-weight: 100; margin: 0; padding: 0;">
<span id="score-label">LEVEL:</span>
<span id="score-value">0</span>
<span id="score-value-max">/ 100</span>
<br>
<span id="time-label">TIME:</span>
<span id="time-value">00:00:00</span>
<br>
<span id="hit-points">LIVES:</span>
<span id="hit-points-value">3</span>
</p>
</div>
<p id="game-over-text" class="text" style="text-align: center; font-weight: 100; margin: 0; padding: 0;">
<span id="game-over-text-title" class="game-over-text-title">GAME OVER!</span>
<br>
<span id="game-over-level-box">
<span class="game-over-text-subtitle">Level </span>
<span id="game-over-level" class="game-over-text-subtitle">0</span>
</span>
<br>
<span id="game-over-time-box">
<span class="game-over-text-subtitle">Time </span>
<span id="game-over-time" class="game-over-text-subtitle">00:00:00</span>
</span>
<br>
<span id="game-over-grade-box">
<span class="game-over-text-subtitle">Grade </span>
<span id="game-over-grade" class="game-over-text-subtitle">A+</span>
</span>
<br>
<span id="game-over-enter-box">
<span class="game-over-text-subtitle"></span>
</span>
</p>
<div id="leaderboard-container" class="text" data-phase="IDLE" aria-hidden="true">
<div id="username-prompt-box" class="lb-panel">
<div class="lb-prompt-row">
<span class="game-over-text-subtitle">Name </span>
<input id="username-input" type="text" maxlength="12" autocomplete="off" spellcheck="false" />
</div>
<div id="username-hint">Press <span class="keyboard-keys">Enter</span> to submit (blank = anonymous)</div>
</div>
<div id="leaderboard-status" class="lb-panel">Submitting...</div>
<div id="leaderboard-board" class="lb-panel">
<div id="leaderboard-header">
<span id="leaderboard-view-label">AROUND YOU</span>
<span id="leaderboard-rank-label"></span>
<span class="leaderboard-toggle-hint">
<span class="keyboard-keys">←</span>/<span class="keyboard-keys">→</span> toggle view
</span>
</div>
<table id="leaderboard-table">
<thead>
<tr><th>#</th><th>NAME</th><th>LVL</th><th>TIME</th><th>GRADE</th></tr>
</thead>
<tbody id="leaderboard-tbody"></tbody>
</table>
<div id="leaderboard-footer">
Press <span class="keyboard-keys">Enter</span> to Restart
</div>
</div>
<div id="leaderboard-error" class="lb-panel">
<div id="leaderboard-error-msg">Could not reach leaderboard.</div>
<div class="lb-error-hint">Press <span class="keyboard-keys">Enter</span> to retry · <span class="keyboard-keys">S</span> to skip</div>
</div>
</div>
<p id="tutorial" class="text">
<span id="tutorial-code" class="keyboard-keys"></span>
<span id="tutorial-text"></span>
</p>
<canvas id="bkgd-layer-canvas"></canvas>
<canvas id="level-layer-canvas"></canvas>
<canvas id="item-layer-canvas"></canvas>
<canvas id="player-layer-canvas"></canvas>
<canvas id="hud-layer-canvas"></canvas>
<canvas id="prerender-sprites-canvas" style="display: none;"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>
<script type="module" src="src/main.js"></script>
</html>