Hugging Face's logo

Spaces:
blackeeee
/
slithering-snake-saga
Running

App Files Community
blackeeee commited on
Commit
cf29d38
·
verified ·
1 Parent(s): ef422a7

по принципу mcp разбей

Browse files
Files changed (4) hide show
  1. game.html +46 -0
  2. game.js +257 -0
  3. index.html +18 -319
  4. styles.css +33 -0
game.html ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Slithering Snake Saga - Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="styles.css">
9
+ </head>
10
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
11
+ <div class="game-container">
12
+ <canvas id="gameCanvas" width="400" height="400"></canvas>
13
+ <div class="controls">
14
+ <button id="upBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
15
+ ↑
16
+ </button>
17
+ <div class="flex flex-col gap-2">
18
+ <button id="leftBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
19
+ ←
20
+ </button>
21
+ <button id="rightBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
22
+ →
23
+ </button>
24
+ </div>
25
+ <button id="downBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
26
+ ↓
27
+ </button>
28
+ </div>
29
+ </div>
30
+
31
+ <div class="mt-6 flex gap-4 items-center">
32
+ <div class="bg-gray-800 p-3 rounded-lg">
33
+ <span class="text-green-400 font-bold">Score: </span>
34
+ <span id="score" class="text-white">0</span>
35
+ </div>
36
+ <button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg">
37
+ Start Game
38
+ </button>
39
+ <button id="resetBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg">
40
+ Reset
41
+ </button>
42
+ </div>
43
+
44
+ <script src="game.js"></script>
45
+ </body>
46
+ </html>
game.js ADDED
@@ -0,0 +1,257 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```javascript
2
+ document.addEventListener('DOMContentLoaded', () => {
3
+ const canvas = document.getElementById('gameCanvas');
4
+ const ctx = canvas.getContext('2d');
5
+ const scoreElement = document.getElementById('score');
6
+ const startBtn = document.getElementById('startBtn');
7
+ const resetBtn = document.getElementById('resetBtn');
8
+ const upBtn = document.getElementById('upBtn');
9
+ const downBtn = document.getElementById('downBtn');
10
+ const leftBtn = document.getElementById('leftBtn');
11
+ const rightBtn = document.getElementById('rightBtn');
12
+
13
+ // Game variables
14
+ let snake = [];
15
+ let food = {};
16
+ let direction = 'right';
17
+ let nextDirection = 'right';
18
+ let gameSpeed = 150;
19
+ let score = 0;
20
+ let gameInterval;
21
+ let gameRunning = false;
22
+ const gridSize = 20;
23
+ const tileCount = canvas.width / gridSize;
24
+
25
+ // Initialize game
26
+ function initGame() {
27
+ snake = [];
28
+ for (let i = 3; i >= 0; i--) {
29
+ snake.push({ x: i * gridSize, y: 0 });
30
+ }
31
+
32
+ generateFood();
33
+ score = 0;
34
+ scoreElement.textContent = score;
35
+ direction = 'right';
36
+ nextDirection = 'right';
37
+
38
+ if (gameRunning) {
39
+ clearInterval(gameInterval);
40
+ gameInterval = setInterval(gameLoop, gameSpeed);
41
+ }
42
+
43
+ drawGame();
44
+ }
45
+
46
+ // Generate food at random position
47
+ function generateFood() {
48
+ food = {
49
+ x: Math.floor(Math.random() * tileCount) * gridSize,
50
+ y: Math.floor(Math.random() * tileCount) * gridSize
51
+ };
52
+
53
+ // Make sure food doesn't spawn on snake
54
+ for (let segment of snake) {
55
+ if (segment.x === food.x && segment.y === food.y) {
56
+ return generateFood();
57
+ }
58
+ }
59
+ }
60
+
61
+ // Main game loop
62
+ function gameLoop() {
63
+ moveSnake();
64
+ checkCollision();
65
+ drawGame();
66
+ }
67
+
68
+ // Move the snake
69
+ function moveSnake() {
70
+ direction = nextDirection;
71
+
72
+ // Calculate new head position
73
+ const head = { x: snake[0].x, y: snake[0].y };
74
+
75
+ switch (direction) {
76
+ case 'up':
77
+ head.y -= gridSize;
78
+ break;
79
+ case 'down':
80
+ head.y += gridSize;
81
+ break;
82
+ case 'left':
83
+ head.x -= gridSize;
84
+ break;
85
+ case 'right':
86
+ head.x += gridSize;
87
+ break;
88
+ }
89
+
90
+ // Add new head
91
+ snake.unshift(head);
92
+
93
+ // Check if snake ate food
94
+ if (head.x === food.x && head.y === food.y) {
95
+ score++;
96
+ scoreElement.textContent = score;
97
+ generateFood();
98
+
99
+ // Increase speed every 5 points
100
+ if (score % 5 === 0) {
101
+ gameSpeed = Math.max(50, gameSpeed - 10);
102
+ clearInterval(gameInterval);
103
+ gameInterval = setInterval(gameLoop, gameSpeed);
104
+ }
105
+ } else {
106
+ // Remove tail if no food eaten
107
+ snake.pop();
108
+ }
109
+ }
110
+
111
+ // Check for collisions
112
+ function checkCollision() {
113
+ const head = snake[0];
114
+
115
+ // Wall collision
116
+ if (
117
+ head.x < 0 || head.x >= canvas.width ||
118
+ head.y < 0 || head.y >= canvas.height
119
+ ) {
120
+ gameOver();
121
+ }
122
+
123
+ // Self collision
124
+ for (let i = 1; i < snake.length; i++) {
125
+ if (head.x === snake[i].x && head.y === snake[i].y) {
126
+ gameOver();
127
+ }
128
+ }
129
+ }
130
+
131
+ // Game over
132
+ function gameOver() {
133
+ clearInterval(gameInterval);
134
+ gameRunning = false;
135
+ startBtn.textContent = 'Restart Game';
136
+ alert(`Game Over! Your score: ${score}`);
137
+ }
138
+
139
+ // Draw game elements
140
+ function drawGame() {
141
+ // Clear canvas
142
+ ctx.fillStyle = '#111827';
143
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
144
+
145
+ // Draw snake
146
+ snake.forEach((segment, index) => {
147
+ const gradient = ctx.createLinearGradient(segment.x, segment.y, segment.x + gridSize, segment.y + gridSize);
148
+
149
+ if (index === 0) {
150
+ // Head - brighter green
151
+ gradient.addColorStop(0, '#4ade80');
152
+ gradient.addColorStop(1, '#22c55e');
153
+ } else {
154
+ // Body - darker green
155
+ gradient.addColorStop(0, '#16a34a');
156
+ gradient.addColorStop(1, '#15803d');
157
+ }
158
+
159
+ ctx.fillStyle = gradient;
160
+ ctx.fillRect(segment.x, segment.y, gridSize - 1, gridSize - 1);
161
+
162
+ // Add eyes to head
163
+ if (index === 0) {
164
+ ctx.fillStyle = 'white';
165
+ // Right eye
166
+ if (direction === 'right') {
167
+ ctx.fillRect(segment.x + 12, segment.y + 5, 3, 3);
168
+ ctx.fillRect(segment.x + 12, segment.y + 12, 3, 3);
169
+ }
170
+ // Left eye
171
+ else if (direction === 'left') {
172
+ ctx.fillRect(segment.x + 5, segment.y + 5, 3, 3);
173
+ ctx.fillRect(segment.x + 5, segment.y + 12, 3, 3);
174
+ }
175
+ // Up eye
176
+ else if (direction === 'up') {
177
+ ctx.fillRect(segment.x + 5, segment.y + 5, 3, 3);
178
+ ctx.fillRect(segment.x + 12, segment.y + 5, 3, 3);
179
+ }
180
+ // Down eye
181
+ else if (direction === 'down') {
182
+ ctx.fillRect(segment.x + 5, segment.y + 12, 3, 3);
183
+ ctx.fillRect(segment.x + 12, segment.y + 12, 3, 3);
184
+ }
185
+ }
186
+ });
187
+
188
+ // Draw food
189
+ const foodGradient = ctx.createRadialGradient(
190
+ food.x + gridSize/2, food.y + gridSize/2, 0,
191
+ food.x + gridSize/2, food.y + gridSize/2, gridSize/2
192
+ );
193
+ foodGradient.addColorStop(0, '#ef4444');
194
+ foodGradient.addColorStop(1, '#dc2626');
195
+ ctx.fillStyle = foodGradient;
196
+ ctx.beginPath();
197
+ ctx.arc(food.x + gridSize/2, food.y + gridSize/2, gridSize/2 - 1, 0, Math.PI * 2);
198
+ ctx.fill();
199
+ }
200
+
201
+ // Event listeners
202
+ startBtn.addEventListener('click', () => {
203
+ if (!gameRunning) {
204
+ gameRunning = true;
205
+ startBtn.textContent = 'Pause';
206
+ initGame();
207
+ gameInterval = setInterval(gameLoop, gameSpeed);
208
+ } else {
209
+ gameRunning = false;
210
+ clearInterval(gameInterval);
211
+ startBtn.textContent = 'Resume';
212
+ }
213
+ });
214
+
215
+ resetBtn.addEventListener('click', () => {
216
+ clearInterval(gameInterval);
217
+ gameRunning = false;
218
+ startBtn.textContent = 'Start Game';
219
+ initGame();
220
+ });
221
+
222
+ // Keyboard controls
223
+ document.addEventListener('keydown', (e) => {
224
+ switch (e.key) {
225
+ case 'ArrowUp':
226
+ if (direction !== 'down') nextDirection = 'up';
227
+ break;
228
+ case 'ArrowDown':
229
+ if (direction !== 'up') nextDirection = 'down';
230
+ break;
231
+ case 'ArrowLeft':
232
+ if (direction !== 'right') nextDirection = 'left';
233
+ break;
234
+ case 'ArrowRight':
235
+ if (direction !== 'left') nextDirection = 'right';
236
+ break;
237
+ }
238
+ });
239
+
240
+ // Touch controls
241
+ upBtn.addEventListener('click', () => {
242
+ if (direction !== 'down') nextDirection = 'up';
243
+ });
244
+ downBtn.addEventListener('click', () => {
245
+ if (direction !== 'up') nextDirection = 'down';
246
+ });
247
+ leftBtn.addEventListener('click', () => {
248
+ if (direction !== 'right') nextDirection = 'left';
249
+ });
250
+ rightBtn.addEventListener('click', () => {
251
+ if (direction !== 'left') nextDirection = 'right';
252
+ });
253
+
254
+ // Initialize game state
255
+ initGame();
256
+ });
257
+ ```
index.html CHANGED
@@ -5,331 +5,30 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Slithering Snake Saga</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <style>
9
- body {
10
- overflow: hidden;
11
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
- }
13
- canvas {
14
- display: block;
15
- margin: 0 auto;
16
- background-color: #111827;
17
- border-radius: 0.5rem;
18
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
19
- }
20
- .game-container {
21
- position: relative;
22
- }
23
- .controls {
24
- position: absolute;
25
- bottom: 20px;
26
- width: 100%;
27
- display: none;
28
- justify-content: center;
29
- gap: 10px;
30
- }
31
- @media (max-width: 768px) {
32
- .controls {
33
- display: flex;
34
- }
35
- }
36
- </style>
37
  </head>
38
  <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
39
  <div class="text-center mb-6">
40
  <h1 class="text-4xl font-bold text-green-400 mb-2">Slithering Snake Saga</h1>
41
- <p class="text-gray-300">Use arrow keys or tap buttons to control the snake</p>
42
  </div>
43
 
44
- <div class="game-container">
45
- <canvas id="gameCanvas" width="400" height="400"></canvas>
46
- <div class="controls">
47
- <button id="upBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
48
- ↑
49
- </button>
50
- <div class="flex flex-col gap-2">
51
- <button id="leftBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
52
- ←
53
- </button>
54
- <button id="rightBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
55
- →
56
- </button>
57
- </div>
58
- <button id="downBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-6 rounded-full">
59
- ↓
60
- </button>
61
  </div>
62
  </div>
63
-
64
- <div class="mt-6 flex gap-4 items-center">
65
- <div class="bg-gray-800 p-3 rounded-lg">
66
- <span class="text-green-400 font-bold">Score: </span>
67
- <span id="score" class="text-white">0</span>
68
- </div>
69
- <button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg">
70
- Start Game
71
- </button>
72
- <button id="resetBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg">
73
- Reset
74
- </button>
75
- </div>
76
-
77
- <script>
78
- document.addEventListener('DOMContentLoaded', () => {
79
- const canvas = document.getElementById('gameCanvas');
80
- const ctx = canvas.getContext('2d');
81
- const scoreElement = document.getElementById('score');
82
- const startBtn = document.getElementById('startBtn');
83
- const resetBtn = document.getElementById('resetBtn');
84
- const upBtn = document.getElementById('upBtn');
85
- const downBtn = document.getElementById('downBtn');
86
- const leftBtn = document.getElementById('leftBtn');
87
- const rightBtn = document.getElementById('rightBtn');
88
-
89
- // Game variables
90
- let snake = [];
91
- let food = {};
92
- let direction = 'right';
93
- let nextDirection = 'right';
94
- let gameSpeed = 150;
95
- let score = 0;
96
- let gameInterval;
97
- let gameRunning = false;
98
- const gridSize = 20;
99
- const tileCount = canvas.width / gridSize;
100
-
101
- // Initialize game
102
- function initGame() {
103
- snake = [];
104
- for (let i = 3; i >= 0; i--) {
105
- snake.push({ x: i * gridSize, y: 0 });
106
- }
107
-
108
- generateFood();
109
- score = 0;
110
- scoreElement.textContent = score;
111
- direction = 'right';
112
- nextDirection = 'right';
113
-
114
- if (gameRunning) {
115
- clearInterval(gameInterval);
116
- gameInterval = setInterval(gameLoop, gameSpeed);
117
- }
118
-
119
- drawGame();
120
- }
121
-
122
- // Generate food at random position
123
- function generateFood() {
124
- food = {
125
- x: Math.floor(Math.random() * tileCount) * gridSize,
126
- y: Math.floor(Math.random() * tileCount) * gridSize
127
- };
128
-
129
- // Make sure food doesn't spawn on snake
130
- for (let segment of snake) {
131
- if (segment.x === food.x && segment.y === food.y) {
132
- return generateFood();
133
- }
134
- }
135
- }
136
-
137
- // Main game loop
138
- function gameLoop() {
139
- moveSnake();
140
- checkCollision();
141
- drawGame();
142
- }
143
-
144
- // Move the snake
145
- function moveSnake() {
146
- direction = nextDirection;
147
-
148
- // Calculate new head position
149
- const head = { x: snake[0].x, y: snake[0].y };
150
-
151
- switch (direction) {
152
- case 'up':
153
- head.y -= gridSize;
154
- break;
155
- case 'down':
156
- head.y += gridSize;
157
- break;
158
- case 'left':
159
- head.x -= gridSize;
160
- break;
161
- case 'right':
162
- head.x += gridSize;
163
- break;
164
- }
165
-
166
- // Add new head
167
- snake.unshift(head);
168
-
169
- // Check if snake ate food
170
- if (head.x === food.x && head.y === food.y) {
171
- score++;
172
- scoreElement.textContent = score;
173
- generateFood();
174
-
175
- // Increase speed every 5 points
176
- if (score % 5 === 0) {
177
- gameSpeed = Math.max(50, gameSpeed - 10);
178
- clearInterval(gameInterval);
179
- gameInterval = setInterval(gameLoop, gameSpeed);
180
- }
181
- } else {
182
- // Remove tail if no food eaten
183
- snake.pop();
184
- }
185
- }
186
-
187
- // Check for collisions
188
- function checkCollision() {
189
- const head = snake[0];
190
-
191
- // Wall collision
192
- if (
193
- head.x < 0 || head.x >= canvas.width ||
194
- head.y < 0 || head.y >= canvas.height
195
- ) {
196
- gameOver();
197
- }
198
-
199
- // Self collision
200
- for (let i = 1; i < snake.length; i++) {
201
- if (head.x === snake[i].x && head.y === snake[i].y) {
202
- gameOver();
203
- }
204
- }
205
- }
206
-
207
- // Game over
208
- function gameOver() {
209
- clearInterval(gameInterval);
210
- gameRunning = false;
211
- startBtn.textContent = 'Restart Game';
212
- alert(`Game Over! Your score: ${score}`);
213
- }
214
-
215
- // Draw game elements
216
- function drawGame() {
217
- // Clear canvas
218
- ctx.fillStyle = '#111827';
219
- ctx.fillRect(0, 0, canvas.width, canvas.height);
220
-
221
- // Draw snake
222
- snake.forEach((segment, index) => {
223
- const gradient = ctx.createLinearGradient(segment.x, segment.y, segment.x + gridSize, segment.y + gridSize);
224
-
225
- if (index === 0) {
226
- // Head - brighter green
227
- gradient.addColorStop(0, '#4ade80');
228
- gradient.addColorStop(1, '#22c55e');
229
- } else {
230
- // Body - darker green
231
- gradient.addColorStop(0, '#16a34a');
232
- gradient.addColorStop(1, '#15803d');
233
- }
234
-
235
- ctx.fillStyle = gradient;
236
- ctx.fillRect(segment.x, segment.y, gridSize - 1, gridSize - 1);
237
-
238
- // Add eyes to head
239
- if (index === 0) {
240
- ctx.fillStyle = 'white';
241
- // Right eye
242
- if (direction === 'right') {
243
- ctx.fillRect(segment.x + 12, segment.y + 5, 3, 3);
244
- ctx.fillRect(segment.x + 12, segment.y + 12, 3, 3);
245
- }
246
- // Left eye
247
- else if (direction === 'left') {
248
- ctx.fillRect(segment.x + 5, segment.y + 5, 3, 3);
249
- ctx.fillRect(segment.x + 5, segment.y + 12, 3, 3);
250
- }
251
- // Up eye
252
- else if (direction === 'up') {
253
- ctx.fillRect(segment.x + 5, segment.y + 5, 3, 3);
254
- ctx.fillRect(segment.x + 12, segment.y + 5, 3, 3);
255
- }
256
- // Down eye
257
- else if (direction === 'down') {
258
- ctx.fillRect(segment.x + 5, segment.y + 12, 3, 3);
259
- ctx.fillRect(segment.x + 12, segment.y + 12, 3, 3);
260
- }
261
- }
262
- });
263
-
264
- // Draw food
265
- const foodGradient = ctx.createRadialGradient(
266
- food.x + gridSize/2, food.y + gridSize/2, 0,
267
- food.x + gridSize/2, food.y + gridSize/2, gridSize/2
268
- );
269
- foodGradient.addColorStop(0, '#ef4444');
270
- foodGradient.addColorStop(1, '#dc2626');
271
- ctx.fillStyle = foodGradient;
272
- ctx.beginPath();
273
- ctx.arc(food.x + gridSize/2, food.y + gridSize/2, gridSize/2 - 1, 0, Math.PI * 2);
274
- ctx.fill();
275
- }
276
-
277
- // Event listeners
278
- startBtn.addEventListener('click', () => {
279
- if (!gameRunning) {
280
- gameRunning = true;
281
- startBtn.textContent = 'Pause';
282
- initGame();
283
- gameInterval = setInterval(gameLoop, gameSpeed);
284
- } else {
285
- gameRunning = false;
286
- clearInterval(gameInterval);
287
- startBtn.textContent = 'Resume';
288
- }
289
- });
290
-
291
- resetBtn.addEventListener('click', () => {
292
- clearInterval(gameInterval);
293
- gameRunning = false;
294
- startBtn.textContent = 'Start Game';
295
- initGame();
296
- });
297
-
298
- // Keyboard controls
299
- document.addEventListener('keydown', (e) => {
300
- switch (e.key) {
301
- case 'ArrowUp':
302
- if (direction !== 'down') nextDirection = 'up';
303
- break;
304
- case 'ArrowDown':
305
- if (direction !== 'up') nextDirection = 'down';
306
- break;
307
- case 'ArrowLeft':
308
- if (direction !== 'right') nextDirection = 'left';
309
- break;
310
- case 'ArrowRight':
311
- if (direction !== 'left') nextDirection = 'right';
312
- break;
313
- }
314
- });
315
-
316
- // Touch controls
317
- upBtn.addEventListener('click', () => {
318
- if (direction !== 'down') nextDirection = 'up';
319
- });
320
- downBtn.addEventListener('click', () => {
321
- if (direction !== 'up') nextDirection = 'down';
322
- });
323
- leftBtn.addEventListener('click', () => {
324
- if (direction !== 'right') nextDirection = 'left';
325
- });
326
- rightBtn.addEventListener('click', () => {
327
- if (direction !== 'left') nextDirection = 'right';
328
- });
329
-
330
- // Initialize game state
331
- initGame();
332
- });
333
- </script>
334
  </body>
335
- </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Slithering Snake Saga</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="styles.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
11
  <div class="text-center mb-6">
12
  <h1 class="text-4xl font-bold text-green-400 mb-2">Slithering Snake Saga</h1>
13
+ <p class="text-gray-300">Classic snake game with modern twist</p>
14
  </div>
15
 
16
+ <div class="flex flex-col items-center gap-6">
17
+ <img src="http://static.photos/gaming/640x360/42" alt="Snake Game" class="rounded-lg shadow-xl w-full max-w-md">
18
+
19
+ <a href="game.html" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all">
20
+ Play Now
21
+ </a>
22
+
23
+ <div class="bg-gray-800 p-4 rounded-lg max-w-md">
24
+ <h2 class="text-xl font-bold text-green-400 mb-2">How to Play</h2>
25
+ <ul class="text-left space-y-2">
26
+ <li>Use arrow keys to control the snake</li>
27
+ <li>Eat the red food to grow longer</li>
28
+ <li>Avoid hitting walls or yourself</li>
29
+ <li>The game speeds up as you score</li>
30
+ </ul>
 
 
31
  </div>
32
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  </body>
34
+ </html>
styles.css ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```css
2
+ body {
3
+ overflow: hidden;
4
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5
+ }
6
+
7
+ canvas {
8
+ display: block;
9
+ margin: 0 auto;
10
+ background-color: #111827;
11
+ border-radius: 0.5rem;
12
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
13
+ }
14
+
15
+ .game-container {
16
+ position: relative;
17
+ }
18
+
19
+ .controls {
20
+ position: absolute;
21
+ bottom: 20px;
22
+ width: 100%;
23
+ display: none;
24
+ justify-content: center;
25
+ gap: 10px;
26
+ }
27
+
28
+ @media (max-width: 768px) {
29
+ .controls {
30
+ display: flex;
31
+ }
32
+ }
33
+ ```