Hugging Face's logo

Spaces:
Dhdb
/
ball-demo
Running

App Files Community
Dhdb commited on
Commit
28917a7
·
verified ·
1 Parent(s): 7005fbf

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +377 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ball Demo
3
- emoji: 🏆
4
- colorFrom: pink
5
- colorTo: indigo
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: ball-demo
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
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,377 @@
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>Mario-like Platform Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ /* Custom styles for the game */
10
+ #game-container {
11
+ position: relative;
12
+ width: 800px;
13
+ height: 500px;
14
+ background: linear-gradient(to bottom, #87CEEB 50%, #228B22 50%);
15
+ overflow: hidden;
16
+ border: 4px solid #333;
17
+ border-radius: 8px;
18
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
19
+ }
20
+
21
+ #player {
22
+ position: absolute;
23
+ width: 50px;
24
+ height: 50px;
25
+ background-color: #FF0000;
26
+ border-radius: 50%;
27
+ border: 2px solid #000;
28
+ z-index: 10;
29
+ transition: transform 0.1s;
30
+ }
31
+
32
+ .platform {
33
+ position: absolute;
34
+ background-color: #8B4513;
35
+ border: 2px solid #5D2906;
36
+ border-radius: 5px;
37
+ z-index: 5;
38
+ }
39
+
40
+ .coin {
41
+ position: absolute;
42
+ width: 20px;
43
+ height: 20px;
44
+ background-color: #FFD700;
45
+ border-radius: 50%;
46
+ border: 2px solid #DAA520;
47
+ z-index: 8;
48
+ animation: spin 2s linear infinite;
49
+ }
50
+
51
+ @keyframes spin {
52
+ 0% { transform: rotateY(0deg); }
53
+ 100% { transform: rotateY(360deg); }
54
+ }
55
+
56
+ .cloud {
57
+ position: absolute;
58
+ background-color: white;
59
+ border-radius: 50%;
60
+ opacity: 0.8;
61
+ }
62
+
63
+ #score-display {
64
+ position: absolute;
65
+ top: 10px;
66
+ right: 10px;
67
+ background-color: rgba(255, 255, 255, 0.7);
68
+ padding: 5px 10px;
69
+ border-radius: 5px;
70
+ font-weight: bold;
71
+ z-index: 20;
72
+ }
73
+
74
+ #game-over {
75
+ position: absolute;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 100%;
80
+ background-color: rgba(0, 0, 0, 0.7);
81
+ display: flex;
82
+ flex-direction: column;
83
+ justify-content: center;
84
+ align-items: center;
85
+ color: white;
86
+ font-size: 24px;
87
+ z-index: 30;
88
+ display: none;
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
93
+ <h1 class="text-4xl font-bold mb-4 text-red-600">Super Adventure Game</h1>
94
+
95
+ <div id="game-container" class="relative">
96
+ <div id="score-display">Score: <span id="score">0</span></div>
97
+
98
+ <div id="player"></div>
99
+
100
+ <div id="game-over">
101
+ <h2 class="text-3xl font-bold mb-4">Game Over!</h2>
102
+ <p class="mb-6">Final Score: <span id="final-score">0</span></p>
103
+ <button id="restart-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
104
+ Play Again
105
+ </button>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="mt-6 flex space-x-4">
110
+ <button id="left-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
111
+ ← Left
112
+ </button>
113
+ <button id="right-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
114
+ Right →
115
+ </button>
116
+ <button id="jump-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
117
+ Jump ↑
118
+ </button>
119
+ </div>
120
+
121
+ <p class="mt-4 text-gray-600">Use buttons or arrow keys to move and jump</p>
122
+
123
+ <script>
124
+ document.addEventListener('DOMContentLoaded', () => {
125
+ // Game elements
126
+ const gameContainer = document.getElementById('game-container');
127
+ const player = document.getElementById('player');
128
+ const scoreDisplay = document.getElementById('score');
129
+ const finalScoreDisplay = document.getElementById('final-score');
130
+ const gameOverScreen = document.getElementById('game-over');
131
+ const restartBtn = document.getElementById('restart-btn');
132
+
133
+ // Control buttons
134
+ const leftBtn = document.getElementById('left-btn');
135
+ const rightBtn = document.getElementById('right-btn');
136
+ const jumpBtn = document.getElementById('jump-btn');
137
+
138
+ // Game state
139
+ let score = 0;
140
+ let isJumping = false;
141
+ let isGameOver = false;
142
+ let playerX = 100;
143
+ let playerY = 400;
144
+ let velocityY = 0;
145
+ let gravity = 0.5;
146
+ let moveSpeed = 5;
147
+ let jumpForce = -12;
148
+ let platforms = [];
149
+ let coins = [];
150
+ let clouds = [];
151
+
152
+ // Initialize game
153
+ initGame();
154
+
155
+ function initGame() {
156
+ // Reset game state
157
+ score = 0;
158
+ isJumping = false;
159
+ isGameOver = false;
160
+ playerX = 100;
161
+ playerY = 400;
162
+ velocityY = 0;
163
+ scoreDisplay.textContent = score;
164
+ gameOverScreen.style.display = 'none';
165
+
166
+ // Clear existing elements
167
+ document.querySelectorAll('.platform').forEach(el => el.remove());
168
+ document.querySelectorAll('.coin').forEach(el => el.remove());
169
+ document.querySelectorAll('.cloud').forEach(el => el.remove());
170
+
171
+ platforms = [];
172
+ coins = [];
173
+ clouds = [];
174
+
175
+ // Create ground platform
176
+ createPlatform(0, 450, 800, 50);
177
+
178
+ // Create some platforms
179
+ createPlatform(100, 350, 150, 20);
180
+ createPlatform(300, 300, 150, 20);
181
+ createPlatform(500, 250, 150, 20);
182
+ createPlatform(200, 200, 150, 20);
183
+ createPlatform(400, 150, 150, 20);
184
+ createPlatform(600, 100, 150, 20);
185
+
186
+ // Create some coins
187
+ createCoin(150, 320);
188
+ createCoin(350, 270);
189
+ createCoin(550, 220);
190
+ createCoin(250, 170);
191
+ createCoin(450, 120);
192
+ createCoin(650, 70);
193
+
194
+ // Create some clouds
195
+ createCloud(100, 50, 60, 30);
196
+ createCloud(300, 30, 80, 40);
197
+ createCloud(500, 60, 70, 35);
198
+ createCloud(700, 40, 90, 45);
199
+
200
+ // Position player
201
+ updatePlayerPosition();
202
+
203
+ // Start game loop
204
+ requestAnimationFrame(gameLoop);
205
+ }
206
+
207
+ function createPlatform(x, y, width, height) {
208
+ const platform = document.createElement('div');
209
+ platform.className = 'platform';
210
+ platform.style.left = `${x}px`;
211
+ platform.style.top = `${y}px`;
212
+ platform.style.width = `${width}px`;
213
+ platform.style.height = `${height}px`;
214
+ gameContainer.appendChild(platform);
215
+
216
+ platforms.push({
217
+ x, y, width, height, element: platform
218
+ });
219
+ }
220
+
221
+ function createCoin(x, y) {
222
+ const coin = document.createElement('div');
223
+ coin.className = 'coin';
224
+ coin.style.left = `${x}px`;
225
+ coin.style.top = `${y}px`;
226
+ gameContainer.appendChild(coin);
227
+
228
+ coins.push({
229
+ x, y, collected: false, element: coin
230
+ });
231
+ }
232
+
233
+ function createCloud(x, y, width, height) {
234
+ const cloud = document.createElement('div');
235
+ cloud.className = 'cloud';
236
+ cloud.style.left = `${x}px`;
237
+ cloud.style.top = `${y}px`;
238
+ cloud.style.width = `${width}px`;
239
+ cloud.style.height = `${height}px`;
240
+ gameContainer.appendChild(cloud);
241
+
242
+ clouds.push({
243
+ x, y, width, height, element: cloud
244
+ });
245
+ }
246
+
247
+ function updatePlayerPosition() {
248
+ player.style.left = `${playerX}px`;
249
+ player.style.top = `${playerY}px`;
250
+ }
251
+
252
+ function checkCollision() {
253
+ // Check if player is on a platform
254
+ let onPlatform = false;
255
+
256
+ for (const platform of platforms) {
257
+ if (
258
+ playerX + 50 > platform.x &&
259
+ playerX < platform.x + platform.width &&
260
+ playerY + 50 >= platform.y &&
261
+ playerY + 50 <= platform.y + 20 && // Only check top part of platform
262
+ velocityY >= 0
263
+ ) {
264
+ onPlatform = true;
265
+ playerY = platform.y - 50;
266
+ velocityY = 0;
267
+ isJumping = false;
268
+ }
269
+ }
270
+
271
+ // Apply gravity if not on platform
272
+ if (!onPlatform) {
273
+ velocityY += gravity;
274
+ isJumping = true;
275
+ }
276
+
277
+ // Check coin collection
278
+ for (const coin of coins) {
279
+ if (!coin.collected &&
280
+ playerX + 50 > coin.x &&
281
+ playerX < coin.x + 20 &&
282
+ playerY + 50 > coin.y &&
283
+ playerY < coin.y + 20) {
284
+ coin.collected = true;
285
+ coin.element.style.display = 'none';
286
+ score += 10;
287
+ scoreDisplay.textContent = score;
288
+ }
289
+ }
290
+
291
+ // Check if player fell off the screen
292
+ if (playerY > gameContainer.clientHeight) {
293
+ gameOver();
294
+ }
295
+ }
296
+
297
+ function gameLoop() {
298
+ if (isGameOver) return;
299
+
300
+ // Apply velocity
301
+ playerY += velocityY;
302
+
303
+ // Update player position
304
+ updatePlayerPosition();
305
+
306
+ // Check collisions
307
+ checkCollision();
308
+
309
+ // Move clouds for parallax effect
310
+ for (const cloud of clouds) {
311
+ cloud.x -= 0.2;
312
+ if (cloud.x + cloud.width < 0) {
313
+ cloud.x = gameContainer.clientWidth;
314
+ }
315
+ cloud.element.style.left = `${cloud.x}px`;
316
+ }
317
+
318
+ requestAnimationFrame(gameLoop);
319
+ }
320
+
321
+ function gameOver() {
322
+ isGameOver = true;
323
+ finalScoreDisplay.textContent = score;
324
+ gameOverScreen.style.display = 'flex';
325
+ }
326
+
327
+ // Event listeners for buttons
328
+ leftBtn.addEventListener('mousedown', () => {
329
+ if (!isGameOver) playerX -= moveSpeed;
330
+ if (playerX < 0) playerX = 0;
331
+ updatePlayerPosition();
332
+ });
333
+
334
+ rightBtn.addEventListener('mousedown', () => {
335
+ if (!isGameOver) playerX += moveSpeed;
336
+ if (playerX > gameContainer.clientWidth - 50) playerX = gameContainer.clientWidth - 50;
337
+ updatePlayerPosition();
338
+ });
339
+
340
+ jumpBtn.addEventListener('click', () => {
341
+ if (!isJumping && !isGameOver) {
342
+ velocityY = jumpForce;
343
+ isJumping = true;
344
+ }
345
+ });
346
+
347
+ // Keyboard controls
348
+ document.addEventListener('keydown', (e) => {
349
+ if (isGameOver) return;
350
+
351
+ switch (e.key) {
352
+ case 'ArrowLeft':
353
+ playerX -= moveSpeed;
354
+ if (playerX < 0) playerX = 0;
355
+ break;
356
+ case 'ArrowRight':
357
+ playerX += moveSpeed;
358
+ if (playerX > gameContainer.clientWidth - 50) playerX = gameContainer.clientWidth - 50;
359
+ break;
360
+ case 'ArrowUp':
361
+ case ' ':
362
+ if (!isJumping) {
363
+ velocityY = jumpForce;
364
+ isJumping = true;
365
+ }
366
+ break;
367
+ }
368
+
369
+ updatePlayerPosition();
370
+ });
371
+
372
+ // Restart game
373
+ restartBtn.addEventListener('click', initGame);
374
+ });
375
+ </script>
376
+ <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=Dhdb/ball-demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
377
+ </html>