Hugging Face's logo

Spaces:
fantos
/
miro-game
Running

App Files Community
fantos commited on
Commit
d627eb0
·
verified ·
1 Parent(s): e2feec0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +307 -19
index.html CHANGED
@@ -1,19 +1,307 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Guaranteed Path Maze</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ min-height: 100vh;
14
+ background: #1a1a2e;
15
+ font-family: Arial, sans-serif;
16
+ color: #fff;
17
+ }
18
+
19
+ #game-container {
20
+ position: relative;
21
+ padding: 20px;
22
+ background: rgba(0, 0, 0, 0.8);
23
+ border-radius: 15px;
24
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
25
+ }
26
+
27
+ #maze-container {
28
+ position: relative;
29
+ border: 3px solid #444;
30
+ }
31
+
32
+ #maze {
33
+ display: grid;
34
+ gap: 1px;
35
+ }
36
+
37
+ .cell {
38
+ width: 40px;
39
+ height: 40px;
40
+ box-sizing: border-box;
41
+ border: 1px solid #333;
42
+ }
43
+
44
+ .wall {
45
+ background: #2c3e50;
46
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
47
+ }
48
+
49
+ .path {
50
+ background: #34495e;
51
+ }
52
+
53
+ #player {
54
+ width: 30px;
55
+ height: 30px;
56
+ background: #2ecc71;
57
+ border-radius: 50%;
58
+ position: absolute;
59
+ transition: all 0.2s ease;
60
+ box-shadow: 0 0 15px #2ecc71;
61
+ z-index: 2;
62
+ }
63
+
64
+ .goal {
65
+ background: #e74c3c !important;
66
+ animation: pulse 1.5s infinite;
67
+ }
68
+
69
+ #hud {
70
+ display: flex;
71
+ justify-content: space-between;
72
+ padding: 10px;
73
+ background: rgba(0, 0, 0, 0.5);
74
+ border-radius: 10px;
75
+ margin-bottom: 20px;
76
+ }
77
+
78
+ #timer {
79
+ font-size: 24px;
80
+ color: #e74c3c;
81
+ }
82
+
83
+ #level-display {
84
+ font-size: 24px;
85
+ color: #3498db;
86
+ }
87
+
88
+ .modal {
89
+ position: absolute;
90
+ top: 50%;
91
+ left: 50%;
92
+ transform: translate(-50%, -50%);
93
+ padding: 20px;
94
+ border-radius: 10px;
95
+ text-align: center;
96
+ display: none;
97
+ z-index: 100;
98
+ }
99
+
100
+ #success-modal {
101
+ background: rgba(46, 204, 113, 0.9);
102
+ }
103
+
104
+ #fail-modal {
105
+ background: rgba(231, 76, 60, 0.9);
106
+ }
107
+
108
+ @keyframes pulse {
109
+ 0% { transform: scale(0.95); }
110
+ 50% { transform: scale(1.05); }
111
+ 100% { transform: scale(0.95); }
112
+ }
113
+
114
+ button {
115
+ padding: 10px 20px;
116
+ margin: 5px;
117
+ border: none;
118
+ border-radius: 5px;
119
+ background: #3498db;
120
+ color: white;
121
+ cursor: pointer;
122
+ transition: background 0.3s;
123
+ }
124
+
125
+ button:hover {
126
+ background: #2980b9;
127
+ }
128
+ </style>
129
+ </head>
130
+ <body>
131
+ <div id="game-container">
132
+ <div id="hud">
133
+ <div id="level-display">Level: 1</div>
134
+ <div id="timer">Time: 30</div>
135
+ </div>
136
+ <div id="maze-container">
137
+ <div id="maze"></div>
138
+ <div id="player"></div>
139
+ </div>
140
+ <div id="success-modal" class="modal">
141
+ <h2>Level Complete!</h2>
142
+ <button onclick="nextLevel()">Next Level</button>
143
+ </div>
144
+ <div id="fail-modal" class="modal">
145
+ <h2>Time's Up!</h2>
146
+ <button onclick="restartLevel()">Try Again</button>
147
+ </div>
148
+ <div style="text-align: center; margin-top: 10px;">
149
+ <button onclick="restartLevel()">Restart Level</button>
150
+ </div>
151
+ </div>
152
+
153
+ <script>
154
+ const mazes = [
155
+ // Level 1
156
+ [
157
+ [1,1,1,1,1,1,1,1,1,1],
158
+ [1,0,0,0,0,0,1,0,0,1],
159
+ [1,1,1,1,1,0,1,0,1,1],
160
+ [1,0,0,0,0,0,0,0,0,1],
161
+ [1,0,1,1,1,1,1,1,0,1],
162
+ [1,0,0,0,0,0,0,0,0,1],
163
+ [1,1,1,1,1,1,1,1,0,1],
164
+ [1,0,0,0,0,0,0,0,0,1],
165
+ [1,0,1,1,1,1,1,1,2,1],
166
+ [1,1,1,1,1,1,1,1,1,1]
167
+ ],
168
+ // Level 2
169
+ [
170
+ [1,1,1,1,1,1,1,1,1,1,1,1],
171
+ [1,0,0,0,0,0,0,0,0,0,0,1],
172
+ [1,0,1,1,1,1,1,1,1,1,0,1],
173
+ [1,0,1,0,0,0,0,0,0,0,0,1],
174
+ [1,0,1,0,1,1,1,1,1,1,1,1],
175
+ [1,0,1,0,0,0,0,0,0,0,0,1],
176
+ [1,0,1,1,1,1,1,1,1,1,0,1],
177
+ [1,0,0,0,0,0,0,0,0,1,0,1],
178
+ [1,1,1,1,1,1,1,1,0,1,0,1],
179
+ [1,0,0,0,0,0,0,0,0,1,0,1],
180
+ [1,0,1,1,1,1,1,1,1,1,2,1],
181
+ [1,1,1,1,1,1,1,1,1,1,1,1]
182
+ ],
183
+ // Level 3
184
+ [
185
+ [1,1,1,1,1,1,1,1,1,1,1,1,1,1],
186
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,1],
187
+ [1,1,1,1,1,1,1,1,1,1,1,1,0,1],
188
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,1],
189
+ [1,0,1,1,1,1,1,1,1,1,1,1,1,1],
190
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,1],
191
+ [1,1,1,1,1,1,1,1,1,1,1,1,0,1],
192
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,1],
193
+ [1,0,1,1,1,1,1,1,1,1,1,1,1,1],
194
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,1],
195
+ [1,1,1,1,1,1,1,1,1,1,1,1,0,1],
196
+ [1,0,0,0,0,0,0,0,0,0,0,0,0,1],
197
+ [1,0,1,1,1,1,1,1,1,1,1,1,2,1],
198
+ [1,1,1,1,1,1,1,1,1,1,1,1,1,1]
199
+ ]
200
+ ];
201
+
202
+ let currentLevel = 0;
203
+ let timeLeft = 30;
204
+ let timerInterval;
205
+ let playerPos = { x: 1, y: 1 };
206
+ const player = document.getElementById('player');
207
+
208
+ function createMaze() {
209
+ const maze = document.getElementById('maze');
210
+ const currentMaze = mazes[currentLevel];
211
+ maze.style.gridTemplateColumns = `repeat(${currentMaze[0].length}, 40px)`;
212
+
213
+ maze.innerHTML = '';
214
+ for(let y = 0; y < currentMaze.length; y++) {
215
+ for(let x = 0; x < currentMaze[y].length; x++) {
216
+ const cell = document.createElement('div');
217
+ cell.className = 'cell';
218
+ if(currentMaze[y][x] === 1) cell.classList.add('wall');
219
+ if(currentMaze[y][x] === 0) cell.classList.add('path');
220
+ if(currentMaze[y][x] === 2) cell.classList.add('goal');
221
+ maze.appendChild(cell);
222
+ }
223
+ }
224
+ }
225
+
226
+ function updatePlayerPosition() {
227
+ player.style.left = `${playerPos.x * 40 + 5}px`;
228
+ player.style.top = `${playerPos.y * 40 + 5}px`;
229
+ }
230
+
231
+ function startTimer() {
232
+ clearInterval(timerInterval);
233
+ timeLeft = 30;
234
+ updateTimer();
235
+ timerInterval = setInterval(() => {
236
+ timeLeft--;
237
+ updateTimer();
238
+ if(timeLeft <= 0) {
239
+ clearInterval(timerInterval);
240
+ document.getElementById('fail-modal').style.display = 'block';
241
+ }
242
+ }, 1000);
243
+ }
244
+
245
+ function updateTimer() {
246
+ document.getElementById('timer').textContent = `Time: ${timeLeft}`;
247
+ }
248
+
249
+ function handleMovement(e) {
250
+ if(timeLeft <= 0) return;
251
+
252
+ const oldPos = {...playerPos};
253
+ const currentMaze = mazes[currentLevel];
254
+
255
+ switch(e.key) {
256
+ case 'ArrowUp': playerPos.y--; break;
257
+ case 'ArrowDown': playerPos.y++; break;
258
+ case 'ArrowLeft': playerPos.x--; break;
259
+ case 'ArrowRight': playerPos.x++; break;
260
+ }
261
+
262
+ if(currentMaze[playerPos.y][playerPos.x] === 1) {
263
+ playerPos = oldPos;
264
+ }
265
+
266
+ updatePlayerPosition();
267
+ checkWin();
268
+ }
269
+
270
+ function checkWin() {
271
+ const currentMaze = mazes[currentLevel];
272
+ if(currentMaze[playerPos.y][playerPos.x] === 2) {
273
+ clearInterval(timerInterval);
274
+ document.getElementById('success-modal').style.display = 'block';
275
+ }
276
+ }
277
+
278
+ function nextLevel() {
279
+ currentLevel++;
280
+ if(currentLevel >= mazes.length) {
281
+ alert('Congratulations! You completed all levels!');
282
+ currentLevel = 0;
283
+ }
284
+ document.getElementById('success-modal').style.display = 'none';
285
+ document.getElementById('level-display').textContent = `Level: ${currentLevel + 1}`;
286
+ resetLevel();
287
+ }
288
+
289
+ function restartLevel() {
290
+ document.getElementById('fail-modal').style.display = 'none';
291
+ resetLevel();
292
+ }
293
+
294
+ function resetLevel() {
295
+ playerPos = { x: 1, y: 1 };
296
+ createMaze();
297
+ updatePlayerPosition();
298
+ startTimer();
299
+ }
300
+
301
+ document.addEventListener('keydown', handleMovement);
302
+ createMaze();
303
+ updatePlayerPosition();
304
+ startTimer();
305
+ </script>
306
+ </body>
307
+ </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>