-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathecho.html
More file actions
217 lines (217 loc) · 14.4 KB
/
echo.html
File metadata and controls
217 lines (217 loc) · 14.4 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="dark">
<title>ECHO</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#0a0a1a">
<meta name="description" content="AI-powered puzzle game where shadows learn your movement patterns. 15 levels, endless mode, level editor. Zero dependencies.">
<meta property="og:title" content="ECHO - Outsmart Your Shadow">
<meta property="og:description" content="AI-powered puzzle game where shadows learn your movement patterns">
<meta property="og:image" content="assets/og-image.svg">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="assets/icon.svg" type="image/svg+xml">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="assets/icon.svg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="game-canvas" role="img" aria-label="ECHO game canvas"></canvas>
<div id="ui-overlay">
<div id="top-bar" style="display:none">
<div class="left">
<div class="hearts" id="hearts"></div>
<span id="score-display">0</span>
<span id="orb-counter" style="color:#ffd700"></span>
</div>
<div class="center">
<span id="level-display"></span>
</div>
<div class="right">
<span id="streak-display"></span>
<span id="ability-display" style="display:none"></span>
<span id="mute-btn" style="cursor:pointer;font-size:18px;pointer-events:all"></span>
</div>
</div>
</div>
<div id="screen-overlay" role="region" aria-live="polite">
<div class="screen active" id="title-screen">
<div class="title-text">ECHO</div>
<div class="subtitle">outsmart yourself</div>
<button class="btn btn-secondary" id="howtoplay-btn" style="font-size:12px;padding:10px 30px">HOW TO PLAY ▼</button>
<div class="rules-box collapsed">
<h3>How To Play</h3>
<div class="rule-item"><span class="rule-key">W A S D</span><span>or Arrow keys to move on the grid</span></div>
<div class="rule-item"><span class="rule-key">SPACE</span><span>Use your unlocked ability (Dash / Phase)</span></div>
<div class="rule-item"><span class="rule-key">CLICK</span><span>Place a decoy to distract shadows</span></div>
<div class="rule-divider"></div>
<div class="rule-item"><span>Collect all <span class="rule-highlight">golden orbs</span> to complete each level. Power-ups are optional.</span></div>
<div class="rule-item"><span>Avoid <span class="rule-warn">shadows</span> — they replay YOUR past movements and learn your patterns</span></div>
<div class="rule-item"><span>The AI adapts to you: repeat a strategy and it will be used against you</span></div>
<div class="rule-divider"></div>
<div class="rule-item"><span style="color:#ffd700;font-weight:600">Scoring</span></div>
<div class="rule-item"><span style="color:#99aabb">Each orb = <span style="color:#ffd700">25 pts</span></span></div>
<div class="rule-item"><span style="color:#99aabb"><span style="color:#ffd700">3★</span> = all orbs + full lives + under 60s = <span style="color:#ffd700">+1000 pts</span></span></div>
<div class="rule-item"><span style="color:#99aabb"><span style="color:#ffd700">2★</span> = all orbs + 50%+ lives = <span style="color:#ffd700">+500 pts</span></span></div>
<div class="rule-item"><span style="color:#99aabb"><span style="color:#ffd700">1★</span> = complete level = <span style="color:#ffd700">+100 pts</span></span></div>
<div class="rule-divider"></div>
<div class="rule-item"><span>Grab power-ups on the grid (optional):</span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(0,221,255,0.15);border-color:rgba(0,221,255,0.3);color:#00ddff">❂︎ Freeze</span><span>Freezes all shadows for 3s <span style="color:#778">(Lv3+)</span></span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(0,255,136,0.15);border-color:rgba(0,255,136,0.3);color:#00ff88">▶︎ Speed</span><span>2x movement speed for 4s <span style="color:#778">(Lv5+)</span></span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(136,68,255,0.15);border-color:rgba(136,68,255,0.3);color:#8844ff">◇︎ Phase</span><span>Walk through walls for 2s <span style="color:#778">(Lv10+)</span></span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(255,170,0,0.15);border-color:rgba(255,170,0,0.3);color:#ffaa00">▲︎ Decoy</span><span>Distracts shadows for 5s <span style="color:#778">(Lv9+)</span></span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(255,68,136,0.15);border-color:rgba(255,68,136,0.3);color:#ff4488">◀︎◀︎ Rewind</span><span>Reverses shadow movement 5s <span style="color:#778">(Lv14+)</span></span></div>
<div class="rule-divider"></div>
<div class="rule-item"><span>Watch for hazards:</span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(255,0,100,0.12);border-color:rgba(255,0,100,0.25);color:#ff0064">✖︎ Trap</span><span>Spawns an extra shadow! <span style="color:#778">(Lv7+)</span></span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(100,0,200,0.12);border-color:rgba(100,0,200,0.25);color:#9932ff">○︎ Gravity</span><span>Pulls you toward its center <span style="color:#778">(Lv12+)</span></span></div>
<div class="rule-item"><span class="rule-key" style="background:rgba(255,0,255,0.12);border-color:rgba(255,0,255,0.25);color:#ff44ff">●︎ Portal</span><span>Teleports to paired portal <span style="color:#778">(Lv13+)</span></span></div>
<div class="rule-divider"></div>
<div class="rule-item"><span>15 levels across 3 worlds — shadows get smarter each level</span></div>
<div class="rule-item"><span>Difficulty adjusts to keep you in the zone — challenging but never impossible</span></div>
</div>
<button class="btn btn-primary" id="play-btn">PLAY</button>
<button class="btn btn-secondary" id="endless-btn">ENDLESS MODE</button>
<button class="btn btn-secondary" id="speedrun-btn">SPEED RUN</button>
<div id="endless-highscore" style="font-size:12px;color:#ff8844;margin-top:2px;display:none"></div>
<input type="file" id="import-file" accept=".json" style="display:none">
</div>
<div class="screen" id="world-map-screen">
<h2 style="letter-spacing:6px;margin-bottom:8px">SELECT LEVEL</h2>
<p style="font-size:12px;color:#668;margin-bottom:16px">Complete levels to unlock the next</p>
<p id="total-score-display" style="font-size:14px;color:#ffd700;margin-bottom:12px"></p>
<div class="world-map" id="world-map"></div>
<button class="btn btn-secondary" id="back-btn">BACK</button>
</div>
<div class="screen" id="level-preview-screen">
<h2 id="preview-level-name" style="color:#00aaff;letter-spacing:4px;margin-bottom:4px"></h2>
<p id="preview-level-desc" style="font-size:13px;color:#889;margin-bottom:16px"></p>
<div class="preview-info" id="preview-info"></div>
<div style="display:flex;gap:12px;margin-top:20px">
<button class="btn btn-primary" id="preview-start-btn">START</button>
<button class="btn btn-secondary" id="preview-replay-btn" style="display:none">WATCH REPLAY</button>
<button class="btn btn-secondary" id="preview-back-btn">BACK</button>
</div>
</div>
<div class="screen" id="level-complete-screen">
<h2 style="color:#00ff88;letter-spacing:6px;margin-bottom:4px">LEVEL COMPLETE</h2>
<div class="stars" id="stars-display"></div>
<div class="stats-grid" id="stats-grid"></div>
<div class="analysis-box" id="analysis-box"><h3>SHADOW ANALYSIS</h3><div id="analysis-content"></div></div>
<div style="display:flex;gap:12px;margin-top:8px">
<button class="btn btn-primary" id="next-level-btn">NEXT LEVEL</button>
<button class="btn btn-secondary" id="worldmap-btn-1">WORLD MAP</button>
</div>
<div style="display:flex;gap:8px;margin-top:12px;justify-content:center">
<button class="btn btn-secondary" id="share-score-btn" style="border-color:#ffd700;color:#ffd700;font-size:12px;padding:8px 20px">SHARE SCORE</button>
</div>
<div id="ghost-share-container" style="margin-top:8px">
<button class="ghost-share-btn" id="share-ghost-btn">SHARE GHOST</button>
<div id="ghost-share-url" class="ghost-url-display" style="display:none"></div>
</div>
</div>
<div class="screen" id="game-over-screen">
<h2 style="color:#ff4466;letter-spacing:6px;margin-bottom:4px">ECHOED</h2>
<p class="game-over-msg" id="game-over-msg"></p>
<p class="hook-msg" id="hook-msg"></p>
<div style="display:flex;gap:12px">
<button class="btn btn-primary" id="retry-btn">TRY AGAIN</button>
<button class="btn btn-secondary" id="worldmap-btn-2">WORLD MAP</button>
</div>
</div>
<div class="screen" id="pause-screen">
<h2 style="color:#00aaff;letter-spacing:6px;margin-bottom:12px">PAUSED</h2>
<p style="font-size:13px;color:#668;margin-bottom:24px">Game paused. Shadows are frozen.</p>
<button class="btn btn-primary" id="resume-btn">RESUME</button>
<button class="btn btn-secondary" id="pause-worldmap-btn">QUIT TO MAP</button>
</div>
<div class="screen" id="achievements-screen">
<h2 style="letter-spacing:6px;margin-bottom:16px">ACHIEVEMENTS</h2>
<div id="achievements-list" style="width:100%;max-height:60vh;overflow-y:auto;pointer-events:all"></div>
<button class="btn btn-secondary" id="ach-back-btn">BACK</button>
</div>
<div class="screen" id="skins-screen">
<h2 style="color:#00aaff;letter-spacing:6px;margin-bottom:4px">SKINS</h2>
<p style="font-size:12px;color:#668;margin-bottom:16px">Choose your look. Complete challenges to unlock more.</p>
<div class="skin-grid" id="skin-grid"></div>
<button class="btn btn-secondary" id="skins-back-btn" style="margin-top:20px">BACK</button>
</div>
<div class="screen" id="editor-screen">
<h2 style="color:#00aaff;letter-spacing:6px;margin-bottom:8px">LEVEL EDITOR</h2>
<p style="font-size:12px;color:#668;margin-bottom:12px">Click to paint with selected tool. Use toolbar to switch tools.</p>
<div id="editor-toolbar" style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;justify-content:center">
<button class="editor-tool active" data-tool="wall">Wall</button>
<button class="editor-tool" data-tool="orb">Orb</button>
<button class="editor-tool" data-tool="shadow_start">Shadow</button>
<button class="editor-tool" data-tool="player_start">Player</button>
<button class="editor-tool" data-tool="freeze">Freeze</button>
<button class="editor-tool" data-tool="dash">Dash</button>
<button class="editor-tool" data-tool="phase">Phase</button>
<button class="editor-tool" data-tool="decoy">Decoy</button>
<button class="editor-tool" data-tool="rewind">Rewind</button>
<button class="editor-tool" data-tool="portal">Portal</button>
<button class="editor-tool" data-tool="echo_trap">Trap</button>
<button class="editor-tool" data-tool="gravity">Gravity</button>
<button class="editor-tool" data-tool="eraser">Eraser</button>
</div>
<div id="editor-settings" style="display:flex;gap:16px;margin-bottom:12px;font-size:12px;color:#889;align-items:center;flex-wrap:wrap;justify-content:center">
<label>Width: <input type="range" id="editor-width" min="10" max="32" value="20" style="width:80px;vertical-align:middle"><span id="editor-width-val">20</span></label>
<label>Height: <input type="range" id="editor-height" min="8" max="24" value="15" style="width:80px;vertical-align:middle"><span id="editor-height-val">15</span></label>
<label>Name: <input type="text" id="editor-name" value="My Level" maxlength="20" style="width:100px;background:#111;border:1px solid #333;color:#fff;padding:2px 6px;border-radius:4px"></label>
</div>
<canvas id="editor-canvas" style="border:1px solid rgba(255,255,255,0.1);border-radius:4px;cursor:crosshair;pointer-events:all;max-width:100%;max-height:50vh"></canvas>
<div style="display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center">
<button class="btn btn-primary" id="editor-play-btn">PLAY LEVEL</button>
<button class="btn btn-secondary" id="editor-save-btn">SAVE</button>
<button class="btn btn-secondary" id="editor-load-btn">LOAD</button>
<button class="btn btn-secondary" id="editor-share-btn">SHARE</button>
<button class="btn btn-secondary" id="editor-clear-btn">CLEAR</button>
<button class="btn btn-secondary" id="editor-back-btn">BACK</button>
</div>
<div id="editor-saved-list" style="margin-top:12px;width:100%;max-height:120px;overflow-y:auto;pointer-events:all"></div>
</div>
<div class="screen" id="leaderboard-screen">
<h2 style="color:#ffd700;letter-spacing:6px;margin-bottom:16px">LEADERBOARD</h2>
<div id="leaderboard-tabs" style="display:flex;gap:8px;margin-bottom:12px;justify-content:center"></div>
<div id="leaderboard-content" style="width:100%;max-height:55vh;overflow-y:auto;pointer-events:all"></div>
<button class="btn btn-secondary" id="lb-back-btn">BACK</button>
</div>
</div>
<div id="tutorial-overlay" role="dialog" aria-label="Tutorial"></div>
<div id="speedrun-timer"></div>
<div id="replay-badge">REPLAY</div>
<div id="mute-fixed"></div>
<div id="settings-backdrop"></div>
<div id="settings-panel">
<h3>SETTINGS</h3>
<div class="settings-grid">
<button class="btn btn-secondary" id="achievements-btn">ACHIEVEMENTS</button>
<button class="btn btn-secondary" id="editor-btn">LEVEL EDITOR</button>
<button class="btn btn-secondary" id="leaderboard-btn">LEADERBOARD</button>
<button class="btn btn-secondary" id="skins-btn">SKINS</button>
<button class="btn btn-secondary" id="colorblind-btn">COLORBLIND: OFF</button>
<button class="btn btn-secondary" id="highcontrast-btn">HIGH CONTRAST: OFF</button>
<button class="btn btn-secondary" id="haptic-btn">HAPTICS: ON</button>
<button class="btn btn-secondary" id="export-btn">EXPORT SAVE</button>
<button class="btn btn-secondary" id="import-btn">IMPORT SAVE</button>
<button class="btn btn-secondary" id="reset-btn" style="border-color:#553333;color:#884444">RESET</button>
</div>
</div>
<button id="settings-gear">⚙</button>
<div id="touch-controls">
<div id="dpad">
<button class="dpad-btn" id="dpad-up" data-dir="up">▲</button>
<button class="dpad-btn" id="dpad-left" data-dir="left">◄</button>
<button class="dpad-btn" id="dpad-right" data-dir="right">►</button>
<button class="dpad-btn" id="dpad-down" data-dir="down">▼</button>
</div>
<button class="touch-ability-btn" id="touch-ability">ABILITY</button>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>