Hugging Face's logo

Spaces:
Ibrokhim1263
/
https-huggingface-co-ibrokhim1263
Running

App Files Community
Ibrokhim1263 commited on
Commit
dd7ab0c
·
verified ·
1 Parent(s): 135a937

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +415 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co Ibrokhim1263
3
- emoji: ⚡
4
- colorFrom: red
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: https-huggingface-co-ibrokhim1263
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
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,415 @@
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>Snake Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ /* Custom styles for the game canvas */
10
+ .game-container {
11
+ position: relative;
12
+ margin: 0 auto;
13
+ border: 8px solid #4B5563;
14
+ border-radius: 8px;
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
16
+ }
17
+
18
+ canvas {
19
+ display: block;
20
+ background-color: #1F2937;
21
+ }
22
+
23
+ .game-overlay {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ display: flex;
30
+ flex-direction: column;
31
+ justify-content: center;
32
+ align-items: center;
33
+ background-color: rgba(0, 0, 0, 0.7);
34
+ color: white;
35
+ font-size: 2rem;
36
+ z-index: 10;
37
+ }
38
+
39
+ .snake-cell {
40
+ transition: all 0.1s ease;
41
+ }
42
+
43
+ @keyframes pulse {
44
+ 0% { transform: scale(1); }
45
+ 50% { transform: scale(1.1); }
46
+ 100% { transform: scale(1); }
47
+ }
48
+
49
+ .pulse {
50
+ animation: pulse 0.5s infinite;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4">
55
+ <div class="text-center mb-6">
56
+ <h1 class="text-4xl font-bold text-green-400 mb-2">🐍 Snake Game</h1>
57
+ <p class="text-gray-300">Use arrow keys or swipe to control the snake</p>
58
+ </div>
59
+
60
+ <div class="game-container relative">
61
+ <canvas id="gameCanvas" width="400" height="400"></canvas>
62
+
63
+ <div id="gameOverlay" class="game-overlay hidden">
64
+ <h2 class="text-4xl font-bold text-red-500 mb-4">Game Over!</h2>
65
+ <p class="text-xl mb-6">Your score: <span id="finalScore" class="text-green-400 font-bold">0</span></p>
66
+ <button id="restartBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
67
+ Play Again
68
+ </button>
69
+ </div>
70
+
71
+ <div id="startScreen" class="game-overlay flex">
72
+ <div class="text-center">
73
+ <h2 class="text-4xl font-bold text-green-400 mb-6 pulse">Ready to Play?</h2>
74
+ <button id="startBtn" 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">
75
+ Start Game
76
+ </button>
77
+ <div class="mt-8 text-left text-gray-300">
78
+ <p class="flex items-center mb-2"><span class="inline-block w-6 mr-2">🔼</span> Move Up</p>
79
+ <p class="flex items-center mb-2"><span class="inline-block w-6 mr-2">🔽</span> Move Down</p>
80
+ <p class="flex items-center mb-2"><span class="inline-block w-6 mr-2">◀️</span> Move Left</p>
81
+ <p class="flex items-center"><span class="inline-block w-6 mr-2">▶️</span> Move Right</p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="mt-6 flex justify-between w-full max-w-md">
88
+ <div class="bg-gray-800 p-4 rounded-lg text-center flex-1 mx-2">
89
+ <p class="text-gray-400">Score</p>
90
+ <p id="score" class="text-2xl font-bold text-green-400">0</p>
91
+ </div>
92
+ <div class="bg-gray-800 p-4 rounded-lg text-center flex-1 mx-2">
93
+ <p class="text-gray-400">High Score</p>
94
+ <p id="highScore" class="text-2xl font-bold text-yellow-400">0</p>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="mt-8 grid grid-cols-4 gap-2 md:hidden">
99
+ <button id="upBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-full transition-all">
100
+ ▲
101
+ </button>
102
+ <div class="col-span-2"></div>
103
+ <button id="leftBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-full transition-all">
104
+ ◀
105
+ </button>
106
+ <button id="downBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-full transition-all">
107
+ ▼
108
+ </button>
109
+ <button id="rightBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-full transition-all">
110
+ ▶
111
+ </button>
112
+ </div>
113
+
114
+ <script>
115
+ document.addEventListener('DOMContentLoaded', () => {
116
+ // Game variables
117
+ const canvas = document.getElementById('gameCanvas');
118
+ const ctx = canvas.getContext('2d');
119
+ const scoreElement = document.getElementById('score');
120
+ const highScoreElement = document.getElementById('highScore');
121
+ const gameOverlay = document.getElementById('gameOverlay');
122
+ const startScreen = document.getElementById('startScreen');
123
+ const finalScoreElement = document.getElementById('finalScore');
124
+ const restartBtn = document.getElementById('restartBtn');
125
+ const startBtn = document.getElementById('startBtn');
126
+
127
+ // Mobile controls
128
+ const upBtn = document.getElementById('upBtn');
129
+ const downBtn = document.getElementById('downBtn');
130
+ const leftBtn = document.getElementById('leftBtn');
131
+ const rightBtn = document.getElementById('rightBtn');
132
+
133
+ // Game settings
134
+ const gridSize = 20;
135
+ const tileCount = canvas.width / gridSize;
136
+ let speed = 7;
137
+
138
+ // Game state
139
+ let snake = [];
140
+ let food = {};
141
+ let direction = 'right';
142
+ let nextDirection = 'right';
143
+ let score = 0;
144
+ let highScore = localStorage.getItem('snakeHighScore') || 0;
145
+ let gameRunning = false;
146
+ let gameLoop;
147
+
148
+ // Initialize game
149
+ highScoreElement.textContent = highScore;
150
+
151
+ // Event listeners
152
+ document.addEventListener('keydown', changeDirection);
153
+ restartBtn.addEventListener('click', resetGame);
154
+ startBtn.addEventListener('click', startGame);
155
+
156
+ // Mobile controls
157
+ upBtn.addEventListener('click', () => changeDirection({keyCode: 38}));
158
+ downBtn.addEventListener('click', () => changeDirection({keyCode: 40}));
159
+ leftBtn.addEventListener('click', () => changeDirection({keyCode: 37}));
160
+ rightBtn.addEventListener('click', () => changeDirection({keyCode: 39}));
161
+
162
+ // Touch controls for swipe
163
+ let touchStartX = 0;
164
+ let touchStartY = 0;
165
+
166
+ canvas.addEventListener('touchstart', (e) => {
167
+ touchStartX = e.touches[0].clientX;
168
+ touchStartY = e.touches[0].clientY;
169
+ }, false);
170
+
171
+ canvas.addEventListener('touchmove', (e) => {
172
+ if (!touchStartX || !touchStartY) return;
173
+
174
+ const touchEndX = e.touches[0].clientX;
175
+ const touchEndY = e.touches[0].clientY;
176
+
177
+ const diffX = touchStartX - touchEndX;
178
+ const diffY = touchStartY - touchEndY;
179
+
180
+ if (Math.abs(diffX) > Math.abs(diffY)) {
181
+ // Horizontal swipe
182
+ if (diffX > 0 && direction !== 'right') {
183
+ nextDirection = 'left';
184
+ } else if (diffX < 0 && direction !== 'left') {
185
+ nextDirection = 'right';
186
+ }
187
+ } else {
188
+ // Vertical swipe
189
+ if (diffY > 0 && direction !== 'down') {
190
+ nextDirection = 'up';
191
+ } else if (diffY < 0 && direction !== 'up') {
192
+ nextDirection = 'down';
193
+ }
194
+ }
195
+
196
+ touchStartX = 0;
197
+ touchStartY = 0;
198
+ e.preventDefault();
199
+ }, false);
200
+
201
+ function startGame() {
202
+ startScreen.classList.add('hidden');
203
+ resetGame();
204
+ }
205
+
206
+ function resetGame() {
207
+ // Reset snake
208
+ snake = [];
209
+ for (let i = 3; i >= 0; i--) {
210
+ snake.push({x: i, y: 0});
211
+ }
212
+
213
+ // Reset game state
214
+ direction = 'right';
215
+ nextDirection = 'right';
216
+ score = 0;
217
+ scoreElement.textContent = score;
218
+ gameOverlay.classList.add('hidden');
219
+ gameRunning = true;
220
+
221
+ // Create first food
222
+ createFood();
223
+
224
+ // Start game loop
225
+ if (gameLoop) clearInterval(gameLoop);
226
+ gameLoop = setInterval(gameUpdate, 1000 / speed);
227
+ }
228
+
229
+ function gameUpdate() {
230
+ // Update direction
231
+ direction = nextDirection;
232
+
233
+ // Move snake
234
+ const head = {x: snake[0].x, y: snake[0].y};
235
+
236
+ switch (direction) {
237
+ case 'up':
238
+ head.y--;
239
+ break;
240
+ case 'down':
241
+ head.y++;
242
+ break;
243
+ case 'left':
244
+ head.x--;
245
+ break;
246
+ case 'right':
247
+ head.x++;
248
+ break;
249
+ }
250
+
251
+ // Check wall collision
252
+ if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
253
+ gameOver();
254
+ return;
255
+ }
256
+
257
+ // Check self collision
258
+ for (let i = 0; i < snake.length; i++) {
259
+ if (snake[i].x === head.x && snake[i].y === head.y) {
260
+ gameOver();
261
+ return;
262
+ }
263
+ }
264
+
265
+ // Check food collision
266
+ if (head.x === food.x && head.y === food.y) {
267
+ // Don't remove tail (snake grows)
268
+ createFood();
269
+ score++;
270
+ scoreElement.textContent = score;
271
+
272
+ // Increase speed slightly every 5 points
273
+ if (score % 5 === 0) {
274
+ speed += 0.5;
275
+ clearInterval(gameLoop);
276
+ gameLoop = setInterval(gameUpdate, 1000 / speed);
277
+ }
278
+ } else {
279
+ // Remove tail
280
+ snake.pop();
281
+ }
282
+
283
+ // Add new head
284
+ snake.unshift(head);
285
+
286
+ // Draw everything
287
+ drawGame();
288
+ }
289
+
290
+ function drawGame() {
291
+ // Clear canvas
292
+ ctx.fillStyle = '#1F2937';
293
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
294
+
295
+ // Draw grid lines
296
+ ctx.strokeStyle = '#374151';
297
+ ctx.lineWidth = 0.5;
298
+
299
+ for (let i = 0; i < tileCount; i++) {
300
+ // Vertical lines
301
+ ctx.beginPath();
302
+ ctx.moveTo(i * gridSize, 0);
303
+ ctx.lineTo(i * gridSize, canvas.height);
304
+ ctx.stroke();
305
+
306
+ // Horizontal lines
307
+ ctx.beginPath();
308
+ ctx.moveTo(0, i * gridSize);
309
+ ctx.lineTo(canvas.width, i * gridSize);
310
+ ctx.stroke();
311
+ }
312
+
313
+ // Draw snake
314
+ snake.forEach((segment, index) => {
315
+ // Head is different color
316
+ if (index === 0) {
317
+ ctx.fillStyle = '#10B981'; // Head color
318
+ } else {
319
+ // Gradient body color
320
+ const hue = 120 - (index * 2);
321
+ ctx.fillStyle = `hsl(${hue}, 80%, 50%)`;
322
+ }
323
+
324
+ ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 1, gridSize - 1);
325
+
326
+ // Add eyes to head
327
+ if (index === 0) {
328
+ ctx.fillStyle = 'white';
329
+ // Eye positions based on direction
330
+ if (direction === 'right') {
331
+ ctx.fillRect((segment.x * gridSize) + 12, (segment.y * gridSize) + 4, 4, 4);
332
+ ctx.fillRect((segment.x * gridSize) + 12, (segment.y * gridSize) + 12, 4, 4);
333
+ } else if (direction === 'left') {
334
+ ctx.fillRect((segment.x * gridSize) + 4, (segment.y * gridSize) + 4, 4, 4);
335
+ ctx.fillRect((segment.x * gridSize) + 4, (segment.y * gridSize) + 12, 4, 4);
336
+ } else if (direction === 'up') {
337
+ ctx.fillRect((segment.x * gridSize) + 4, (segment.y * gridSize) + 4, 4, 4);
338
+ ctx.fillRect((segment.x * gridSize) + 12, (segment.y * gridSize) + 4, 4, 4);
339
+ } else if (direction === 'down') {
340
+ ctx.fillRect((segment.x * gridSize) + 4, (segment.y * gridSize) + 12, 4, 4);
341
+ ctx.fillRect((segment.x * gridSize) + 12, (segment.y * gridSize) + 12, 4, 4);
342
+ }
343
+ }
344
+ });
345
+
346
+ // Draw food
347
+ ctx.fillStyle = '#EF4444';
348
+ ctx.beginPath();
349
+ const centerX = (food.x * gridSize) + (gridSize / 2);
350
+ const centerY = (food.y * gridSize) + (gridSize / 2);
351
+ const radius = (gridSize / 2) - 2;
352
+ ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
353
+ ctx.fill();
354
+
355
+ // Add shine to food
356
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
357
+ ctx.beginPath();
358
+ ctx.arc(centerX - 3, centerY - 3, 3, 0, Math.PI * 2);
359
+ ctx.fill();
360
+ }
361
+
362
+ function createFood() {
363
+ food = {
364
+ x: Math.floor(Math.random() * tileCount),
365
+ y: Math.floor(Math.random() * tileCount)
366
+ };
367
+
368
+ // Make sure food doesn't appear on snake
369
+ for (let i = 0; i < snake.length; i++) {
370
+ if (snake[i].x === food.x && snake[i].y === food.y) {
371
+ createFood();
372
+ return;
373
+ }
374
+ }
375
+ }
376
+
377
+ function changeDirection(e) {
378
+ // Prevent opposite direction movement
379
+ switch (e.keyCode) {
380
+ case 37: // Left
381
+ if (direction !== 'right') nextDirection = 'left';
382
+ break;
383
+ case 38: // Up
384
+ if (direction !== 'down') nextDirection = 'up';
385
+ break;
386
+ case 39: // Right
387
+ if (direction !== 'left') nextDirection = 'right';
388
+ break;
389
+ case 40: // Down
390
+ if (direction !== 'up') nextDirection = 'down';
391
+ break;
392
+ }
393
+ }
394
+
395
+ function gameOver() {
396
+ gameRunning = false;
397
+ clearInterval(gameLoop);
398
+
399
+ // Update high score
400
+ if (score > highScore) {
401
+ highScore = score;
402
+ highScoreElement.textContent = highScore;
403
+ localStorage.setItem('snakeHighScore', highScore);
404
+ }
405
+
406
+ finalScoreElement.textContent = score;
407
+ gameOverlay.classList.remove('hidden');
408
+ }
409
+
410
+ // Initial draw
411
+ drawGame();
412
+ });
413
+ </script>
414
+ <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=Ibrokhim1263/https-huggingface-co-ibrokhim1263" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
415
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ can u make me snake game