1- <!doctype html>
1+ <!DOCTYPE html>
22< html lang ="en ">
33< head >
4- < meta charset ="utf-8 " />
5- < meta name ="viewport " content ="width=device-width,initial-scale=1 " />
6- < title > Orbit Collector</ title >
7- < link rel ="stylesheet " href ="styles.css " />
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no ">
6+ < title > Shadow Collector</ title >
7+ < link rel ="stylesheet " href ="styles.css ">
8+ < script src ="script.js " defer > </ script >
89</ head >
910< body >
10- < div id ="ui ">
11- < div id ="score "> Score: 0</ div >
12- < div id ="level "> Level: 1</ div >
13- < div id ="lives "> Lives: 3</ div >
14- < div id ="target "> Target: < span id ="targetColorName "> —</ span > </ div >
15- < button id ="restart "> Restart</ button >
16- </ div >
17-
18- < canvas id ="game "> </ canvas >
19-
20- < script src ="script.js "> </ script >
11+ < header >
12+ < h1 > Shadow Collector</ h1 >
13+ </ header >
14+
15+ < main >
16+ < div id ="gameContainer ">
17+ < canvas id ="gameCanvas "> </ canvas >
18+
19+ < div id ="gameUI ">
20+ < div id ="leftUI ">
21+ < div class ="uiElement "> Score: < span id ="score "> 0</ span > </ div >
22+ < div class ="uiElement "> Orbs: < span id ="orbCount "> 0</ span > </ div >
23+ < div class ="uiElement "> High Score: < span id ="highScoreValue "> 0</ span > </ div >
24+ </ div >
25+ < div id ="rightUI ">
26+ </ div >
27+ </ div >
28+
29+ < div id ="lightIndicator ">
30+ < div id ="lightBar " style ="width: 100% "> </ div >
31+ </ div >
32+
33+ < div id ="powerUp " title ="Light Burst "> 💡</ div >
34+ < div id ="pauseButton " title ="Pause "> ⏸️</ div >
35+ < div id ="statsButton " title ="Statistics "> 📊</ div >
36+
37+ < div id ="mobileControls ">
38+ < div class ="joystick-container ">
39+ < div class ="joystick "> </ div >
40+ </ div >
41+ </ div >
42+
43+ < div id ="stealthButton "> 👤</ div >
44+
45+ < div id ="startScreen ">
46+ < h2 class ="screenTitle "> Shadow Collector</ h2 >
47+ < p class ="screenText "> Navigate through the darkness and collect glowing orbs. Each orb you collect dims the room, spawning more watchers that hunt you in the shadows.</ p >
48+ < div class ="highScore "> High Score: < span id ="menuHighScore "> 0</ span > </ div >
49+ < button id ="startButton "> Start Game</ button >
50+ < button id ="statsMenuButton "> View Statistics</ button >
51+ </ div >
52+
53+ < div id ="pauseScreen " class ="hidden ">
54+ < h2 class ="screenTitle "> Game Paused</ h2 >
55+ < p class ="screenText "> Take a break. The shadows will wait for you.</ p >
56+ < button id ="resumeButton "> Resume</ button >
57+ < button id ="restartButton "> Restart</ button >
58+ < button id ="statsPauseButton "> View Statistics</ button >
59+ </ div >
60+
61+ < div id ="statsScreen " class ="hidden ">
62+ < h2 class ="screenTitle "> Game Statistics</ h2 >
63+
64+ < div class ="statsContainer ">
65+ < div class ="statsSection ">
66+ < div class ="statsSectionTitle "> Overall Performance</ div >
67+ < div class ="statsGrid ">
68+ < div class ="statsCard ">
69+ < div class ="statsCardTitle "> Games Played</ div >
70+ < div class ="statsCardValue " id ="statGamesPlayed "> 0</ div >
71+ </ div >
72+ < div class ="statsCard ">
73+ < div class ="statsCardTitle "> Total Orbs Collected</ div >
74+ < div class ="statsCardValue " id ="statTotalOrbs "> 0</ div >
75+ </ div >
76+ < div class ="statsCard ">
77+ < div class ="statsCardTitle "> High Score</ div >
78+ < div class ="statsCardValue " id ="statHighScore "> 0</ div >
79+ </ div >
80+ < div class ="statsCard ">
81+ < div class ="statsCardTitle "> Average Score</ div >
82+ < div class ="statsCardValue " id ="statAvgScore "> 0</ div >
83+ </ div >
84+ </ div >
85+ </ div >
86+
87+ < div class ="statsSection ">
88+ < div class ="statsSectionTitle "> Survival Stats</ div >
89+ < div class ="statsGrid ">
90+ < div class ="statsCard ">
91+ < div class ="statsCardTitle "> Total Time Survived</ div >
92+ < div class ="statsCardValue " id ="statTotalTime "> 0s</ div >
93+ </ div >
94+ < div class ="statsCard ">
95+ < div class ="statsCardTitle "> Longest Survival</ div >
96+ < div class ="statsCardValue " id ="statLongestTime "> 0s</ div >
97+ </ div >
98+ < div class ="statsCard ">
99+ < div class ="statsCardTitle "> Enemies Avoided</ div >
100+ < div class ="statsCardValue " id ="statEnemiesAvoided "> 0</ div >
101+ </ div >
102+ < div class ="statsCard ">
103+ < div class ="statsCardTitle "> Times Caught</ div >
104+ < div class ="statsCardValue " id ="statTimesCaught "> 0</ div >
105+ </ div >
106+ </ div >
107+ </ div >
108+
109+ < div class ="statsSection ">
110+ < div class ="statsSectionTitle "> Power-Up Usage</ div >
111+ < div class ="statsGrid ">
112+ < div class ="statsCard ">
113+ < div class ="statsCardTitle "> Light Bursts Used</ div >
114+ < div class ="statsCardValue " id ="statPowerUpsUsed "> 0</ div >
115+ </ div >
116+ < div class ="statsCard ">
117+ < div class ="statsCardTitle "> Stealth Time</ div >
118+ < div class ="statsCardValue " id ="statStealthTime "> 0s</ div >
119+ </ div >
120+ </ div >
121+ </ div >
122+ </ div >
123+
124+ < button id ="closeStatsButton "> Back</ button >
125+ < button id ="resetStatsButton "> Reset Statistics</ button >
126+ </ div >
127+
128+ < div id ="gameOverScreen " class ="hidden ">
129+ < h2 class ="screenTitle "> Game Over</ h2 >
130+ < p class ="screenText "> You were caught by the watchers. You collected < span id ="finalScore "> 0</ span > orbs.</ p >
131+ < div class ="highScore " id ="newHighScore " class ="hidden "> New High Score!</ div >
132+ < button id ="playAgainButton "> Play Again</ button >
133+ < button id ="statsGameOverButton "> View Statistics</ button >
134+ </ div >
135+ </ div >
136+ </ main >
21137</ body >
22- </ html >
138+ </ html >
0 commit comments