Hugging Face's logo

Spaces:
Calmeida
/
RetroCobra
Running

App Files Community
Calmeida commited on
Commit
eb4c051
·
verified ·
1 Parent(s): d84ce18

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +570 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Playground
3
- emoji: 💻
4
- colorFrom: yellow
5
  colorTo: red
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: my-playground
3
+ emoji: 🐳
4
+ colorFrom: pink
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,570 @@
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="pt">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cobra Matemática - Jogo Retro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @font-face {
10
+ font-family: 'Press Start 2P';
11
+ src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
12
+ }
13
+
14
+ body {
15
+ font-family: 'Press Start 2P', cursive;
16
+ background-color: #0f172a;
17
+ color: #f8fafc;
18
+ overflow: hidden;
19
+ touch-action: none;
20
+ user-select: none;
21
+ }
22
+
23
+ .game-container {
24
+ position: relative;
25
+ width: 100%;
26
+ max-width: 512px;
27
+ margin: 0 auto;
28
+ }
29
+
30
+ .game-board {
31
+ position: relative;
32
+ width: 100%;
33
+ height: 0;
34
+ padding-bottom: 100%;
35
+ background-color: #1e293b;
36
+ border: 4px solid #475569;
37
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
38
+ overflow: hidden;
39
+ }
40
+
41
+ .pixel {
42
+ position: absolute;
43
+ width: 16px;
44
+ height: 16px;
45
+ box-sizing: border-box;
46
+ }
47
+
48
+ .snake {
49
+ background-color: #84cc16;
50
+ border: 1px solid #65a30d;
51
+ z-index: 2;
52
+ }
53
+
54
+ .snake-head {
55
+ background-color: #f59e0b;
56
+ border: 1px solid #d97706;
57
+ z-index: 3;
58
+ }
59
+
60
+ .food {
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ font-size: 10px;
65
+ color: white;
66
+ z-index: 1;
67
+ animation: pulse 0.5s infinite alternate;
68
+ }
69
+
70
+ .positive {
71
+ background-color: #ef4444;
72
+ border: 1px solid #dc2626;
73
+ }
74
+
75
+ .negative {
76
+ background-color: #3b82f6;
77
+ border: 1px solid #2563eb;
78
+ }
79
+
80
+ .flash {
81
+ animation: flash 0.3s;
82
+ }
83
+
84
+ .shake {
85
+ animation: shake 0.5s;
86
+ }
87
+
88
+ @keyframes pulse {
89
+ from { transform: scale(1); }
90
+ to { transform: scale(1.1); }
91
+ }
92
+
93
+ @keyframes flash {
94
+ 0% { background-color: #1e293b; }
95
+ 50% { background-color: #475569; }
96
+ 100% { background-color: #1e293b; }
97
+ }
98
+
99
+ @keyframes shake {
100
+ 0% { transform: translateX(0); }
101
+ 25% { transform: translateX(-5px); }
102
+ 50% { transform: translateX(5px); }
103
+ 75% { transform: translateX(-5px); }
104
+ 100% { transform: translateX(0); }
105
+ }
106
+
107
+ .controls {
108
+ display: flex;
109
+ justify-content: center;
110
+ gap: 10px;
111
+ margin-top: 20px;
112
+ }
113
+
114
+ .btn {
115
+ padding: 8px 16px;
116
+ background-color: #475569;
117
+ color: white;
118
+ border: 2px solid #64748b;
119
+ font-family: 'Press Start 2P', cursive;
120
+ font-size: 12px;
121
+ cursor: pointer;
122
+ transition: all 0.2s;
123
+ }
124
+
125
+ .btn:hover {
126
+ background-color: #64748b;
127
+ transform: translateY(-2px);
128
+ }
129
+
130
+ .modal {
131
+ position: fixed;
132
+ top: 0;
133
+ left: 0;
134
+ width: 100%;
135
+ height: 100%;
136
+ background-color: rgba(0, 0, 0, 0.8);
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ z-index: 100;
141
+ }
142
+
143
+ .modal-content {
144
+ background-color: #1e293b;
145
+ border: 4px solid #475569;
146
+ padding: 20px;
147
+ max-width: 400px;
148
+ width: 90%;
149
+ text-align: center;
150
+ }
151
+
152
+ @media (max-width: 640px) {
153
+ .btn {
154
+ font-size: 10px;
155
+ padding: 6px 12px;
156
+ }
157
+
158
+ .score-display {
159
+ font-size: 14px;
160
+ }
161
+ }
162
+ </style>
163
+ </head>
164
+ <body class="flex flex-col items-center justify-center min-h-screen p-4">
165
+ <h1 class="text-2xl md:text-3xl mb-4 text-center text-green-400">COBRA MATEMÁTICA</h1>
166
+
167
+ <div class="game-container">
168
+ <div class="flex justify-between items-center mb-2">
169
+ <div class="score-display">
170
+ Pontos: <span id="score">0</span>
171
+ </div>
172
+ <div class="score-display">
173
+ Recorde: <span id="high-score">0</span>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="game-board" id="game-board">
178
+ <!-- Game elements will be added here by JavaScript -->
179
+ </div>
180
+
181
+ <div class="controls">
182
+ <button class="btn" id="pause-btn">Pausar (P)</button>
183
+ <button class="btn" id="restart-btn">Reiniciar (R)</button>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="modal hidden" id="start-modal">
188
+ <div class="modal-content">
189
+ <h2 class="text-xl mb-4 text-green-400">COBRA MATEMÁTICA</h2>
190
+ <p class="mb-4 text-sm">Use as setas para mover a cobra. Coma números positivos para crescer e negativos para encolher!</p>
191
+ <button class="btn" id="start-btn">COMEÇAR</button>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="modal hidden" id="game-over-modal">
196
+ <div class="modal-content">
197
+ <h2 class="text-xl mb-4 text-red-400">FIM DE JOGO!</h2>
198
+ <p class="mb-2">Pontuação: <span id="final-score">0</span></p>
199
+ <p class="mb-4">Recorde: <span id="final-high-score">0</span></p>
200
+ <button class="btn" id="restart-modal-btn">JOGAR NOVAMENTE</button>
201
+ </div>
202
+ </div>
203
+
204
+ <audio id="eat-sound" preload="auto">
205
+ <source src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3" type="audio/mpeg">
206
+ </audio>
207
+
208
+ <audio id="crash-sound" preload="auto">
209
+ <source src="https://assets.mixkit.co/sfx/preview/mixkit-retro-arcade-lose-2027.mp3" type="audio/mpeg">
210
+ </audio>
211
+
212
+ <script>
213
+ document.addEventListener('DOMContentLoaded', () => {
214
+ // Game constants
215
+ const GRID_SIZE = 32;
216
+ const CELL_SIZE = 16;
217
+ const INITIAL_SPEED = 150;
218
+ const SPEED_INCREMENT = 5;
219
+ const SPEED_CHANGE_INTERVAL = 10;
220
+
221
+ // Game variables
222
+ let snake = [];
223
+ let food = {};
224
+ let direction = 'right';
225
+ let nextDirection = 'right';
226
+ let gameInterval;
227
+ let score = 0;
228
+ let highScore = localStorage.getItem('snakeHighScore') || 0;
229
+ let foodCount = 0;
230
+ let speed = INITIAL_SPEED;
231
+ let isPaused = false;
232
+ let gameStarted = false;
233
+
234
+ // DOM elements
235
+ const gameBoard = document.getElementById('game-board');
236
+ const scoreDisplay = document.getElementById('score');
237
+ const highScoreDisplay = document.getElementById('high-score');
238
+ const finalScoreDisplay = document.getElementById('final-score');
239
+ const finalHighScoreDisplay = document.getElementById('final-high-score');
240
+ const startModal = document.getElementById('start-modal');
241
+ const gameOverModal = document.getElementById('game-over-modal');
242
+ const startBtn = document.getElementById('start-btn');
243
+ const pauseBtn = document.getElementById('pause-btn');
244
+ const restartBtn = document.getElementById('restart-btn');
245
+ const restartModalBtn = document.getElementById('restart-modal-btn');
246
+ const eatSound = document.getElementById('eat-sound');
247
+ const crashSound = document.getElementById('crash-sound');
248
+
249
+ // Initialize game board
250
+ gameBoard.style.height = `${GRID_SIZE * CELL_SIZE}px`;
251
+ gameBoard.style.width = `${GRID_SIZE * CELL_SIZE}px`;
252
+
253
+ // Update displays
254
+ highScoreDisplay.textContent = highScore;
255
+
256
+ // Event listeners
257
+ startBtn.addEventListener('click', startGame);
258
+ pauseBtn.addEventListener('click', togglePause);
259
+ restartBtn.addEventListener('click', resetGame);
260
+ restartModalBtn.addEventListener('click', resetGame);
261
+
262
+ document.addEventListener('keydown', (e) => {
263
+ if (!gameStarted) return;
264
+
265
+ switch (e.key) {
266
+ case 'ArrowUp':
267
+ if (direction !== 'down') nextDirection = 'up';
268
+ break;
269
+ case 'ArrowDown':
270
+ if (direction !== 'up') nextDirection = 'down';
271
+ break;
272
+ case 'ArrowLeft':
273
+ if (direction !== 'right') nextDirection = 'left';
274
+ break;
275
+ case 'ArrowRight':
276
+ if (direction !== 'left') nextDirection = 'right';
277
+ break;
278
+ case 'p':
279
+ case 'P':
280
+ togglePause();
281
+ break;
282
+ case 'r':
283
+ case 'R':
284
+ resetGame();
285
+ break;
286
+ }
287
+ });
288
+
289
+ // Touch controls for mobile
290
+ const handleSwipe = (() => {
291
+ let touchStartX = 0;
292
+ let touchStartY = 0;
293
+ let touchEndX = 0;
294
+ let touchEndY = 0;
295
+
296
+ const handleTouchStart = (e) => {
297
+ touchStartX = e.changedTouches[0].screenX;
298
+ touchStartY = e.changedTouches[0].screenY;
299
+ };
300
+
301
+ const handleTouchEnd = (e) => {
302
+ if (!gameStarted) return;
303
+
304
+ touchEndX = e.changedTouches[0].screenX;
305
+ touchEndY = e.changedTouches[0].screenY;
306
+
307
+ const diffX = touchStartX - touchEndX;
308
+ const diffY = touchStartY - touchEndY;
309
+
310
+ if (Math.abs(diffX) > Math.abs(diffY)) {
311
+ // Horizontal swipe
312
+ if (diffX > 0 && direction !== 'right') {
313
+ nextDirection = 'left';
314
+ } else if (diffX < 0 && direction !== 'left') {
315
+ nextDirection = 'right';
316
+ }
317
+ } else {
318
+ // Vertical swipe
319
+ if (diffY > 0 && direction !== 'down') {
320
+ nextDirection = 'up';
321
+ } else if (diffY < 0 && direction !== 'up') {
322
+ nextDirection = 'down';
323
+ }
324
+ }
325
+ };
326
+
327
+ return {
328
+ init: () => {
329
+ gameBoard.addEventListener('touchstart', handleTouchStart, false);
330
+ gameBoard.addEventListener('touchend', handleTouchEnd, false);
331
+ }
332
+ };
333
+ })();
334
+
335
+ handleSwipe.init();
336
+
337
+ // Game functions
338
+ function startGame() {
339
+ startModal.classList.add('hidden');
340
+ resetGame();
341
+ gameStarted = true;
342
+ }
343
+
344
+ function resetGame() {
345
+ // Clear the board
346
+ gameBoard.innerHTML = '';
347
+ gameOverModal.classList.add('hidden');
348
+
349
+ // Reset game variables
350
+ snake = [
351
+ {x: 5, y: 15},
352
+ {x: 4, y: 15},
353
+ {x: 3, y: 15}
354
+ ];
355
+
356
+ direction = 'right';
357
+ nextDirection = 'right';
358
+ score = 0;
359
+ foodCount = 0;
360
+ speed = INITIAL_SPEED;
361
+ isPaused = false;
362
+
363
+ // Update displays
364
+ scoreDisplay.textContent = score;
365
+ pauseBtn.textContent = 'Pausar (P)';
366
+
367
+ // Create initial food
368
+ createFood();
369
+
370
+ // Start game loop
371
+ clearInterval(gameInterval);
372
+ gameInterval = setInterval(gameLoop, speed);
373
+ gameStarted = true;
374
+ }
375
+
376
+ function togglePause() {
377
+ if (!gameStarted) return;
378
+
379
+ isPaused = !isPaused;
380
+
381
+ if (isPaused) {
382
+ clearInterval(gameInterval);
383
+ pauseBtn.textContent = 'Continuar (P)';
384
+ gameBoard.classList.add('opacity-50');
385
+ } else {
386
+ gameInterval = setInterval(gameLoop, speed);
387
+ pauseBtn.textContent = 'Pausar (P)';
388
+ gameBoard.classList.remove('opacity-50');
389
+ }
390
+ }
391
+
392
+ function gameLoop() {
393
+ if (isPaused) return;
394
+
395
+ // Update direction
396
+ direction = nextDirection;
397
+
398
+ // Move snake
399
+ const head = {...snake[0]};
400
+
401
+ switch (direction) {
402
+ case 'up':
403
+ head.y -= 1;
404
+ break;
405
+ case 'down':
406
+ head.y += 1;
407
+ break;
408
+ case 'left':
409
+ head.x -= 1;
410
+ break;
411
+ case 'right':
412
+ head.x += 1;
413
+ break;
414
+ }
415
+
416
+ // Check collision with walls
417
+ if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
418
+ gameOver();
419
+ return;
420
+ }
421
+
422
+ // Check collision with self
423
+ if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
424
+ gameOver();
425
+ return;
426
+ }
427
+
428
+ // Add new head
429
+ snake.unshift(head);
430
+
431
+ // Check if snake ate food
432
+ if (head.x === food.x && head.y === food.y) {
433
+ // Play eat sound
434
+ eatSound.currentTime = 0;
435
+ eatSound.play();
436
+
437
+ // Update score
438
+ score += food.value;
439
+ scoreDisplay.textContent = score;
440
+
441
+ // Flash effect
442
+ gameBoard.classList.add('flash');
443
+ setTimeout(() => gameBoard.classList.remove('flash'), 300);
444
+
445
+ // Handle snake growth/shrinking
446
+ if (food.value > 0) {
447
+ // Positive number - grow
448
+ for (let i = 0; i < food.value - 1; i++) {
449
+ snake.push({...snake[snake.length - 1]});
450
+ }
451
+ } else {
452
+ // Negative number - shrink
453
+ const segmentsToRemove = Math.abs(food.value);
454
+
455
+ if (snake.length > segmentsToRemove) {
456
+ snake.splice(-segmentsToRemove);
457
+ } else {
458
+ // If snake would become too small, game over
459
+ gameOver();
460
+ return;
461
+ }
462
+
463
+ // Shake effect
464
+ gameBoard.classList.add('shake');
465
+ setTimeout(() => gameBoard.classList.remove('shake'), 500);
466
+ }
467
+
468
+ // Create new food
469
+ createFood();
470
+
471
+ // Increase speed every 10 foods
472
+ foodCount++;
473
+ if (foodCount % SPEED_CHANGE_INTERVAL === 0) {
474
+ speed = Math.max(50, speed - SPEED_INCREMENT);
475
+ clearInterval(gameInterval);
476
+ gameInterval = setInterval(gameLoop, speed);
477
+ }
478
+ } else {
479
+ // Remove tail if no food was eaten
480
+ snake.pop();
481
+ }
482
+
483
+ // Render game
484
+ render();
485
+ }
486
+
487
+ function createFood() {
488
+ // Find all empty positions
489
+ const emptyPositions = [];
490
+
491
+ for (let y = 0; y < GRID_SIZE; y++) {
492
+ for (let x = 0; x < GRID_SIZE; x++) {
493
+ if (!snake.some(segment => segment.x === x && segment.y === y)) {
494
+ emptyPositions.push({x, y});
495
+ }
496
+ }
497
+ }
498
+
499
+ // If no empty positions, game over (win)
500
+ if (emptyPositions.length === 0) {
501
+ gameOver();
502
+ return;
503
+ }
504
+
505
+ // Choose random empty position
506
+ const randomPosition = emptyPositions[Math.floor(Math.random() * emptyPositions.length)];
507
+
508
+ // Generate random number (-5 to 5, excluding 0)
509
+ let value;
510
+ do {
511
+ value = Math.floor(Math.random() * 11) - 5;
512
+ } while (value === 0);
513
+
514
+ food = {
515
+ x: randomPosition.x,
516
+ y: randomPosition.y,
517
+ value: value
518
+ };
519
+ }
520
+
521
+ function render() {
522
+ // Clear board
523
+ gameBoard.innerHTML = '';
524
+
525
+ // Render snake
526
+ snake.forEach((segment, index) => {
527
+ const segmentElement = document.createElement('div');
528
+ segmentElement.className = `pixel ${index === 0 ? 'snake-head' : 'snake'}`;
529
+ segmentElement.style.left = `${segment.x * CELL_SIZE}px`;
530
+ segmentElement.style.top = `${segment.y * CELL_SIZE}px`;
531
+ gameBoard.appendChild(segmentElement);
532
+ });
533
+
534
+ // Render food
535
+ const foodElement = document.createElement('div');
536
+ foodElement.className = `pixel food ${food.value > 0 ? 'positive' : 'negative'}`;
537
+ foodElement.style.left = `${food.x * CELL_SIZE}px`;
538
+ foodElement.style.top = `${food.y * CELL_SIZE}px`;
539
+ foodElement.textContent = food.value > 0 ? `+${food.value}` : food.value;
540
+ gameBoard.appendChild(foodElement);
541
+ }
542
+
543
+ function gameOver() {
544
+ // Play crash sound
545
+ crashSound.currentTime = 0;
546
+ crashSound.play();
547
+
548
+ // Stop game
549
+ clearInterval(gameInterval);
550
+ gameStarted = false;
551
+
552
+ // Update high score
553
+ if (score > highScore) {
554
+ highScore = score;
555
+ localStorage.setItem('snakeHighScore', highScore);
556
+ highScoreDisplay.textContent = highScore;
557
+ }
558
+
559
+ // Show game over modal
560
+ finalScoreDisplay.textContent = score;
561
+ finalHighScoreDisplay.textContent = highScore;
562
+ gameOverModal.classList.remove('hidden');
563
+ }
564
+
565
+ // Show start modal initially
566
+ startModal.classList.remove('hidden');
567
+ });
568
+ </script>
569
+ <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=Calmeida/my-playground" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
570
+ </html>