Spaces:

jeromegenevray
/

jerome

Running

App Files Files Community

jeromegenevray commited on Jun 27, 2025

Commit

65b4d4f

verified ·

1 Parent(s): 1a9762d

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +726 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Jerome
-emoji: 📊
-colorFrom: indigo
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: jerome
+emoji: 🐳
+colorFrom: red
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,726 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pacman Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes pacman-mouth {
+            0% { clip-path: polygon(50% 50%, 100% 0%, 100% 100%); }
+            50% { clip-path: polygon(50% 50%, 100% 25%, 100% 75%); }
+            100% { clip-path: polygon(50% 50%, 100% 0%, 100% 100%); }
+        }
+        @keyframes ghost-movement {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0); }
+        }
+        .pacman {
+            animation: pacman-mouth 0.7s infinite;
+            clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
+        }
+        .ghost {
+            animation: ghost-movement 2s infinite;
+        }
+        .maze {
+            background-color: #000033;
+            position: relative;
+            overflow: hidden;
+        }
+        .wall {
+            background-color: #0000AA;
+        }
+        .pellet {
+            width: 8px;
+            height: 8px;
+            background-color: #FFD700;
+            border-radius: 50%;
+            position: absolute;
+        }
+        .power-pellet {
+            width: 16px;
+            height: 16px;
+            background-color: #FFD700;
+            border-radius: 50%;
+            position: absolute;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.2); opacity: 0.7; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        .game-over {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 100;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .controls {
+            touch-action: none;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-sans">
+    <div class="container mx-auto px-4 py-8 max-w-md">
+        <div class="flex justify-between items-center mb-4">
+            <div class="text-2xl font-bold text-yellow-400">PACMAN</div>
+            <div class="flex items-center space-x-4">
+                <div class="bg-gray-800 px-4 py-2 rounded-lg">
+                    <span class="text-yellow-400">Score: </span>
+                    <span id="score" class="font-bold">0</span>
+                </div>
+                <div class="bg-gray-800 px-4 py-2 rounded-lg">
+                    <span class="text-red-400">Lives: </span>
+                    <span id="lives" class="font-bold">3</span>
+                </div>
+            </div>
+        </div>
+        <div class="relative maze w-full aspect-square rounded-lg overflow-hidden mb-4" id="maze">
+            <div id="pacman" class="pacman absolute w-8 h-8 bg-yellow-400 rounded-full z-10"></div>
+            <!-- Ghosts -->
+            <div id="blinky" class="ghost absolute w-8 h-8 rounded-t-full z-10" style="background-color: #FF0000;"></div>
+            <div id="pinky" class="ghost absolute w-8 h-8 rounded-t-full z-10" style="background-color: #FFB8FF;"></div>
+            <div id="inky" class="ghost absolute w-8 h-8 rounded-t-full z-10" style="background-color: #00FFFF;"></div>
+            <div id="clyde" class="ghost absolute w-8 h-8 rounded-t-full z-10" style="background-color: #FFB852;"></div>
+            <!-- Game over overlay -->
+            <div id="game-over" class="game-over">
+                <div class="text-4xl font-bold text-red-500 mb-4">GAME OVER</div>
+                <div class="text-2xl mb-6">Final Score: <span id="final-score" class="text-yellow-400">0</span></div>
+                <button id="restart-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-6 rounded-full">
+                    PLAY AGAIN
+                </button>
+            </div>
+        </div>
+        <div class="controls bg-gray-800 p-4 rounded-lg">
+            <div class="flex justify-center mb-2">
+                <button id="up-btn" class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
+                    ↑
+                </button>
+            </div>
+            <div class="flex justify-center space-x-12">
+                <button id="left-btn" class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
+                    ←
+                </button>
+                <button id="right-btn" class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
+                    →
+                </button>
+            </div>
+            <div class="flex justify-center mt-2">
+                <button id="down-btn" class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
+                    ↓
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game variables
+            let score = 0;
+            let lives = 3;
+            let gameRunning = true;
+            let direction = 'right';
+            let nextDirection = 'right';
+            let pacmanSpeed = 5;
+            let ghostSpeed = 3;
+            let scaredGhosts = false;
+            let scaredTimer = null;
+            let pelletsEaten = 0;
+            const totalPellets = 240; // Approximate number of pellets
+            // DOM elements
+            const maze = document.getElementById('maze');
+            const pacman = document.getElementById('pacman');
+            const blinky = document.getElementById('blinky');
+            const pinky = document.getElementById('pinky');
+            const inky = document.getElementById('inky');
+            const clyde = document.getElementById('clyde');
+            const scoreDisplay = document.getElementById('score');
+            const livesDisplay = document.getElementById('lives');
+            const gameOverDisplay = document.getElementById('game-over');
+            const finalScoreDisplay = document.getElementById('final-score');
+            const restartBtn = document.getElementById('restart-btn');
+            // Control buttons
+            const upBtn = document.getElementById('up-btn');
+            const downBtn = document.getElementById('down-btn');
+            const leftBtn = document.getElementById('left-btn');
+            const rightBtn = document.getElementById('right-btn');
+            // Maze dimensions
+            const mazeWidth = maze.offsetWidth;
+            const mazeHeight = maze.offsetHeight;
+            const cellSize = 20;
+            const cols = Math.floor(mazeWidth / cellSize);
+            const rows = Math.floor(mazeHeight / cellSize);
+            // Initialize positions
+            let pacmanPos = {
+                x: Math.floor(cols / 2) * cellSize,
+                y: Math.floor(rows / 2) * cellSize
+            };
+            let ghosts = [
+                { element: blinky, x: 3 * cellSize, y: 3 * cellSize, color: '#FF0000', speed: ghostSpeed, direction: 'right', scared: false },
+                { element: pinky, x: (cols - 4) * cellSize, y: 3 * cellSize, color: '#FFB8FF', speed: ghostSpeed, direction: 'left', scared: false },
+                { element: inky, x: 3 * cellSize, y: (rows - 4) * cellSize, color: '#00FFFF', speed: ghostSpeed, direction: 'right', scared: false },
+                { element: clyde, x: (cols - 4) * cellSize, y: (rows - 4) * cellSize, color: '#FFB852', speed: ghostSpeed, direction: 'left', scared: false }
+            ];
+            // Maze layout (1 = wall, 0 = path)
+            const mazeLayout = [
+                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+                [1,0,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,0,1],
+                [1,0,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,0,1],
+                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+                [1,0,1,1,0,1,0,1,1,1,1,1,1,0,1,0,1,1,0,1],
+                [1,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
+                [1,1,1,1,0,1,1,1,0,1,1,1,0,1,1,0,1,1,1,1],
+                [0,0,0,1,0,1,0,0,0,0,0,0,0,0,1,0,1,0,0,0],
+                [1,1,1,1,0,1,0,1,1,1,1,1,1,0,1,0,1,1,1,1],
+                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+                [1,0,1,1,0,1,1,0,1,1,1,1,0,1,1,0,1,1,0,1],
+                [1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1],
+                [1,1,0,1,0,1,0,1,1,1,1,1,1,0,1,0,1,0,1,1],
+                [1,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
+                [1,0,1,1,1,1,1,1,0,1,1,1,0,1,1,1,1,1,0,1],
+                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+            ];
+            // Create maze walls
+            function createMaze() {
+                maze.innerHTML = '';
+                // Add Pacman back to the maze
+                maze.appendChild(pacman);
+                // Add ghosts back to the maze
+                ghosts.forEach(ghost => {
+                    maze.appendChild(ghost.element);
+                });
+                // Create walls
+                for (let y = 0; y < rows; y++) {
+                    for (let x = 0; x < cols; x++) {
+                        if (mazeLayout[y] && mazeLayout[y][x] === 1) {
+                            const wall = document.createElement('div');
+                            wall.className = 'wall absolute';
+                            wall.style.width = `${cellSize}px`;
+                            wall.style.height = `${cellSize}px`;
+                            wall.style.left = `${x * cellSize}px`;
+                            wall.style.top = `${y * cellSize}px`;
+                            maze.appendChild(wall);
+                        }
+                    }
+                }
+                // Create pellets
+                for (let y = 0; y < rows; y++) {
+                    for (let x = 0; x < cols; x++) {
+                        if (mazeLayout[y] && mazeLayout[y][x] === 0) {
+                            // Skip positions near ghosts' starting points
+                            const isNearGhostStart = ghosts.some(ghost =>
+                                Math.abs(ghost.x - x * cellSize) < 2 * cellSize &&
+                                Math.abs(ghost.y - y * cellSize) < 2 * cellSize
+                            );
+                            if (!isNearGhostStart) {
+                                const pellet = document.createElement('div');
+                                pellet.className = 'pellet';
+                                pellet.style.left = `${x * cellSize + cellSize / 2 - 4}px`;
+                                pellet.style.top = `${y * cellSize + cellSize / 2 - 4}px`;
+                                pellet.dataset.x = x;
+                                pellet.dataset.y = y;
+                                maze.appendChild(pellet);
+                            }
+                        }
+                    }
+                }
+                // Add power pellets
+                addPowerPellet(1, 1);
+                addPowerPellet(cols - 2, 1);
+                addPowerPellet(1, rows - 2);
+                addPowerPellet(cols - 2, rows - 2);
+            }
+            function addPowerPellet(x, y) {
+                const pellet = document.createElement('div');
+                pellet.className = 'power-pellet';
+                pellet.style.left = `${x * cellSize + cellSize / 2 - 8}px`;
+                pellet.style.top = `${y * cellSize + cellSize / 2 - 8}px`;
+                pellet.dataset.x = x;
+                pellet.dataset.y = y;
+                pellet.dataset.power = 'true';
+                maze.appendChild(pellet);
+            }
+            // Initialize game
+            function initGame() {
+                score = 0;
+                lives = 3;
+                gameRunning = true;
+                direction = 'right';
+                nextDirection = 'right';
+                scaredGhosts = false;
+                pelletsEaten = 0;
+                scoreDisplay.textContent = score;
+                livesDisplay.textContent = lives;
+                gameOverDisplay.style.display = 'none';
+                // Reset positions
+                pacmanPos = {
+                    x: Math.floor(cols / 2) * cellSize,
+                    y: Math.floor(rows / 2) * cellSize
+                };
+                ghosts = [
+                    { element: blinky, x: 3 * cellSize, y: 3 * cellSize, color: '#FF0000', speed: ghostSpeed, direction: 'right', scared: false },
+                    { element: pinky, x: (cols - 4) * cellSize, y: 3 * cellSize, color: '#FFB8FF', speed: ghostSpeed, direction: 'left', scared: false },
+                    { element: inky, x: 3 * cellSize, y: (rows - 4) * cellSize, color: '#00FFFF', speed: ghostSpeed, direction: 'right', scared: false },
+                    { element: clyde, x: (cols - 4) * cellSize, y: (rows - 4) * cellSize, color: '#FFB852', speed: ghostSpeed, direction: 'left', scared: false }
+                ];
+                createMaze();
+                updatePositions();
+                gameLoop();
+            }
+            // Update positions on screen
+            function updatePositions() {
+                // Pacman
+                pacman.style.left = `${pacmanPos.x}px`;
+                pacman.style.top = `${pacmanPos.y}px`;
+                // Rotate Pacman based on direction
+                let rotation = 0;
+                switch (direction) {
+                    case 'up': rotation = -90; break;
+                    case 'down': rotation = 90; break;
+                    case 'left': rotation = 180; break;
+                    case 'right': rotation = 0; break;
+                }
+                pacman.style.transform = `rotate(${rotation}deg)`;
+                // Ghosts
+                ghosts.forEach(ghost => {
+                    ghost.element.style.left = `${ghost.x}px`;
+                    ghost.element.style.top = `${ghost.y}px`;
+                    if (ghost.scared) {
+                        ghost.element.style.backgroundColor = '#0000FF';
+                    } else {
+                        ghost.element.style.backgroundColor = ghost.color;
+                    }
+                });
+            }
+            // Check if position is valid (not a wall)
+            function isValidPosition(x, y) {
+                const col = Math.floor(x / cellSize);
+                const row = Math.floor(y / cellSize);
+                // Check boundaries
+                if (col < 0 || col >= cols || row < 0 || row >= rows) {
+                    return false;
+                }
+                // Check if it's a wall
+                return !(mazeLayout[row] && mazeLayout[row][col] === 1);
+            }
+            // Move Pacman
+            function movePacman() {
+                let newX = pacmanPos.x;
+                let newY = pacmanPos.y;
+                // Try next direction first
+                if (nextDirection !== direction) {
+                    let canChange = false;
+                    switch (nextDirection) {
+                        case 'up':
+                            canChange = isValidPosition(pacmanPos.x, pacmanPos.y - pacmanSpeed) &&
+                                         isValidPosition(pacmanPos.x + cellSize - 1, pacmanPos.y - pacmanSpeed);
+                            break;
+                        case 'down':
+                            canChange = isValidPosition(pacmanPos.x, pacmanPos.y + cellSize + pacmanSpeed - 1) &&
+                                         isValidPosition(pacmanPos.x + cellSize - 1, pacmanPos.y + cellSize + pacmanSpeed - 1);
+                            break;
+                        case 'left':
+                            canChange = isValidPosition(pacmanPos.x - pacmanSpeed, pacmanPos.y) &&
+                                         isValidPosition(pacmanPos.x - pacmanSpeed, pacmanPos.y + cellSize - 1);
+                            break;
+                        case 'right':
+                            canChange = isValidPosition(pacmanPos.x + cellSize + pacmanSpeed - 1, pacmanPos.y) &&
+                                         isValidPosition(pacmanPos.x + cellSize + pacmanSpeed - 1, pacmanPos.y + cellSize - 1);
+                            break;
+                    }
+                    if (canChange) {
+                        direction = nextDirection;
+                    }
+                }
+                // Move in current direction
+                switch (direction) {
+                    case 'up':
+                        newY -= pacmanSpeed;
+                        if (isValidPosition(pacmanPos.x, newY) &&
+                            isValidPosition(pacmanPos.x + cellSize - 1, newY)) {
+                            pacmanPos.y = newY;
+                        }
+                        break;
+                    case 'down':
+                        newY += pacmanSpeed;
+                        if (isValidPosition(pacmanPos.x, newY + cellSize - 1) &&
+                            isValidPosition(pacmanPos.x + cellSize - 1, newY + cellSize - 1)) {
+                            pacmanPos.y = newY;
+                        }
+                        break;
+                    case 'left':
+                        newX -= pacmanSpeed;
+                        if (isValidPosition(newX, pacmanPos.y) &&
+                            isValidPosition(newX, pacmanPos.y + cellSize - 1)) {
+                            pacmanPos.x = newX;
+                        }
+                        break;
+                    case 'right':
+                        newX += pacmanSpeed;
+                        if (isValidPosition(newX + cellSize - 1, pacmanPos.y) &&
+                            isValidPosition(newX + cellSize - 1, pacmanPos.y + cellSize - 1)) {
+                            pacmanPos.x = newX;
+                        }
+                        break;
+                }
+                // Wrap around (tunnel effect)
+                if (pacmanPos.x < -cellSize) {
+                    pacmanPos.x = mazeWidth;
+                } else if (pacmanPos.x > mazeWidth) {
+                    pacmanPos.x = -cellSize;
+                }
+                // Check for pellet collision
+                checkPelletCollision();
+                // Check for ghost collision
+                checkGhostCollision();
+            }
+            // Move ghosts
+            function moveGhosts() {
+                ghosts.forEach(ghost => {
+                    // Simple AI: move randomly but prefer current direction
+                    const directions = ['up', 'down', 'left', 'right'];
+                    let possibleDirections = [];
+                    // Check which directions are valid
+                    directions.forEach(dir => {
+                        let newX = ghost.x;
+                        let newY = ghost.y;
+                        switch (dir) {
+                            case 'up':
+                                newY -= ghost.speed;
+                                break;
+                            case 'down':
+                                newY += ghost.speed;
+                                break;
+                            case 'left':
+                                newX -= ghost.speed;
+                                break;
+                            case 'right':
+                                newX += ghost.speed;
+                                break;
+                        }
+                        // Check if new position is valid
+                        if (isValidPosition(newX, newY) &&
+                            isValidPosition(newX + cellSize - 1, newY + cellSize - 1)) {
+                            possibleDirections.push(dir);
+                        }
+                    });
+                    // If no possible directions, reverse
+                    if (possibleDirections.length === 0) {
+                        switch (ghost.direction) {
+                            case 'up': ghost.direction = 'down'; break;
+                            case 'down': ghost.direction = 'up'; break;
+                            case 'left': ghost.direction = 'right'; break;
+                            case 'right': ghost.direction = 'left'; break;
+                        }
+                        return;
+                    }
+                    // If current direction is still possible, keep it
+                    if (possibleDirections.includes(ghost.direction)) {
+                        // 70% chance to keep same direction
+                        if (Math.random() < 0.7) {
+                            // Keep same direction
+                        } else {
+                            // Choose random direction
+                            ghost.direction = possibleDirections[Math.floor(Math.random() * possibleDirections.length)];
+                        }
+                    } else {
+                        // Choose random direction from possible
+                        ghost.direction = possibleDirections[Math.floor(Math.random() * possibleDirections.length)];
+                    }
+                    // Move ghost
+                    switch (ghost.direction) {
+                        case 'up':
+                            ghost.y -= ghost.speed;
+                            break;
+                        case 'down':
+                            ghost.y += ghost.speed;
+                            break;
+                        case 'left':
+                            ghost.x -= ghost.speed;
+                            break;
+                        case 'right':
+                            ghost.x += ghost.speed;
+                            break;
+                    }
+                    // Wrap around (tunnel effect)
+                    if (ghost.x < -cellSize) {
+                        ghost.x = mazeWidth;
+                    } else if (ghost.x > mazeWidth) {
+                        ghost.x = -cellSize;
+                    }
+                });
+            }
+            // Check for pellet collision
+            function checkPelletCollision() {
+                const pacmanCenterX = pacmanPos.x + cellSize / 2;
+                const pacmanCenterY = pacmanPos.y + cellSize / 2;
+                document.querySelectorAll('.pellet, .power-pellet').forEach(pellet => {
+                    const pelletX = parseInt(pellet.style.left) + parseInt(pellet.offsetWidth) / 2;
+                    const pelletY = parseInt(pellet.style.top) + parseInt(pellet.offsetHeight) / 2;
+                    const distance = Math.sqrt(
+                        Math.pow(pacmanCenterX - pelletX, 2) +
+                        Math.pow(pacmanCenterY - pelletY, 2)
+                    );
+                    if (distance < cellSize / 2) {
+                        // Remove pellet
+                        pellet.remove();
+                        // Update score
+                        if (pellet.classList.contains('power-pellet')) {
+                            score += 50;
+                            scareGhosts();
+                        } else {
+                            score += 10;
+                        }
+                        scoreDisplay.textContent = score;
+                        pelletsEaten++;
+                        // Check if all pellets are eaten
+                        if (pelletsEaten >= totalPellets) {
+                            gameWin();
+                        }
+                    }
+                });
+            }
+            // Scare ghosts (make them vulnerable)
+            function scareGhosts() {
+                scaredGhosts = true;
+                ghosts.forEach(ghost => {
+                    ghost.scared = true;
+                    ghost.speed = ghostSpeed * 0.7; // Slow down when scared
+                });
+                // Reset scared timer if already active
+                if (scaredTimer) {
+                    clearTimeout(scaredTimer);
+                }
+                // Ghosts return to normal after 10 seconds
+                scaredTimer = setTimeout(() => {
+                    scaredGhosts = false;
+                    ghosts.forEach(ghost => {
+                        ghost.scared = false;
+                        ghost.speed = ghostSpeed;
+                    });
+                }, 10000);
+            }
+            // Check for ghost collision
+            function checkGhostCollision() {
+                const pacmanCenterX = pacmanPos.x + cellSize / 2;
+                const pacmanCenterY = pacmanPos.y + cellSize / 2;
+                ghosts.forEach(ghost => {
+                    const ghostCenterX = ghost.x + cellSize / 2;
+                    const ghostCenterY = ghost.y + cellSize / 2;
+                    const distance = Math.sqrt(
+                        Math.pow(pacmanCenterX - ghostCenterX, 2) +
+                        Math.pow(pacmanCenterY - ghostCenterY, 2)
+                    );
+                    if (distance < cellSize) {
+                        if (ghost.scared) {
+                            // Eat ghost
+                            ghost.x = Math.floor(cols / 2) * cellSize;
+                            ghost.y = Math.floor(rows / 2) * cellSize;
+                            ghost.scared = false;
+                            ghost.speed = ghostSpeed;
+                            score += 200;
+                            scoreDisplay.textContent = score;
+                        } else {
+                            // Lose life
+                            loseLife();
+                        }
+                    }
+                });
+            }
+            // Lose a life
+            function loseLife() {
+                lives--;
+                livesDisplay.textContent = lives;
+                if (lives <= 0) {
+                    gameOver();
+                } else {
+                    // Reset positions
+                    pacmanPos = {
+                        x: Math.floor(cols / 2) * cellSize,
+                        y: Math.floor(rows / 2) * cellSize
+                    };
+                    direction = 'right';
+                    nextDirection = 'right';
+                    // Reset ghosts
+                    ghosts = [
+                        { element: blinky, x: 3 * cellSize, y: 3 * cellSize, color: '#FF0000', speed: ghostSpeed, direction: 'right', scared: false },
+                        { element: pinky, x: (cols - 4) * cellSize, y: 3 * cellSize, color: '#FFB8FF', speed: ghostSpeed, direction: 'left', scared: false },
+                        { element: inky, x: 3 * cellSize, y: (rows - 4) * cellSize, color: '#00FFFF', speed: ghostSpeed, direction: 'right', scared: false },
+                        { element: clyde, x: (cols - 4) * cellSize, y: (rows - 4) * cellSize, color: '#FFB852', speed: ghostSpeed, direction: 'left', scared: false }
+                    ];
+                    updatePositions();
+                }
+            }
+            // Game over
+            function gameOver() {
+                gameRunning = false;
+                finalScoreDisplay.textContent = score;
+                gameOverDisplay.style.display = 'flex';
+            }
+            // Game win
+            function gameWin() {
+                gameRunning = false;
+                finalScoreDisplay.textContent = score;
+                gameOverDisplay.querySelector('div').textContent = 'YOU WIN!';
+                gameOverDisplay.querySelector('div').className = 'text-4xl font-bold text-green-500 mb-4';
+                gameOverDisplay.style.display = 'flex';
+            }
+            // Game loop
+            function gameLoop() {
+                if (!gameRunning) return;
+                movePacman();
+                moveGhosts();
+                updatePositions();
+                requestAnimationFrame(gameLoop);
+            }
+            // Event listeners for controls
+            upBtn.addEventListener('click', () => nextDirection = 'up');
+            downBtn.addEventListener('click', () => nextDirection = 'down');
+            leftBtn.addEventListener('click', () => nextDirection = 'left');
+            rightBtn.addEventListener('click', () => nextDirection = 'right');
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                switch (e.key) {
+                    case 'ArrowUp': nextDirection = 'up'; break;
+                    case 'ArrowDown': nextDirection = 'down'; break;
+                    case 'ArrowLeft': nextDirection = 'left'; break;
+                    case 'ArrowRight': nextDirection = 'right'; break;
+                }
+            });
+            // Touch controls for mobile
+            let touchStartX = 0;
+            let touchStartY = 0;
+            maze.addEventListener('touchstart', (e) => {
+                touchStartX = e.touches[0].clientX;
+                touchStartY = e.touches[0].clientY;
+            });
+            maze.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                const touchEndX = e.touches[0].clientX;
+                const touchEndY = e.touches[0].clientY;
+                const diffX = touchEndX - touchStartX;
+                const diffY = touchEndY - touchStartY;
+                if (Math.abs(diffX) > Math.abs(diffY)) {
+                    // Horizontal swipe
+                    if (diffX > 0) {
+                        nextDirection = 'right';
+                    } else {
+                        nextDirection = 'left';
+                    }
+                } else {
+                    // Vertical swipe
+                    if (diffY > 0) {
+                        nextDirection = 'down';
+                    } else {
+                        nextDirection = 'up';
+                    }
+                }
+            });
+            // Restart game
+            restartBtn.addEventListener('click', initGame);
+            // Start the game
+            initGame();
+        });
+    </script>
+<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=jeromegenevray/jerome" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>