Hugging Face's logo

Spaces:
alvesrt
/
pac-man
Running

App Files Community
alvesrt commited on
Commit
7f4acfd
·
verified ·
1 Parent(s): f087736

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +661 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pac Man
3
- emoji: 🦀
4
- colorFrom: pink
5
- colorTo: purple
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: pac-man
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
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,661 @@
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>Pac-Man Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @keyframes pacman-mouth {
10
+ 0% { clip-path: polygon(50% 50%, 100% 0%, 100% 100%); }
11
+ 50% { clip-path: polygon(50% 50%, 100% 40%, 100% 60%); }
12
+ 100% { clip-path: polygon(50% 50%, 100% 0%, 100% 100%); }
13
+ }
14
+
15
+ @keyframes ghost-movement {
16
+ 0% { transform: translateY(0); }
17
+ 50% { transform: translateY(-5px); }
18
+ 100% { transform: translateY(0); }
19
+ }
20
+
21
+ .pacman {
22
+ animation: pacman-mouth 0.5s infinite;
23
+ }
24
+
25
+ .ghost {
26
+ animation: ghost-movement 1s infinite;
27
+ }
28
+
29
+ .ghost::before {
30
+ content: '';
31
+ position: absolute;
32
+ width: 20px;
33
+ height: 10px;
34
+ background: white;
35
+ border-radius: 100px 100px 0 0;
36
+ top: -10px;
37
+ left: 10px;
38
+ }
39
+
40
+ .ghost::after {
41
+ content: '';
42
+ position: absolute;
43
+ width: 4px;
44
+ height: 4px;
45
+ background: black;
46
+ border-radius: 50%;
47
+ top: -5px;
48
+ left: 15px;
49
+ box-shadow: 10px 0 black;
50
+ }
51
+
52
+ .ghost-eye {
53
+ width: 6px;
54
+ height: 6px;
55
+ background: white;
56
+ border-radius: 50%;
57
+ position: absolute;
58
+ top: -3px;
59
+ left: 13px;
60
+ }
61
+
62
+ .ghost-pupil {
63
+ width: 2px;
64
+ height: 2px;
65
+ background: black;
66
+ border-radius: 50%;
67
+ position: absolute;
68
+ top: 1px;
69
+ left: 1px;
70
+ }
71
+
72
+ .wall {
73
+ background-color: #2563eb;
74
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
75
+ }
76
+
77
+ .dot {
78
+ width: 6px;
79
+ height: 6px;
80
+ background-color: #fbbf24;
81
+ border-radius: 50%;
82
+ box-shadow: 0 0 5px #fbbf24;
83
+ }
84
+
85
+ .power-pellet {
86
+ width: 12px;
87
+ height: 12px;
88
+ background-color: #fbbf24;
89
+ border-radius: 50%;
90
+ box-shadow: 0 0 10px #fbbf24;
91
+ animation: pulse 1s infinite;
92
+ }
93
+
94
+ @keyframes pulse {
95
+ 0% { transform: scale(1); }
96
+ 50% { transform: scale(1.2); }
97
+ 100% { transform: scale(1); }
98
+ }
99
+
100
+ #game-board {
101
+ position: relative;
102
+ width: 560px;
103
+ height: 620px;
104
+ border: 2px solid #1e40af;
105
+ background-color: #1e1b4b;
106
+ }
107
+
108
+ .cell {
109
+ width: 20px;
110
+ height: 20px;
111
+ position: absolute;
112
+ }
113
+
114
+ #score-display {
115
+ font-family: 'Courier New', monospace;
116
+ letter-spacing: 2px;
117
+ }
118
+
119
+ #game-over {
120
+ background-color: rgba(0, 0, 0, 0.8);
121
+ z-index: 100;
122
+ }
123
+ </style>
124
+ </head>
125
+ <body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4">
126
+ <div class="text-center mb-4">
127
+ <h1 class="text-4xl font-bold text-yellow-400 mb-2">PAC-MAN</h1>
128
+ <div id="score-display" class="text-2xl font-mono text-white">
129
+ SCORE: <span id="score">0</span>
130
+ </div>
131
+ </div>
132
+
133
+ <div id="game-board" class="relative">
134
+ <!-- Game elements will be added here by JavaScript -->
135
+ </div>
136
+
137
+ <div class="mt-4 text-white">
138
+ <p class="mb-2">Use arrow keys to move Pac-Man</p>
139
+ <button id="restart-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded hidden">
140
+ Play Again
141
+ </button>
142
+ </div>
143
+
144
+ <div id="game-over" class="absolute hidden flex-col items-center justify-center text-white">
145
+ <h2 class="text-4xl font-bold text-red-500 mb-4">GAME OVER</h2>
146
+ <p class="text-2xl mb-4">Final Score: <span id="final-score">0</span></p>
147
+ <button id="game-over-restart" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
148
+ Play Again
149
+ </button>
150
+ </div>
151
+
152
+ <script>
153
+ document.addEventListener('DOMContentLoaded', () => {
154
+ // Game constants
155
+ const CELL_SIZE = 20;
156
+ const ROWS = 31;
157
+ const COLS = 28;
158
+ const BOARD_WIDTH = COLS * CELL_SIZE;
159
+ const BOARD_HEIGHT = ROWS * CELL_SIZE;
160
+
161
+ // Game state
162
+ let score = 0;
163
+ let pacman = { x: 14, y: 23, direction: 'right', nextDirection: 'right' };
164
+ let ghosts = [];
165
+ let dots = [];
166
+ let powerPellets = [];
167
+ let walls = [];
168
+ let gameRunning = false;
169
+ let scaredGhosts = false;
170
+ let scaredTimer = null;
171
+ let lives = 3;
172
+
173
+ // Maze layout (1 = wall, 0 = path, . = dot, o = power pellet)
174
+ const layout = [
175
+ '1111111111111111111111111111',
176
+ '1............o............1',
177
+ '1.1111.11111.111.11111.1111',
178
+ '1.1111.11111.111.11111.1111',
179
+ '1.1111.11111.111.11111.1111',
180
+ '1..........................1',
181
+ '1.1111.111.111111.111.1111',
182
+ '1.1111.111.111111.111.1111',
183
+ '1......111....11....111....1',
184
+ '111111.111111.111111.111111',
185
+ '111111.111111.111111.111111',
186
+ '111111.111 111.1111',
187
+ '111111.111 111111 111.1111',
188
+ '111111.111 1 1 111.1111',
189
+ '1............1 1......1',
190
+ '1.1111.11111 111111 111.11',
191
+ '1.1111.11111 111.11',
192
+ '1.1111.11111 111111 111.111',
193
+ '1......11111 1 1 111....1',
194
+ '111111.11111 1 1 111.1111',
195
+ '111111.11111 111111 111.1111',
196
+ '111111.11111 111.1111',
197
+ '1............111111......1',
198
+ '1.1111.11111.111.11111.1111',
199
+ '1.1111.11111.111.11111.1111',
200
+ '1...o.......111....o.....1',
201
+ '111.111.111.111111.111.1111',
202
+ '111.111.111.111111.111.1111',
203
+ '1......111....11....111....1',
204
+ '1.11111111111.111.1111111.1',
205
+ '1..........................1',
206
+ '1111111111111111111111111111'
207
+ ];
208
+
209
+ // Initialize game
210
+ function initGame() {
211
+ score = 0;
212
+ lives = 3;
213
+ document.getElementById('score').textContent = score;
214
+ document.getElementById('game-over').classList.add('hidden');
215
+ document.getElementById('restart-btn').classList.add('hidden');
216
+
217
+ // Clear previous game elements
218
+ document.getElementById('game-board').innerHTML = '';
219
+ dots = [];
220
+ powerPellets = [];
221
+ walls = [];
222
+ ghosts = [];
223
+
224
+ // Create game elements based on layout
225
+ for (let y = 0; y < ROWS; y++) {
226
+ for (let x = 0; x < COLS; x++) {
227
+ const cell = layout[y][x];
228
+ const cellElement = document.createElement('div');
229
+ cellElement.className = 'cell';
230
+ cellElement.style.left = `${x * CELL_SIZE}px`;
231
+ cellElement.style.top = `${y * CELL_SIZE}px`;
232
+
233
+ if (cell === '1') {
234
+ // Wall
235
+ cellElement.classList.add('wall');
236
+ walls.push({ x, y });
237
+ } else if (cell === '.') {
238
+ // Dot
239
+ const dot = document.createElement('div');
240
+ dot.className = 'dot';
241
+ dot.style.left = `${x * CELL_SIZE + 7}px`;
242
+ dot.style.top = `${y * CELL_SIZE + 7}px`;
243
+ document.getElementById('game-board').appendChild(dot);
244
+ dots.push({ x, y, element: dot });
245
+ } else if (cell === 'o') {
246
+ // Power pellet
247
+ const pellet = document.createElement('div');
248
+ pellet.className = 'power-pellet';
249
+ pellet.style.left = `${x * CELL_SIZE + 4}px`;
250
+ pellet.style.top = `${y * CELL_SIZE + 4}px`;
251
+ document.getElementById('game-board').appendChild(pellet);
252
+ powerPellets.push({ x, y, element: pellet });
253
+ }
254
+ }
255
+ }
256
+
257
+ // Create Pac-Man
258
+ const pacmanElement = document.createElement('div');
259
+ pacmanElement.id = 'pacman';
260
+ pacmanElement.className = 'pacman absolute w-5 h-5 bg-yellow-400 rounded-full';
261
+ pacmanElement.style.left = `${pacman.x * CELL_SIZE}px`;
262
+ pacmanElement.style.top = `${pacman.y * CELL_SIZE}px`;
263
+ document.getElementById('game-board').appendChild(pacmanElement);
264
+
265
+ // Create ghosts
266
+ createGhost('blinky', 13, 11, 'red');
267
+ createGhost('pinky', 14, 11, 'pink');
268
+ createGhost('inky', 13, 14, 'cyan');
269
+ createGhost('clyde', 14, 14, 'orange');
270
+
271
+ gameRunning = true;
272
+ requestAnimationFrame(gameLoop);
273
+ }
274
+
275
+ function createGhost(id, x, y, color) {
276
+ const ghost = {
277
+ id,
278
+ x,
279
+ y,
280
+ direction: 'up',
281
+ speed: 0.8,
282
+ isScared: false,
283
+ isEaten: false
284
+ };
285
+
286
+ const ghostElement = document.createElement('div');
287
+ ghostElement.id = id;
288
+ ghostElement.className = `ghost absolute w-5 h-5 bg-${color}-500 rounded-t-full`;
289
+ ghostElement.style.left = `${x * CELL_SIZE}px`;
290
+ ghostElement.style.top = `${y * CELL_SIZE}px`;
291
+
292
+ // Add eyes
293
+ const leftEye = document.createElement('div');
294
+ leftEye.className = 'ghost-eye';
295
+ leftEye.style.left = '8px';
296
+
297
+ const rightEye = document.createElement('div');
298
+ rightEye.className = 'ghost-eye';
299
+ rightEye.style.left = '18px';
300
+
301
+ const leftPupil = document.createElement('div');
302
+ leftPupil.className = 'ghost-pupil';
303
+
304
+ const rightPupil = document.createElement('div');
305
+ rightPupil.className = 'ghost-pupil';
306
+
307
+ leftEye.appendChild(leftPupil);
308
+ rightEye.appendChild(rightPupil);
309
+ ghostElement.appendChild(leftEye);
310
+ ghostElement.appendChild(rightEye);
311
+
312
+ document.getElementById('game-board').appendChild(ghostElement);
313
+ ghost.element = ghostElement;
314
+ ghosts.push(ghost);
315
+
316
+ return ghost;
317
+ }
318
+
319
+ // Game loop
320
+ function gameLoop(timestamp) {
321
+ if (!gameRunning) return;
322
+
323
+ movePacman();
324
+ moveGhosts();
325
+ checkCollisions();
326
+ updateDisplay();
327
+
328
+ if (dots.length === 0 && powerPellets.length === 0) {
329
+ // All dots eaten - level complete
330
+ gameRunning = false;
331
+ setTimeout(() => {
332
+ alert('Level Complete! Final Score: ' + score);
333
+ initGame();
334
+ }, 500);
335
+ return;
336
+ }
337
+
338
+ requestAnimationFrame(gameLoop);
339
+ }
340
+
341
+ // Move Pac-Man
342
+ function movePacman() {
343
+ const pacmanElement = document.getElementById('pacman');
344
+
345
+ // Try to change direction if there's a next direction queued
346
+ if (pacman.nextDirection !== pacman.direction) {
347
+ const nextX = Math.round(pacman.x);
348
+ const nextY = Math.round(pacman.y);
349
+
350
+ if (canMove(nextX, nextY, pacman.nextDirection)) {
351
+ pacman.direction = pacman.nextDirection;
352
+ }
353
+ }
354
+
355
+ // Calculate new position
356
+ let newX = pacman.x;
357
+ let newY = pacman.y;
358
+
359
+ switch (pacman.direction) {
360
+ case 'left':
361
+ newX -= 0.1;
362
+ pacmanElement.style.transform = 'rotate(180deg)';
363
+ break;
364
+ case 'right':
365
+ newX += 0.1;
366
+ pacmanElement.style.transform = 'rotate(0deg)';
367
+ break;
368
+ case 'up':
369
+ newY -= 0.1;
370
+ pacmanElement.style.transform = 'rotate(-90deg)';
371
+ break;
372
+ case 'down':
373
+ newY += 0.1;
374
+ pacmanElement.style.transform = 'rotate(90deg)';
375
+ break;
376
+ }
377
+
378
+ // Check if new position is valid
379
+ if (canMove(Math.floor(newX), Math.floor(newY), pacman.direction)) {
380
+ pacman.x = newX;
381
+ pacman.y = newY;
382
+
383
+ // Handle tunnel/wrap-around
384
+ if (pacman.x < 0) pacman.x = COLS - 1;
385
+ if (pacman.x >= COLS) pacman.x = 0;
386
+
387
+ // Update position
388
+ pacmanElement.style.left = `${pacman.x * CELL_SIZE}px`;
389
+ pacmanElement.style.top = `${pacman.y * CELL_SIZE}px`;
390
+ }
391
+ }
392
+
393
+ // Move ghosts
394
+ function moveGhosts() {
395
+ ghosts.forEach(ghost => {
396
+ if (ghost.isEaten) {
397
+ // Ghost is returning to base
398
+ const targetX = 13;
399
+ const targetY = 11;
400
+
401
+ if (ghost.x < targetX) ghost.direction = 'right';
402
+ else if (ghost.x > targetX) ghost.direction = 'left';
403
+ else if (ghost.y < targetY) ghost.direction = 'down';
404
+ else if (ghost.y > targetY) ghost.direction = 'up';
405
+ else {
406
+ ghost.isEaten = false;
407
+ ghost.isScared = false;
408
+ ghost.element.classList.remove('bg-blue-500');
409
+ ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
410
+ }
411
+ } else {
412
+ // Simple AI for ghost movement
413
+ const directions = ['up', 'down', 'left', 'right'];
414
+ const oppositeDir = {
415
+ 'up': 'down',
416
+ 'down': 'up',
417
+ 'left': 'right',
418
+ 'right': 'left'
419
+ };
420
+
421
+ // Don't go back the way you came
422
+ const possibleDirections = directions.filter(dir => dir !== oppositeDir[ghost.direction]);
423
+
424
+ // Filter to only valid moves
425
+ const validDirections = possibleDirections.filter(dir => {
426
+ const testX = Math.floor(ghost.x);
427
+ const testY = Math.floor(ghost.y);
428
+ return canMove(testX, testY, dir);
429
+ });
430
+
431
+ if (validDirections.length > 0) {
432
+ // Choose random direction (simple AI)
433
+ ghost.direction = validDirections[Math.floor(Math.random() * validDirections.length)];
434
+ }
435
+ }
436
+
437
+ // Move ghost
438
+ let newX = ghost.x;
439
+ let newY = ghost.y;
440
+
441
+ switch (ghost.direction) {
442
+ case 'left':
443
+ newX -= ghost.speed * 0.05;
444
+ break;
445
+ case 'right':
446
+ newX += ghost.speed * 0.05;
447
+ break;
448
+ case 'up':
449
+ newY -= ghost.speed * 0.05;
450
+ break;
451
+ case 'down':
452
+ newY += ghost.speed * 0.05;
453
+ break;
454
+ }
455
+
456
+ // Check if new position is valid
457
+ if (canMove(Math.floor(newX), Math.floor(newY), ghost.direction)) {
458
+ ghost.x = newX;
459
+ ghost.y = newY;
460
+
461
+ // Handle tunnel/wrap-around
462
+ if (ghost.x < 0) ghost.x = COLS - 1;
463
+ if (ghost.x >= COLS) ghost.x = 0;
464
+
465
+ // Update position
466
+ ghost.element.style.left = `${ghost.x * CELL_SIZE}px`;
467
+ ghost.element.style.top = `${ghost.y * CELL_SIZE}px`;
468
+ }
469
+ });
470
+ }
471
+
472
+ // Check if movement is possible
473
+ function canMove(x, y, direction) {
474
+ // Check if out of bounds (except for tunnels)
475
+ if (y < 0 || y >= ROWS) return false;
476
+
477
+ // Check for walls
478
+ const nextX = direction === 'left' ? x - 1 : direction === 'right' ? x + 1 : x;
479
+ const nextY = direction === 'up' ? y - 1 : direction === 'down' ? y + 1 : y;
480
+
481
+ // Allow tunnel wrap-around
482
+ if (nextX < 0 || nextX >= COLS) {
483
+ return y === 14 && (nextX < 0 || nextX >= COLS);
484
+ }
485
+
486
+ if (nextY < 0 || nextY >= ROWS) return false;
487
+
488
+ return layout[nextY][nextX] !== '1';
489
+ }
490
+
491
+ // Check for collisions
492
+ function checkCollisions() {
493
+ const pacmanCellX = Math.round(pacman.x);
494
+ const pacmanCellY = Math.round(pacman.y);
495
+
496
+ // Check for dot collisions
497
+ for (let i = dots.length - 1; i >= 0; i--) {
498
+ const dot = dots[i];
499
+ if (dot.x === pacmanCellX && dot.y === pacmanCellY) {
500
+ // Remove dot
501
+ document.getElementById('game-board').removeChild(dot.element);
502
+ dots.splice(i, 1);
503
+ score += 10;
504
+ document.getElementById('score').textContent = score;
505
+ }
506
+ }
507
+
508
+ // Check for power pellet collisions
509
+ for (let i = powerPellets.length - 1; i >= 0; i--) {
510
+ const pellet = powerPellets[i];
511
+ if (pellet.x === pacmanCellX && pellet.y === pacmanCellY) {
512
+ // Remove pellet
513
+ document.getElementById('game-board').removeChild(pellet.element);
514
+ powerPellets.splice(i, 1);
515
+ score += 50;
516
+ document.getElementById('score').textContent = score;
517
+
518
+ // Make ghosts scared
519
+ scaredGhosts = true;
520
+ ghosts.forEach(ghost => {
521
+ if (!ghost.isEaten) {
522
+ ghost.isScared = true;
523
+ ghost.element.classList.remove(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
524
+ ghost.element.classList.add('bg-blue-500');
525
+ }
526
+ });
527
+
528
+ // Set timer to end scared state
529
+ if (scaredTimer) clearTimeout(scaredTimer);
530
+ scaredTimer = setTimeout(() => {
531
+ scaredGhosts = false;
532
+ ghosts.forEach(ghost => {
533
+ if (!ghost.isEaten) {
534
+ ghost.isScared = false;
535
+ ghost.element.classList.remove('bg-blue-500');
536
+ ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
537
+ }
538
+ });
539
+ }, 10000);
540
+ }
541
+ }
542
+
543
+ // Check for ghost collisions
544
+ ghosts.forEach(ghost => {
545
+ const ghostX = Math.round(ghost.x);
546
+ const ghostY = Math.round(ghost.y);
547
+
548
+ if (ghostX === pacmanCellX && ghostY === pacmanCellY) {
549
+ if (ghost.isScared) {
550
+ // Eat ghost
551
+ ghost.isScared = false;
552
+ ghost.isEaten = true;
553
+ ghost.element.classList.remove('bg-blue-500');
554
+ ghost.element.classList.add('bg-gray-400');
555
+ score += 200;
556
+ document.getElementById('score').textContent = score;
557
+ } else if (!ghost.isEaten) {
558
+ // Lose life
559
+ lives--;
560
+ if (lives <= 0) {
561
+ gameOver();
562
+ } else {
563
+ // Reset positions
564
+ resetPositions();
565
+ }
566
+ }
567
+ }
568
+ });
569
+ }
570
+
571
+ // Reset positions after losing a life
572
+ function resetPositions() {
573
+ pacman = { x: 14, y: 23, direction: 'right', nextDirection: 'right' };
574
+ document.getElementById('pacman').style.left = `${pacman.x * CELL_SIZE}px`;
575
+ document.getElementById('pacman').style.top = `${pacman.y * CELL_SIZE}px`;
576
+ document.getElementById('pacman').style.transform = 'rotate(0deg)';
577
+
578
+ ghosts.forEach(ghost => {
579
+ if (ghost.id === 'blinky' || ghost.id === 'pinky') {
580
+ ghost.x = ghost.id === 'blinky' ? 13 : 14;
581
+ ghost.y = 11;
582
+ } else {
583
+ ghost.x = ghost.id === 'inky' ? 13 : 14;
584
+ ghost.y = 14;
585
+ }
586
+
587
+ ghost.direction = 'up';
588
+ ghost.isScared = false;
589
+ ghost.isEaten = false;
590
+ ghost.element.classList.remove('bg-blue-500', 'bg-gray-400');
591
+ ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
592
+ ghost.element.style.left = `${ghost.x * CELL_SIZE}px`;
593
+ ghost.element.style.top = `${ghost.y * CELL_SIZE}px`;
594
+ });
595
+
596
+ // Reset scared state
597
+ scaredGhosts = false;
598
+ if (scaredTimer) clearTimeout(scaredTimer);
599
+ }
600
+
601
+ // Game over
602
+ function gameOver() {
603
+ gameRunning = false;
604
+ document.getElementById('final-score').textContent = score;
605
+ document.getElementById('game-over').classList.remove('hidden');
606
+ document.getElementById('restart-btn').classList.remove('hidden');
607
+ }
608
+
609
+ // Update display
610
+ function updateDisplay() {
611
+ // Update Pac-Man mouth direction
612
+ const pacmanElement = document.getElementById('pacman');
613
+ pacmanElement.style.clipPath = 'polygon(50% 50%, 100% 0%, 100% 100%)';
614
+
615
+ // Update ghost states
616
+ ghosts.forEach(ghost => {
617
+ if (ghost.isScared) {
618
+ // Blinking effect when scared time is almost up
619
+ if (scaredTimer && Date.now() % 200 < 100) {
620
+ ghost.element.classList.remove('bg-blue-500');
621
+ ghost.element.classList.add('bg-white');
622
+ } else {
623
+ ghost.element.classList.remove('bg-white');
624
+ ghost.element.classList.add('bg-blue-500');
625
+ }
626
+ }
627
+ });
628
+ }
629
+
630
+ // Event listeners
631
+ document.addEventListener('keydown', (e) => {
632
+ if (!gameRunning) return;
633
+
634
+ switch (e.key) {
635
+ case 'ArrowLeft':
636
+ pacman.nextDirection = 'left';
637
+ break;
638
+ case 'ArrowRight':
639
+ pacman.nextDirection = 'right';
640
+ break;
641
+ case 'ArrowUp':
642
+ pacman.nextDirection = 'up';
643
+ break;
644
+ case 'ArrowDown':
645
+ pacman.nextDirection = 'down';
646
+ break;
647
+ }
648
+ });
649
+
650
+ document.getElementById('restart-btn').addEventListener('click', initGame);
651
+ document.getElementById('game-over-restart').addEventListener('click', () => {
652
+ document.getElementById('game-over').classList.add('hidden');
653
+ initGame();
654
+ });
655
+
656
+ // Start the game
657
+ initGame();
658
+ });
659
+ </script>
660
+ <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=alvesrt/pac-man" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
661
+ </html>