Hugging Face's logo

Spaces:
Hossar
/
savior
Running

App Files Community
Hossar commited on
Commit
d621833
·
verified ·
1 Parent(s): 854193e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +399 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Savior
3
- emoji: 👀
4
  colorFrom: yellow
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: savior
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,399 @@
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>Fruit Catcher Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @keyframes float {
10
+ 0% { transform: translateY(0px); }
11
+ 50% { transform: translateY(-10px); }
12
+ 100% { transform: translateY(0px); }
13
+ }
14
+ .floating {
15
+ animation: float 3s ease-in-out infinite;
16
+ }
17
+ .game-object {
18
+ position: absolute;
19
+ transition: transform 0.1s;
20
+ user-select: none;
21
+ }
22
+ .explosion {
23
+ position: absolute;
24
+ background: radial-gradient(circle, rgba(255,200,0,0.8) 0%, rgba(255,100,0,0.6) 50%, rgba(255,0,0,0) 70%);
25
+ border-radius: 50%;
26
+ transform: scale(0);
27
+ opacity: 1;
28
+ animation: explode 0.5s forwards;
29
+ }
30
+ @keyframes explode {
31
+ to {
32
+ transform: scale(3);
33
+ opacity: 0;
34
+ }
35
+ }
36
+ .shake {
37
+ animation: shake 0.5s;
38
+ }
39
+ @keyframes shake {
40
+ 0%, 100% { transform: translateX(0); }
41
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
42
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gradient-to-b from-blue-400 to-blue-600 min-h-screen overflow-hidden font-sans">
47
+ <div class="container mx-auto px-4 py-8">
48
+ <!-- Game Title -->
49
+ <h1 class="text-5xl font-bold text-center text-white mb-2 floating">🍎 Fruit Catcher 🍌</h1>
50
+ <p class="text-center text-white mb-8">Catch the fruits, avoid the bombs!</p>
51
+
52
+ <!-- Game Info -->
53
+ <div class="flex justify-between items-center mb-4 px-4">
54
+ <div class="bg-white bg-opacity-20 rounded-lg p-3">
55
+ <p class="text-white font-bold">Score: <span id="score" class="text-yellow-300">0</span></p>
56
+ </div>
57
+ <div class="bg-white bg-opacity-20 rounded-lg p-3">
58
+ <p class="text-white font-bold">Lives: <span id="lives" class="text-red-300">❤️❤️❤️</span></p>
59
+ </div>
60
+ <div class="bg-white bg-opacity-20 rounded-lg p-3">
61
+ <p class="text-white font-bold">Level: <span id="level" class="text-green-300">1</span></p>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Game Area -->
66
+ <div id="game-area" class="relative bg-blue-300 bg-opacity-30 rounded-xl border-4 border-blue-400 h-96 w-full overflow-hidden">
67
+ <!-- Player Basket -->
68
+ <div id="basket" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-16 bg-gradient-to-r from-amber-700 to-amber-900 rounded-lg flex justify-center items-center">
69
+ <div class="w-full h-4 bg-amber-800 rounded-b-lg absolute -bottom-4"></div>
70
+ <div class="w-4 h-8 bg-amber-900 rounded-full absolute -bottom-8 left-4"></div>
71
+ <div class="w-4 h-8 bg-amber-900 rounded-full absolute -bottom-8 right-4"></div>
72
+ </div>
73
+
74
+ <!-- Start Screen -->
75
+ <div id="start-screen" class="absolute inset-0 flex flex-col justify-center items-center bg-black bg-opacity-70 text-white">
76
+ <h2 class="text-4xl font-bold mb-6">Fruit Catcher</h2>
77
+ <p class="text-xl mb-8 text-center px-4">Use your mouse or arrow keys to move the basket.<br>Catch fruits for points, avoid bombs!</p>
78
+ <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl transition-all transform hover:scale-105">
79
+ Start Game
80
+ </button>
81
+ <div class="mt-8 flex space-x-4">
82
+ <div class="text-center">
83
+ <div class="text-4xl">🍎</div>
84
+ <div class="text-sm">+10 pts</div>
85
+ </div>
86
+ <div class="text-center">
87
+ <div class="text-4xl">🍌</div>
88
+ <div class="text-sm">+15 pts</div>
89
+ </div>
90
+ <div class="text-center">
91
+ <div class="text-4xl">🍒</div>
92
+ <div class="text-sm">+20 pts</div>
93
+ </div>
94
+ <div class="text-center">
95
+ <div class="text-4xl">💣</div>
96
+ <div class="text-sm">-1 life</div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Game Over Screen -->
102
+ <div id="game-over" class="absolute inset-0 flex flex-col justify-center items-center bg-black bg-opacity-70 text-white hidden">
103
+ <h2 class="text-4xl font-bold mb-4">Game Over!</h2>
104
+ <p class="text-2xl mb-2">Your score: <span id="final-score" class="text-yellow-300">0</span></p>
105
+ <p class="text-xl mb-6">Level reached: <span id="final-level" class="text-green-300">1</span></p>
106
+ <button id="restart-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full text-xl transition-all transform hover:scale-105">
107
+ Play Again
108
+ </button>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Controls -->
113
+ <div class="mt-6 text-center text-white">
114
+ <p>Controls: Mouse or Arrow Keys (← →)</p>
115
+ </div>
116
+ </div>
117
+
118
+ <script>
119
+ document.addEventListener('DOMContentLoaded', () => {
120
+ // Game elements
121
+ const gameArea = document.getElementById('game-area');
122
+ const basket = document.getElementById('basket');
123
+ const scoreDisplay = document.getElementById('score');
124
+ const livesDisplay = document.getElementById('lives');
125
+ const levelDisplay = document.getElementById('level');
126
+ const startScreen = document.getElementById('start-screen');
127
+ const gameOverScreen = document.getElementById('game-over');
128
+ const startBtn = document.getElementById('start-btn');
129
+ const restartBtn = document.getElementById('restart-btn');
130
+ const finalScoreDisplay = document.getElementById('final-score');
131
+ const finalLevelDisplay = document.getElementById('final-level');
132
+
133
+ // Game state
134
+ let score = 0;
135
+ let lives = 3;
136
+ let level = 1;
137
+ let gameRunning = false;
138
+ let basketPosition = gameArea.offsetWidth / 2 - basket.offsetWidth / 2;
139
+ let basketWidth = basket.offsetWidth;
140
+ let gameAreaWidth = gameArea.offsetWidth;
141
+ let gameAreaHeight = gameArea.offsetHeight;
142
+ let fallingObjects = [];
143
+ let objectInterval;
144
+ let speedInterval;
145
+ let objectSpeed = 3;
146
+ let spawnRate = 1500; // ms
147
+
148
+ // Fruits and their values
149
+ const fruits = [
150
+ { emoji: '🍎', value: 10, color: 'bg-red-500' },
151
+ { emoji: '🍌', value: 15, color: 'bg-yellow-400' },
152
+ { emoji: '🍒', value: 20, color: 'bg-red-600' },
153
+ { emoji: '🍊', value: 12, color: 'bg-orange-500' },
154
+ { emoji: '🍓', value: 18, color: 'bg-pink-500' }
155
+ ];
156
+
157
+ // Bombs
158
+ const bombs = [
159
+ { emoji: '💣', penalty: 1, color: 'bg-gray-700' }
160
+ ];
161
+
162
+ // Initialize game
163
+ function initGame() {
164
+ score = 0;
165
+ lives = 3;
166
+ level = 1;
167
+ objectSpeed = 3;
168
+ spawnRate = 1500;
169
+ scoreDisplay.textContent = score;
170
+ livesDisplay.textContent = '❤️❤️❤️';
171
+ levelDisplay.textContent = level;
172
+ basketPosition = gameAreaWidth / 2 - basketWidth / 2;
173
+ basket.style.left = `${basketPosition}px`;
174
+
175
+ // Clear any existing objects
176
+ fallingObjects.forEach(obj => {
177
+ if (obj.element && obj.element.parentNode) {
178
+ obj.element.remove();
179
+ }
180
+ });
181
+ fallingObjects = [];
182
+
183
+ // Clear intervals
184
+ clearInterval(objectInterval);
185
+ clearInterval(speedInterval);
186
+ }
187
+
188
+ // Start game
189
+ function startGame() {
190
+ initGame();
191
+ gameRunning = true;
192
+ startScreen.classList.add('hidden');
193
+ gameOverScreen.classList.add('hidden');
194
+
195
+ // Start spawning objects
196
+ objectInterval = setInterval(createFallingObject, spawnRate);
197
+
198
+ // Gradually increase difficulty
199
+ speedInterval = setInterval(() => {
200
+ level++;
201
+ levelDisplay.textContent = level;
202
+ objectSpeed += 0.5;
203
+ spawnRate = Math.max(500, spawnRate - 100);
204
+
205
+ // Clear and reset interval with new spawn rate
206
+ clearInterval(objectInterval);
207
+ objectInterval = setInterval(createFallingObject, spawnRate);
208
+ }, 15000); // Every 15 seconds
209
+ }
210
+
211
+ // Game over
212
+ function endGame() {
213
+ gameRunning = false;
214
+ clearInterval(objectInterval);
215
+ clearInterval(speedInterval);
216
+ finalScoreDisplay.textContent = score;
217
+ finalLevelDisplay.textContent = level;
218
+ gameOverScreen.classList.remove('hidden');
219
+ }
220
+
221
+ // Create falling objects (fruits or bombs)
222
+ function createFallingObject() {
223
+ if (!gameRunning) return;
224
+
225
+ // 20% chance of bomb, 80% chance of fruit
226
+ const isBomb = Math.random() < 0.2;
227
+ const objectType = isBomb
228
+ ? bombs[Math.floor(Math.random() * bombs.length)]
229
+ : fruits[Math.floor(Math.random() * fruits.length)];
230
+
231
+ const object = document.createElement('div');
232
+ object.className = `game-object text-3xl flex items-center justify-center rounded-full w-12 h-12 ${objectType.color}`;
233
+ object.textContent = objectType.emoji;
234
+
235
+ // Random horizontal position
236
+ const xPos = Math.random() * (gameAreaWidth - 50);
237
+ object.style.left = `${xPos}px`;
238
+ object.style.top = '-50px';
239
+
240
+ gameArea.appendChild(object);
241
+
242
+ const newObject = {
243
+ element: object,
244
+ x: xPos,
245
+ y: -50,
246
+ width: 50,
247
+ height: 50,
248
+ value: objectType.value || 0,
249
+ penalty: objectType.penalty || 0,
250
+ speed: objectSpeed + (Math.random() * 2 - 1) // Slight speed variation
251
+ };
252
+
253
+ fallingObjects.push(newObject);
254
+ }
255
+
256
+ // Update game state
257
+ function updateGame() {
258
+ if (!gameRunning) return;
259
+
260
+ // Update falling objects
261
+ fallingObjects.forEach((obj, index) => {
262
+ obj.y += obj.speed;
263
+ obj.element.style.top = `${obj.y}px`;
264
+
265
+ // Check if object is caught by basket
266
+ if (
267
+ obj.y + obj.height >= gameAreaHeight - 80 &&
268
+ obj.y <= gameAreaHeight - 40 &&
269
+ obj.x + obj.width >= basketPosition &&
270
+ obj.x <= basketPosition + basketWidth
271
+ ) {
272
+ // Object caught
273
+ if (obj.penalty) {
274
+ // It's a bomb!
275
+ lives -= obj.penalty;
276
+ livesDisplay.textContent = '❤️'.repeat(Math.max(0, lives)) + '♡'.repeat(Math.max(0, 3 - lives));
277
+
278
+ // Create explosion effect
279
+ const explosion = document.createElement('div');
280
+ explosion.className = 'explosion';
281
+ explosion.style.left = `${obj.x + obj.width/2 - 15}px`;
282
+ explosion.style.top = `${obj.y + obj.height/2 - 15}px`;
283
+ explosion.style.width = '30px';
284
+ explosion.style.height = '30px';
285
+ gameArea.appendChild(explosion);
286
+
287
+ // Remove explosion after animation
288
+ setTimeout(() => {
289
+ explosion.remove();
290
+ }, 500);
291
+
292
+ // Shake basket
293
+ basket.classList.add('shake');
294
+ setTimeout(() => {
295
+ basket.classList.remove('shake');
296
+ }, 500);
297
+
298
+ // Game over if no lives left
299
+ if (lives <= 0) {
300
+ endGame();
301
+ }
302
+ } else {
303
+ // It's a fruit - add to score
304
+ score += obj.value;
305
+ scoreDisplay.textContent = score;
306
+
307
+ // Create floating score effect
308
+ const scoreEffect = document.createElement('div');
309
+ scoreEffect.className = 'absolute text-yellow-300 font-bold text-xl';
310
+ scoreEffect.textContent = `+${obj.value}`;
311
+ scoreEffect.style.left = `${obj.x + obj.width/2 - 15}px`;
312
+ scoreEffect.style.top = `${obj.y - 20}px`;
313
+ gameArea.appendChild(scoreEffect);
314
+
315
+ // Animate and remove score effect
316
+ setTimeout(() => {
317
+ scoreEffect.style.transition = 'all 0.5s';
318
+ scoreEffect.style.opacity = '0';
319
+ scoreEffect.style.transform = 'translateY(-30px)';
320
+ setTimeout(() => {
321
+ scoreEffect.remove();
322
+ }, 500);
323
+ }, 0);
324
+ }
325
+
326
+ // Remove object
327
+ obj.element.remove();
328
+ fallingObjects.splice(index, 1);
329
+ }
330
+
331
+ // Remove object if it falls past the bottom
332
+ if (obj.y > gameAreaHeight) {
333
+ obj.element.remove();
334
+ fallingObjects.splice(index, 1);
335
+ }
336
+ });
337
+
338
+ // Request next animation frame
339
+ requestAnimationFrame(updateGame);
340
+ }
341
+
342
+ // Handle keyboard controls
343
+ function handleKeyDown(e) {
344
+ if (!gameRunning) return;
345
+
346
+ const moveAmount = 20;
347
+
348
+ if (e.key === 'ArrowLeft' || e.key === 'a') {
349
+ basketPosition = Math.max(0, basketPosition - moveAmount);
350
+ } else if (e.key === 'ArrowRight' || e.key === 'd') {
351
+ basketPosition = Math.min(gameAreaWidth - basketWidth, basketPosition + moveAmount);
352
+ }
353
+
354
+ basket.style.left = `${basketPosition}px`;
355
+ }
356
+
357
+ // Handle mouse/touch controls
358
+ function handleMouseMove(e) {
359
+ if (!gameRunning) return;
360
+
361
+ const rect = gameArea.getBoundingClientRect();
362
+ const mouseX = e.clientX - rect.left;
363
+
364
+ // Keep basket within game area
365
+ basketPosition = Math.max(
366
+ 0,
367
+ Math.min(
368
+ mouseX - basketWidth / 2,
369
+ gameAreaWidth - basketWidth
370
+ )
371
+ );
372
+
373
+ basket.style.left = `${basketPosition}px`;
374
+ }
375
+
376
+ // Event listeners
377
+ startBtn.addEventListener('click', () => {
378
+ startGame();
379
+ updateGame();
380
+ });
381
+
382
+ restartBtn.addEventListener('click', () => {
383
+ startGame();
384
+ updateGame();
385
+ });
386
+
387
+ document.addEventListener('keydown', handleKeyDown);
388
+ gameArea.addEventListener('mousemove', handleMouseMove);
389
+ gameArea.addEventListener('touchmove', (e) => {
390
+ e.preventDefault();
391
+ handleMouseMove(e.touches[0]);
392
+ });
393
+
394
+ // Initial setup
395
+ basket.style.left = `${basketPosition}px`;
396
+ });
397
+ </script>
398
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hossar/savior" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
399
+ </html>
prompts.txt ADDED
File without changes