Hugging Face's logo

Spaces:
jungnerd
/
pinball
Running

App Files Community
jungnerd commited on
Commit
6535e16
·
verified ·
1 Parent(s): db56088

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +448 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pinball
3
- emoji: 📚
4
- colorFrom: gray
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: pinball
3
+ emoji: 🐳
4
+ colorFrom: blue
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,448 @@
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>Pinball Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @keyframes bump {
10
+ 0% { transform: scale(1); }
11
+ 50% { transform: scale(1.2); }
12
+ 100% { transform: scale(1); }
13
+ }
14
+
15
+ @keyframes flash {
16
+ 0% { opacity: 1; }
17
+ 50% { opacity: 0.5; }
18
+ 100% { opacity: 1; }
19
+ }
20
+
21
+ .bump-animation {
22
+ animation: bump 0.2s ease;
23
+ }
24
+
25
+ .flash-animation {
26
+ animation: flash 0.3s ease;
27
+ }
28
+
29
+ #game-container {
30
+ perspective: 1000px;
31
+ }
32
+
33
+ #pinball-table {
34
+ transform-style: preserve-3d;
35
+ transform: rotateX(10deg);
36
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
37
+ }
38
+
39
+ #ball {
40
+ transition: transform 0.05s linear;
41
+ }
42
+
43
+ .flipper {
44
+ transform-origin: left center;
45
+ transition: transform 0.1s ease;
46
+ }
47
+
48
+ .flipper.active {
49
+ transform: rotate(-30deg);
50
+ }
51
+
52
+ .bumper {
53
+ transition: transform 0.2s ease;
54
+ }
55
+
56
+ .bumper.hit {
57
+ transform: scale(1.1);
58
+ }
59
+
60
+ @media (max-width: 768px) {
61
+ #pinball-table {
62
+ transform: rotateX(15deg);
63
+ }
64
+
65
+ .controls {
66
+ flex-direction: column;
67
+ }
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
72
+ <div class="text-center mb-4">
73
+ <h1 class="text-4xl font-bold text-yellow-400 mb-2">Cosmic Pinball</h1>
74
+ <div class="flex justify-center gap-8 mb-4">
75
+ <div class="bg-gray-800 px-4 py-2 rounded-lg">
76
+ <span class="text-yellow-400">Score:</span> <span id="score" class="text-xl font-mono">0</span>
77
+ </div>
78
+ <div class="bg-gray-800 px-4 py-2 rounded-lg">
79
+ <span class="text-yellow-400">Balls:</span> <span id="balls" class="text-xl font-mono">3</span>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <div id="game-container" class="relative mb-8">
85
+ <div id="pinball-table" class="relative bg-blue-900 border-4 border-yellow-600 rounded-lg overflow-hidden" style="width: 600px; height: 800px;">
86
+ <!-- Ball -->
87
+ <div id="ball" class="absolute w-6 h-6 bg-white rounded-full shadow-lg z-10"></div>
88
+
89
+ <!-- Flippers -->
90
+ <div class="absolute bottom-16 left-32 w-32 h-6 bg-red-600 rounded-lg flipper" id="left-flipper"></div>
91
+ <div class="absolute bottom-16 right-32 w-32 h-6 bg-red-600 rounded-lg flipper" id="right-flipper" style="transform-origin: right center;"></div>
92
+
93
+ <!-- Bumpers -->
94
+ <div class="absolute top-40 left-40 w-16 h-16 bg-purple-600 rounded-full bumper" id="bumper1"></div>
95
+ <div class="absolute top-40 right-40 w-16 h-16 bg-purple-600 rounded-full bumper" id="bumper2"></div>
96
+ <div class="absolute top-60 left-1/2 transform -translate-x-1/2 w-16 h-16 bg-purple-600 rounded-full bumper" id="bumper3"></div>
97
+
98
+ <!-- Targets -->
99
+ <div class="absolute top-20 left-20 w-8 h-20 bg-green-500 rounded target" id="target1"></div>
100
+ <div class="absolute top-20 right-20 w-8 h-20 bg-green-500 rounded target" id="target2"></div>
101
+
102
+ <!-- Slingshots -->
103
+ <div class="absolute bottom-40 left-10 w-4 h-20 bg-orange-500 rounded slingshot" id="left-slingshot"></div>
104
+ <div class="absolute bottom-40 right-10 w-4 h-20 bg-orange-500 rounded slingshot" id="right-slingshot"></div>
105
+
106
+ <!-- Plunger area -->
107
+ <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-8 bg-yellow-600 rounded"></div>
108
+
109
+ <!-- Side walls -->
110
+ <div class="absolute top-0 left-0 w-full h-8 bg-yellow-600"></div>
111
+ <div class="absolute top-0 left-0 w-8 h-full bg-yellow-600"></div>
112
+ <div class="absolute top-0 right-0 w-8 h-full bg-yellow-600"></div>
113
+
114
+ <!-- Decorations -->
115
+ <div class="absolute top-10 left-1/2 transform -translate-x-1/2 text-yellow-400 font-bold text-xl">COSMIC PINBALL</div>
116
+ <div class="absolute top-80 left-1/2 transform -translate-x-1/2 text-yellow-400 font-bold text-lg">EXTRA BALL</div>
117
+ <div class="absolute bottom-24 left-1/2 transform -translate-x-1/2 w-32 h-2 bg-yellow-400 rounded-full"></div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="controls flex gap-8 mb-8">
122
+ <button id="start-btn" class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-bold transition">START GAME</button>
123
+ <button id="left-btn" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold transition">LEFT FLIPPER (A)</button>
124
+ <button id="right-btn" class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg font-bold transition">RIGHT FLIPPER (L)</button>
125
+ <button id="plunger-btn" class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-bold transition">PLUNGER (SPACE)</button>
126
+ </div>
127
+
128
+ <div class="text-gray-400 text-sm text-center max-w-md">
129
+ <p>Use the buttons or keyboard (A for left flipper, L for right flipper, SPACE for plunger)</p>
130
+ <p class="mt-2">Hit bumpers and targets to score points. Don't let the ball fall!</p>
131
+ </div>
132
+
133
+ <script>
134
+ document.addEventListener('DOMContentLoaded', () => {
135
+ // Game elements
136
+ const ball = document.getElementById('ball');
137
+ const leftFlipper = document.getElementById('left-flipper');
138
+ const rightFlipper = document.getElementById('right-flipper');
139
+ const bumpers = document.querySelectorAll('.bumper');
140
+ const targets = document.querySelectorAll('.target');
141
+ const slingshots = document.querySelectorAll('.slingshot');
142
+ const scoreDisplay = document.getElementById('score');
143
+ const ballsDisplay = document.getElementById('balls');
144
+ const startBtn = document.getElementById('start-btn');
145
+ const leftBtn = document.getElementById('left-btn');
146
+ const rightBtn = document.getElementById('right-btn');
147
+ const plungerBtn = document.getElementById('plunger-btn');
148
+
149
+ // Game state
150
+ let score = 0;
151
+ let balls = 3;
152
+ let ballX = 300;
153
+ let ballY = 750;
154
+ let ballSpeedX = 0;
155
+ let ballSpeedY = 0;
156
+ let gravity = 0.2;
157
+ let friction = 0.99;
158
+ let gameActive = false;
159
+ let gameInterval;
160
+ let leftFlipperActive = false;
161
+ let rightFlipperActive = false;
162
+
163
+ // Initialize game
164
+ function initGame() {
165
+ resetBall();
166
+ score = 0;
167
+ balls = 3;
168
+ updateDisplay();
169
+ gameActive = true;
170
+
171
+ if (gameInterval) clearInterval(gameInterval);
172
+ gameInterval = setInterval(updateGame, 16);
173
+ }
174
+
175
+ // Reset ball to plunger position
176
+ function resetBall() {
177
+ ballX = 300;
178
+ ballY = 750;
179
+ ballSpeedX = 0;
180
+ ballSpeedY = 0;
181
+ updateBallPosition();
182
+ }
183
+
184
+ // Launch ball
185
+ function launchBall() {
186
+ if (ballY >= 750 && !gameActive) {
187
+ ballSpeedY = -15 + Math.random() * 5;
188
+ ballSpeedX = (Math.random() - 0.5) * 5;
189
+ gameActive = true;
190
+ }
191
+ }
192
+
193
+ // Update game state
194
+ function updateGame() {
195
+ if (!gameActive) return;
196
+
197
+ // Apply gravity
198
+ ballSpeedY += gravity;
199
+
200
+ // Apply friction
201
+ ballSpeedX *= friction;
202
+ ballSpeedY *= friction;
203
+
204
+ // Update position
205
+ ballX += ballSpeedX;
206
+ ballY += ballSpeedY;
207
+
208
+ // Wall collisions
209
+ if (ballX <= 8) {
210
+ ballX = 8;
211
+ ballSpeedX = -ballSpeedX * 0.8;
212
+ playSound('wall');
213
+ }
214
+ if (ballX >= 592) {
215
+ ballX = 592;
216
+ ballSpeedX = -ballSpeedX * 0.8;
217
+ playSound('wall');
218
+ }
219
+ if (ballY <= 8) {
220
+ ballY = 8;
221
+ ballSpeedY = -ballSpeedY * 0.8;
222
+ playSound('wall');
223
+ }
224
+
225
+ // Bottom out
226
+ if (ballY >= 792) {
227
+ balls--;
228
+ updateDisplay();
229
+
230
+ if (balls <= 0) {
231
+ gameActive = false;
232
+ setTimeout(() => alert(`Game Over! Final Score: ${score}`), 100);
233
+ } else {
234
+ setTimeout(() => {
235
+ resetBall();
236
+ gameActive = false;
237
+ }, 500);
238
+ }
239
+ playSound('lose');
240
+ }
241
+
242
+ // Flipper collisions
243
+ checkFlipperCollision(leftFlipper, true);
244
+ checkFlipperCollision(rightFlipper, false);
245
+
246
+ // Bumper collisions
247
+ bumpers.forEach(bumper => {
248
+ const rect = bumper.getBoundingClientRect();
249
+ const tableRect = document.getElementById('pinball-table').getBoundingClientRect();
250
+
251
+ const bumperX = rect.left - tableRect.left + rect.width / 2;
252
+ const bumperY = rect.top - tableRect.top + rect.height / 2;
253
+ const bumperRadius = rect.width / 2;
254
+
255
+ const dx = ballX - bumperX;
256
+ const dy = ballY - bumperY;
257
+ const distance = Math.sqrt(dx * dx + dy * dy);
258
+
259
+ if (distance < bumperRadius + 12) {
260
+ // Collision detected
261
+ const angle = Math.atan2(dy, dx);
262
+ const force = 10;
263
+
264
+ ballSpeedX = Math.cos(angle) * force;
265
+ ballSpeedY = Math.sin(angle) * force;
266
+
267
+ // Visual feedback
268
+ bumper.classList.add('hit', 'flash-animation');
269
+ setTimeout(() => {
270
+ bumper.classList.remove('hit', 'flash-animation');
271
+ }, 300);
272
+
273
+ // Score
274
+ addScore(100);
275
+ playSound('bumper');
276
+ }
277
+ });
278
+
279
+ // Target collisions
280
+ targets.forEach(target => {
281
+ const rect = target.getBoundingClientRect();
282
+ const tableRect = document.getElementById('pinball-table').getBoundingClientRect();
283
+
284
+ const targetX = rect.left - tableRect.left;
285
+ const targetY = rect.top - tableRect.top;
286
+ const targetWidth = rect.width;
287
+ const targetHeight = rect.height;
288
+
289
+ if (ballX > targetX && ballX < targetX + targetWidth &&
290
+ ballY > targetY && ballY < targetY + targetHeight) {
291
+
292
+ // Collision detected
293
+ if (ballSpeedY < 0) ballSpeedY = -ballSpeedY * 1.2;
294
+ else ballSpeedY = Math.abs(ballSpeedY) * 1.2;
295
+
296
+ ballSpeedX += (Math.random() - 0.5) * 5;
297
+
298
+ // Visual feedback
299
+ target.classList.add('bump-animation');
300
+ setTimeout(() => {
301
+ target.classList.remove('bump-animation');
302
+ }, 200);
303
+
304
+ // Score
305
+ addScore(200);
306
+ playSound('target');
307
+ }
308
+ });
309
+
310
+ // Slingshot collisions
311
+ slingshots.forEach(slingshot => {
312
+ const rect = slingshot.getBoundingClientRect();
313
+ const tableRect = document.getElementById('pinball-table').getBoundingClientRect();
314
+
315
+ const slingX = rect.left - tableRect.left;
316
+ const slingY = rect.top - tableRect.top;
317
+ const slingWidth = rect.width;
318
+ const slingHeight = rect.height;
319
+
320
+ if (ballX > slingX && ballX < slingX + slingWidth &&
321
+ ballY > slingY && ballY < slingY + slingHeight) {
322
+
323
+ // Determine which side
324
+ const isLeft = slingshot.id === 'left-slingshot';
325
+
326
+ // Apply force
327
+ ballSpeedX = isLeft ? 8 : -8;
328
+ ballSpeedY = -5;
329
+
330
+ // Visual feedback
331
+ slingshot.classList.add('bump-animation');
332
+ setTimeout(() => {
333
+ slingshot.classList.remove('bump-animation');
334
+ }, 200);
335
+
336
+ // Score
337
+ addScore(50);
338
+ playSound('slingshot');
339
+ }
340
+ });
341
+
342
+ // Update ball position
343
+ updateBallPosition();
344
+ }
345
+
346
+ // Check flipper collision
347
+ function checkFlipperCollision(flipper, isLeft) {
348
+ if (!(leftFlipperActive && isLeft) && !(rightFlipperActive && !isLeft)) return;
349
+
350
+ const rect = flipper.getBoundingClientRect();
351
+ const tableRect = document.getElementById('pinball-table').getBoundingClientRect();
352
+
353
+ const flipperX = rect.left - tableRect.left;
354
+ const flipperY = rect.top - tableRect.top;
355
+ const flipperWidth = rect.width;
356
+ const flipperHeight = rect.height;
357
+
358
+ // Simple rectangular collision for flippers
359
+ if (ballX > flipperX && ballX < flipperX + flipperWidth &&
360
+ ballY > flipperY && ballY < flipperY + flipperHeight) {
361
+
362
+ // Apply force based on flipper direction
363
+ const force = isLeft ? -8 : 8;
364
+ ballSpeedX = force;
365
+ ballSpeedY = -10;
366
+
367
+ // Score
368
+ addScore(25);
369
+ playSound('flipper');
370
+ }
371
+ }
372
+
373
+ // Update ball position on screen
374
+ function updateBallPosition() {
375
+ ball.style.left = `${ballX - 12}px`;
376
+ ball.style.top = `${ballY - 12}px`;
377
+ }
378
+
379
+ // Add to score
380
+ function addScore(points) {
381
+ score += points;
382
+ updateDisplay();
383
+ }
384
+
385
+ // Update display
386
+ function updateDisplay() {
387
+ scoreDisplay.textContent = score;
388
+ ballsDisplay.textContent = balls;
389
+ }
390
+
391
+ // Play sound (simulated with class changes)
392
+ function playSound(type) {
393
+ // In a real game, you would play actual sounds here
394
+ // For this demo, we'll just log the sound type
395
+ console.log(`Playing sound: ${type}`);
396
+ }
397
+
398
+ // Event listeners
399
+ startBtn.addEventListener('click', initGame);
400
+ plungerBtn.addEventListener('click', launchBall);
401
+
402
+ // Flipper controls
403
+ function activateLeftFlipper() {
404
+ leftFlipper.classList.add('active');
405
+ leftFlipperActive = true;
406
+ }
407
+
408
+ function deactivateLeftFlipper() {
409
+ leftFlipper.classList.remove('active');
410
+ leftFlipperActive = false;
411
+ }
412
+
413
+ function activateRightFlipper() {
414
+ rightFlipper.classList.add('active');
415
+ rightFlipperActive = true;
416
+ }
417
+
418
+ function deactivateRightFlipper() {
419
+ rightFlipper.classList.remove('active');
420
+ rightFlipperActive = false;
421
+ }
422
+
423
+ leftBtn.addEventListener('mousedown', activateLeftFlipper);
424
+ leftBtn.addEventListener('mouseup', deactivateLeftFlipper);
425
+ leftBtn.addEventListener('mouseleave', deactivateLeftFlipper);
426
+
427
+ rightBtn.addEventListener('mousedown', activateRightFlipper);
428
+ rightBtn.addEventListener('mouseup', deactivateRightFlipper);
429
+ rightBtn.addEventListener('mouseleave', deactivateRightFlipper);
430
+
431
+ // Keyboard controls
432
+ document.addEventListener('keydown', (e) => {
433
+ if (e.key === 'a' || e.key === 'A') activateLeftFlipper();
434
+ if (e.key === 'l' || e.key === 'L') activateRightFlipper();
435
+ if (e.key === ' ') launchBall();
436
+ });
437
+
438
+ document.addEventListener('keyup', (e) => {
439
+ if (e.key === 'a' || e.key === 'A') deactivateLeftFlipper();
440
+ if (e.key === 'l' || e.key === 'L') deactivateRightFlipper();
441
+ });
442
+
443
+ // Initial setup
444
+ resetBall();
445
+ });
446
+ </script>
447
+ <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=jungnerd/pinball" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
448
+ </html>