Hugging Face's logo

Spaces:
x3v
/
snake-game
Running

App Files Community
x3v commited on
Commit
1d9042b
·
verified ·
1 Parent(s): 7b9c6f5

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +353 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Snake Game
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: green
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: snake-game
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
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,353 @@
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
+ @keyframes pulse {
10
+ 0%, 100% { transform: scale(1); }
11
+ 50% { transform: scale(1.05); }
12
+ }
13
+
14
+ .pulse-animation {
15
+ animation: pulse 1.5s infinite;
16
+ }
17
+
18
+ .game-over {
19
+ background-color: rgba(239, 68, 68, 0.9);
20
+ }
21
+
22
+ .snake-head {
23
+ background-color: #10b981;
24
+ border-radius: 30%;
25
+ z-index: 10;
26
+ }
27
+
28
+ .snake-body {
29
+ background-color: #34d399;
30
+ border-radius: 40%;
31
+ }
32
+
33
+ .food {
34
+ background-color: #ef4444;
35
+ border-radius: 50%;
36
+ box-shadow: 0 0 10px #ef4444;
37
+ }
38
+
39
+ .grid-cell {
40
+ transition: background-color 0.1s ease;
41
+ }
42
+
43
+ @media (max-width: 640px) {
44
+ .controls {
45
+ display: grid !important;
46
+ }
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
51
+ <div class="max-w-4xl w-full">
52
+ <div class="flex justify-between items-center mb-4">
53
+ <h1 class="text-3xl md:text-4xl font-bold text-green-400">🐍 Snake Game</h1>
54
+ <div class="flex items-center space-x-4">
55
+ <div class="bg-gray-800 px-4 py-2 rounded-lg">
56
+ <span class="text-gray-300">Score:</span>
57
+ <span id="score" class="text-white font-bold ml-2">0</span>
58
+ </div>
59
+ <div class="bg-gray-800 px-4 py-2 rounded-lg">
60
+ <span class="text-gray-300">High:</span>
61
+ <span id="high-score" class="text-white font-bold ml-2">0</span>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="relative">
67
+ <div id="game-board" class="bg-gray-800 rounded-lg overflow-hidden border-2 border-gray-700 shadow-lg mx-auto"
68
+ style="width: 400px; height: 400px; display: grid; grid-template-rows: repeat(20, 1fr); grid-template-columns: repeat(20, 1fr);">
69
+ <!-- Game grid will be generated by JavaScript -->
70
+ </div>
71
+
72
+ <div id="game-over" class="absolute inset-0 flex flex-col items-center justify-center bg-opacity-90 rounded-lg hidden game-over">
73
+ <h2 class="text-4xl font-bold mb-4">Game Over!</h2>
74
+ <p class="text-xl mb-6">Your score: <span id="final-score" class="font-bold">0</span></p>
75
+ <button id="restart-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full transition duration-200 pulse-animation">
76
+ Play Again
77
+ </button>
78
+ </div>
79
+
80
+ <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-800 bg-opacity-90 rounded-lg">
81
+ <h2 class="text-4xl font-bold mb-6 text-green-400">Snake Game</h2>
82
+ <p class="text-gray-300 mb-8 text-center px-4">Use arrow keys or buttons to control the snake. Eat the red food to grow!</p>
83
+ <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full transition duration-200 pulse-animation">
84
+ Start Game
85
+ </button>
86
+ </div>
87
+ </div>
88
+
89
+ <div class="mt-6 flex justify-center">
90
+ <div class="controls hidden md:flex space-x-4">
91
+ <button id="up-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
92
+ ↑
93
+ </button>
94
+ <div class="flex flex-col space-y-4">
95
+ <button id="left-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
96
+ ←
97
+ </button>
98
+ <button id="right-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
99
+ →
100
+ </button>
101
+ </div>
102
+ <button id="down-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg transition duration-200">
103
+ ↓
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="mt-8 text-center text-gray-400">
109
+ <p>Press spacebar to pause/resume the game</p>
110
+ </div>
111
+ </div>
112
+
113
+ <script>
114
+ document.addEventListener('DOMContentLoaded', () => {
115
+ // Game variables
116
+ const GRID_SIZE = 20;
117
+ const gameBoard = document.getElementById('game-board');
118
+ const scoreDisplay = document.getElementById('score');
119
+ const highScoreDisplay = document.getElementById('high-score');
120
+ const finalScoreDisplay = document.getElementById('final-score');
121
+ const gameOverScreen = document.getElementById('game-over');
122
+ const startScreen = document.getElementById('start-screen');
123
+ const startBtn = document.getElementById('start-btn');
124
+ const restartBtn = document.getElementById('restart-btn');
125
+ const upBtn = document.getElementById('up-btn');
126
+ const downBtn = document.getElementById('down-btn');
127
+ const leftBtn = document.getElementById('left-btn');
128
+ const rightBtn = document.getElementById('right-btn');
129
+
130
+ let snake = [{x: 10, y: 10}];
131
+ let food = generateFood();
132
+ let direction = 'right';
133
+ let nextDirection = 'right';
134
+ let gameSpeed = 150;
135
+ let score = 0;
136
+ let highScore = localStorage.getItem('snakeHighScore') || 0;
137
+ let gameInterval;
138
+ let isPaused = false;
139
+ let isGameOver = false;
140
+
141
+ highScoreDisplay.textContent = highScore;
142
+
143
+ // Create game grid
144
+ function createGrid() {
145
+ gameBoard.innerHTML = '';
146
+ for (let i = 0; i < GRID_SIZE; i++) {
147
+ for (let j = 0; j < GRID_SIZE; j++) {
148
+ const cell = document.createElement('div');
149
+ cell.classList.add('grid-cell', 'border', 'border-gray-700');
150
+ cell.style.gridRow = i + 1;
151
+ cell.style.gridColumn = j + 1;
152
+ gameBoard.appendChild(cell);
153
+ }
154
+ }
155
+ }
156
+
157
+ // Generate food at random position
158
+ function generateFood() {
159
+ let newFood;
160
+ while (!newFood || isOnSnake(newFood)) {
161
+ newFood = {
162
+ x: Math.floor(Math.random() * GRID_SIZE),
163
+ y: Math.floor(Math.random() * GRID_SIZE)
164
+ };
165
+ }
166
+ return newFood;
167
+ }
168
+
169
+ // Check if position is occupied by snake
170
+ function isOnSnake(position) {
171
+ return snake.some(segment => segment.x === position.x && segment.y === position.y);
172
+ }
173
+
174
+ // Draw game state
175
+ function draw() {
176
+ // Clear board
177
+ const cells = document.querySelectorAll('.grid-cell');
178
+ cells.forEach(cell => {
179
+ cell.className = 'grid-cell border border-gray-700';
180
+ });
181
+
182
+ // Draw snake
183
+ snake.forEach((segment, index) => {
184
+ const cellIndex = segment.y * GRID_SIZE + segment.x;
185
+ if (cells[cellIndex]) {
186
+ if (index === 0) {
187
+ cells[cellIndex].classList.add('snake-head');
188
+ } else {
189
+ cells[cellIndex].classList.add('snake-body');
190
+ }
191
+ }
192
+ });
193
+
194
+ // Draw food
195
+ const foodIndex = food.y * GRID_SIZE + food.x;
196
+ if (cells[foodIndex]) {
197
+ cells[foodIndex].classList.add('food');
198
+ }
199
+ }
200
+
201
+ // Update game state
202
+ function update() {
203
+ if (isPaused || isGameOver) return;
204
+
205
+ direction = nextDirection;
206
+
207
+ // Move snake
208
+ const head = {...snake[0]};
209
+
210
+ switch (direction) {
211
+ case 'up':
212
+ head.y--;
213
+ break;
214
+ case 'down':
215
+ head.y++;
216
+ break;
217
+ case 'left':
218
+ head.x--;
219
+ break;
220
+ case 'right':
221
+ head.x++;
222
+ break;
223
+ }
224
+
225
+ // Check collision with walls
226
+ if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
227
+ gameOver();
228
+ return;
229
+ }
230
+
231
+ // Check collision with self
232
+ if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
233
+ gameOver();
234
+ return;
235
+ }
236
+
237
+ snake.unshift(head);
238
+
239
+ // Check if snake ate food
240
+ if (head.x === food.x && head.y === food.y) {
241
+ score += 10;
242
+ scoreDisplay.textContent = score;
243
+ food = generateFood();
244
+
245
+ // Increase speed slightly as score increases
246
+ if (score % 50 === 0 && gameSpeed > 70) {
247
+ gameSpeed -= 5;
248
+ clearInterval(gameInterval);
249
+ gameInterval = setInterval(update, gameSpeed);
250
+ }
251
+ } else {
252
+ snake.pop();
253
+ }
254
+
255
+ draw();
256
+ }
257
+
258
+ // Game over
259
+ function gameOver() {
260
+ isGameOver = true;
261
+ clearInterval(gameInterval);
262
+
263
+ // Update high score
264
+ if (score > highScore) {
265
+ highScore = score;
266
+ localStorage.setItem('snakeHighScore', highScore);
267
+ highScoreDisplay.textContent = highScore;
268
+ }
269
+
270
+ finalScoreDisplay.textContent = score;
271
+ gameOverScreen.classList.remove('hidden');
272
+ }
273
+
274
+ // Start game
275
+ function startGame() {
276
+ snake = [{x: 10, y: 10}];
277
+ food = generateFood();
278
+ direction = 'right';
279
+ nextDirection = 'right';
280
+ score = 0;
281
+ scoreDisplay.textContent = score;
282
+ gameSpeed = 150;
283
+ isPaused = false;
284
+ isGameOver = false;
285
+
286
+ startScreen.classList.add('hidden');
287
+ gameOverScreen.classList.add('hidden');
288
+
289
+ createGrid();
290
+ draw();
291
+
292
+ clearInterval(gameInterval);
293
+ gameInterval = setInterval(update, gameSpeed);
294
+ }
295
+
296
+ // Event listeners
297
+ document.addEventListener('keydown', (e) => {
298
+ switch (e.key) {
299
+ case 'ArrowUp':
300
+ if (direction !== 'down') nextDirection = 'up';
301
+ e.preventDefault();
302
+ break;
303
+ case 'ArrowDown':
304
+ if (direction !== 'up') nextDirection = 'down';
305
+ e.preventDefault();
306
+ break;
307
+ case 'ArrowLeft':
308
+ if (direction !== 'right') nextDirection = 'left';
309
+ e.preventDefault();
310
+ break;
311
+ case 'ArrowRight':
312
+ if (direction !== 'left') nextDirection = 'right';
313
+ e.preventDefault();
314
+ break;
315
+ case ' ':
316
+ if (!isGameOver) {
317
+ isPaused = !isPaused;
318
+ if (isPaused) {
319
+ clearInterval(gameInterval);
320
+ } else {
321
+ gameInterval = setInterval(update, gameSpeed);
322
+ }
323
+ }
324
+ break;
325
+ }
326
+ });
327
+
328
+ startBtn.addEventListener('click', startGame);
329
+ restartBtn.addEventListener('click', startGame);
330
+
331
+ upBtn.addEventListener('click', () => {
332
+ if (direction !== 'down') nextDirection = 'up';
333
+ });
334
+
335
+ downBtn.addEventListener('click', () => {
336
+ if (direction !== 'up') nextDirection = 'down';
337
+ });
338
+
339
+ leftBtn.addEventListener('click', () => {
340
+ if (direction !== 'right') nextDirection = 'left';
341
+ });
342
+
343
+ rightBtn.addEventListener('click', () => {
344
+ if (direction !== 'left') nextDirection = 'right';
345
+ });
346
+
347
+ // Initialize
348
+ createGrid();
349
+ draw();
350
+ });
351
+ </script>
352
+ <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=x3v/snake-game" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
353
+ </html>