Spaces:

alvesrt
/

pac-man

Running

App Files Files Community

pac-man / index.html

alvesrt

Add 1 files

104e82c verified over 1 year ago

Raw

History Blame Contribute Delete

33.8 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pac-Man 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% 40%, 100% 60%); }
	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); }
	}

	@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
	}

	@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}

	.pacman {
	animation: pacman-mouth 0.5s infinite;
	}

	.ghost {
	animation: ghost-movement 1s infinite;
	}

	.ghost::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 10px;
	background: white;
	border-radius: 100px 100px 0 0;
	top: -10px;
	left: 10px;
	}

	.ghost::after {
	content: '';
	position: absolute;
	width: 4px;
	height: 4px;
	background: black;
	border-radius: 50%;
	top: -5px;
	left: 15px;
	box-shadow: 10px 0 black;
	}

	.ghost-eye {
	width: 6px;
	height: 6px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: -3px;
	left: 13px;
	}

	.ghost-pupil {
	width: 2px;
	height: 2px;
	background: black;
	border-radius: 50%;
	position: absolute;
	top: 1px;
	left: 1px;
	}

	.wall {
	background-color: #2563eb;
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	}

	.dot {
	width: 6px;
	height: 6px;
	background-color: #fbbf24;
	border-radius: 50%;
	box-shadow: 0 0 5px #fbbf24;
	}

	.power-pellet {
	width: 12px;
	height: 12px;
	background-color: #fbbf24;
	border-radius: 50%;
	box-shadow: 0 0 10px #fbbf24;
	animation: pulse 1s infinite;
	}

	.fruit {
	width: 16px;
	height: 16px;
	background-color: #dc2626;
	border-radius: 8px;
	box-shadow: 0 0 8px #dc2626;
	}

	#game-board {
	position: relative;
	width: 560px;
	height: 620px;
	border: 2px solid #1e40af;
	background-color: #1e1b4b;
	}

	.cell {
	width: 20px;
	height: 20px;
	position: absolute;
	}

	#score-display {
	font-family: 'Courier New', monospace;
	letter-spacing: 2px;
	}

	#game-over, #start-screen {
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 100;
	}

	.press-enter {
	animation: blink 1.5s infinite;
	}

	.title-shadow {
	text-shadow: 0 0 10px #fbbf24, 0 0 20px #fbbf24;
	}

	#start-screen {
	cursor: pointer;
	}
	</style>
	</head>
	<body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4">
	<div id="start-screen" class="absolute w-full h-full flex flex-col items-center justify-center text-white">
	<h1 class="text-6xl font-bold text-yellow-400 mb-8 title-shadow">PAC-MAN</h1>
	<div class="text-2xl mb-8">
	<div class="flex justify-center items-center mb-4">
	<div class="pacman w-10 h-10 bg-yellow-400 rounded-full mr-4"></div>
	<div class="ghost w-10 h-10 bg-red-500 rounded-t-full relative"></div>
	</div>
	<p class="press-enter text-3xl mt-8">PRESS ENTER TO START</p>
	<p class="text-xl mt-4">(or click anywhere)</p>
	</div>
	</div>

	<div class="text-center mb-4 hidden" id="game-header">
	<h1 class="text-4xl font-bold text-yellow-400 mb-2">PAC-MAN</h1>
	<div id="score-display" class="text-2xl font-mono text-white">
	SCORE: <span id="score">0</span>
	</div>
	</div>

	<div id="game-board" class="relative hidden"></div>

	<div class="mt-4 text-white hidden" id="game-controls">
	<p class="mb-2">Use arrow keys to move Pac-Man</p>
	<button id="restart-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded hidden">
	Play Again
	</button>
	</div>

	<div id="game-over" class="absolute hidden flex-col items-center justify-center text-white">
	<h2 class="text-4xl font-bold text-red-500 mb-4">GAME OVER</h2>
	<p class="text-2xl mb-4">Final Score: <span id="final-score">0</span></p>
	<button id="game-over-restart" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
	Play Again
	</button>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	// Game constants
	const CELL_SIZE = 20;
	const ROWS = 31;
	const COLS = 28;
	const BOARD_WIDTH = COLS * CELL_SIZE;
	const BOARD_HEIGHT = ROWS * CELL_SIZE;
	const FRUIT_DURATION = 10000; // 10 seconds in milliseconds

	// Game state
	let score = 0;
	let lives = 3;
	let pacman = { x: 14, y: 23, direction: 'right', nextDirection: 'right' };
	let ghosts = [];
	let dots = [];
	let powerPellets = [];
	let walls = [];
	let gameRunning = false;
	let scaredGhosts = false;
	let scaredTimer = null;
	let pacmanBoost = false;
	let pacmanBoostTimer = null;
	let fruit = null;
	let fruitTimer = null;

	// Maze layout (1 = wall, 0 = path, . = dot, o = power pellet)
	const layout = [
	'1111111111111111111111111111',
	'1............o............1',
	'1.1111.11111.111.11111.1111',
	'1.1111.11111.111.11111.1111',
	'1.1111.11111.111.11111.1111',
	'1..........................1',
	'1.1111.111.111111.111.1111',
	'1.1111.111.111111.111.1111',
	'1......111....11....111....1',
	'111111.111111.111111.111111',
	'111111.111111.111111.111111',
	'111111.111 111.1111',
	'111111.111 111111 111.1111',
	'111111.111 1 1 111.1111',
	'1............1 1......1',
	'1.1111.11111 111111 111.11',
	'1.1111.11111 111.11',
	'1.1111.11111 111111 111.111',
	'1......11111 1 1 111....1',
	'111111.11111 1 1 111.1111',
	'111111.11111 111111 111.1111',
	'111111.11111 111.1111',
	'1............111111......1',
	'1.1111.11111.111.11111.1111',
	'1.1111.11111.111.11111.1111',
	'1...o.......111....o.....1',
	'111.111.111.111111.111.1111',
	'111.111.111.111111.111.1111',
	'1......111....11....111....1',
	'1.11111111111.111.1111111.1',
	'1..........................1',
	'1111111111111111111111111111'
	];

	// Initialize game
	function initGame() {
	score = 0;
	lives = 3;
	document.getElementById('score').textContent = score;
	document.getElementById('game-over').classList.add('hidden');
	document.getElementById('restart-btn').classList.add('hidden');

	// Show game elements
	document.getElementById('game-header').classList.remove('hidden');
	document.getElementById('game-board').classList.remove('hidden');
	document.getElementById('game-controls').classList.remove('hidden');

	// Clear previous game elements
	document.getElementById('game-board').innerHTML = '';
	dots = [];
	powerPellets = [];
	walls = [];
	ghosts = [];
	fruit = null;
	if (fruitTimer) clearTimeout(fruitTimer);

	// Create game elements based on layout
	for (let y = 0; y < ROWS; y++) {
	for (let x = 0; x < COLS; x++) {
	const cell = layout[y][x];
	const cellElement = document.createElement('div');
	cellElement.className = 'cell';
	cellElement.style.left = `${x * CELL_SIZE}px`;
	cellElement.style.top = `${y * CELL_SIZE}px`;

	if (cell === '1') {
	// Wall
	cellElement.classList.add('wall');
	walls.push({ x, y });
	} else if (cell === '.') {
	// Dot
	const dot = document.createElement('div');
	dot.className = 'dot';
	dot.style.left = `${x * CELL_SIZE + 7}px`;
	dot.style.top = `${y * CELL_SIZE + 7}px`;
	document.getElementById('game-board').appendChild(dot);
	dots.push({ x, y, element: dot });
	} else if (cell === 'o') {
	// Power pellet
	const pellet = document.createElement('div');
	pellet.className = 'power-pellet';
	pellet.style.left = `${x * CELL_SIZE + 4}px`;
	pellet.style.top = `${y * CELL_SIZE + 4}px`;
	document.getElementById('game-board').appendChild(pellet);
	powerPellets.push({ x, y, element: pellet });
	}
	}
	}

	// Create Pac-Man
	const pacmanElement = document.createElement('div');
	pacmanElement.id = 'pacman';
	pacmanElement.className = 'pacman absolute w-5 h-5 bg-yellow-400 rounded-full';
	pacmanElement.style.left = `${pacman.x * CELL_SIZE}px`;
	pacmanElement.style.top = `${pacman.y * CELL_SIZE}px`;
	document.getElementById('game-board').appendChild(pacmanElement);

	// Create ghosts
	createGhost('blinky', 13, 11, 'red');
	createGhost('pinky', 14, 11, 'pink');
	createGhost('inky', 13, 14, 'cyan');
	createGhost('clyde', 14, 14, 'orange');

	gameRunning = true;
	requestAnimationFrame(gameLoop);
	startFruitAppearance();
	}

	function createGhost(id, x, y, color) {
	const ghost = {
	id,
	x,
	y,
	direction: 'up',
	speed: 0.8,
	isScared: false,
	isEaten: false
	};

	const ghostElement = document.createElement('div');
	ghostElement.id = id;
	ghostElement.className = `ghost absolute w-5 h-5 bg-${color}-500 rounded-t-full`;
	ghostElement.style.left = `${x * CELL_SIZE}px`;
	ghostElement.style.top = `${y * CELL_SIZE}px`;

	// Add eyes
	const leftEye = document.createElement('div');
	leftEye.className = 'ghost-eye';
	leftEye.style.left = '8px';

	const rightEye = document.createElement('div');
	rightEye.className = 'ghost-eye';
	rightEye.style.left = '18px';

	const leftPupil = document.createElement('div');
	leftPupil.className = 'ghost-pupil';

	const rightPupil = document.createElement('div');
	rightPupil.className = 'ghost-pupil';

	leftEye.appendChild(leftPupil);
	rightEye.appendChild(rightPupil);
	ghostElement.appendChild(leftEye);
	ghostElement.appendChild(rightEye);

	document.getElementById('game-board').appendChild(ghostElement);
	ghost.element = ghostElement;
	ghosts.push(ghost);

	return ghost;
	}

	// Game loop
	function gameLoop(timestamp) {
	if (!gameRunning) return;

	movePacman();
	moveGhosts();
	checkCollisions();
	updateDisplay();

	if (dots.length === 0 && powerPellets.length === 0) {
	// All dots and power pellets eaten - You Won!
	gameRunning = false;
	setTimeout(() => {
	alert('You Won! Final Score: ' + score);
	initGame();
	}, 500);
	return;
	}

	requestAnimationFrame(gameLoop);
	}

	// Move Pac-Man
	function movePacman() {
	const pacmanElement = document.getElementById('pacman');

	// Try to change direction if there's a next direction queued
	if (pacman.nextDirection !== pacman.direction) {
	const nextX = Math.round(pacman.x);
	const nextY = Math.round(pacman.y);

	if (canMove(nextX, nextY, pacman.nextDirection)) {
	pacman.direction = pacman.nextDirection;
	}
	}

	// Calculate new position
	let newX = pacman.x;
	let newY = pacman.y;

	switch (pacman.direction) {
	case 'left':
	newX -= 0.2;
	pacmanElement.style.transform = 'rotate(180deg)';
	break;
	case 'right':
	newX += 0.2;
	pacmanElement.style.transform = 'rotate(0deg)';
	break;
	case 'up':
	newY -= 0.2;
	pacmanElement.style.transform = 'rotate(-90deg)';
	break;
	case 'down':
	newY += 0.2;
	pacmanElement.style.transform = 'rotate(90deg)';
	break;
	}

	// Check if new position is valid
	if (canMove(Math.floor(newX), Math.floor(newY), pacman.direction)) {
	pacman.x = newX;
	pacman.y = newY;

	// Handle tunnel/wrap-around
	if (pacman.x < 0) pacman.x = COLS - 1;
	if (pacman.x >= COLS) pacman.x = 0;

	// Update position
	pacmanElement.style.left = `${pacman.x * CELL_SIZE}px`;
	pacmanElement.style.top = `${pacman.y * CELL_SIZE}px`;
	}
	}

	// Move ghosts
	function moveGhosts() {
	ghosts.forEach(ghost => {
	if (ghost.isEaten) {
	// Ghost is returning to base
	const targetX = 13;
	const targetY = 11;

	if (ghost.x < targetX) ghost.direction = 'right';
	else if (ghost.x > targetX) ghost.direction = 'left';
	else if (ghost.y < targetY) ghost.direction = 'down';
	else if (ghost.y > targetY) ghost.direction = 'up';
	else {
	ghost.isEaten = false;
	ghost.isScared = false;
	ghost.element.classList.remove('bg-blue-500');
	ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
	}
	} else {
	// Simple AI for ghost movement
	const directions = ['up', 'down', 'left', 'right'];
	const oppositeDir = {
	'up': 'down',
	'down': 'up',
	'left': 'right',
	'right': 'left'
	};

	// Don't go back the way you came
	const possibleDirections = directions.filter(dir => dir !== oppositeDir[ghost.direction]);

	// Filter to only valid moves
	const validDirections = possibleDirections.filter(dir => {
	const testX = Math.floor(ghost.x);
	const testY = Math.floor(ghost.y);
	return canMove(testX, testY, dir);
	});

	if (validDirections.length > 0) {
	// Choose random direction (simple AI)
	ghost.direction = validDirections[Math.floor(Math.random() * validDirections.length)];
	}
	}

	// Move ghost
	let newX = ghost.x;
	let newY = ghost.y;

	switch (ghost.direction) {
	case 'left':
	newX -= ghost.speed * 0.05;
	break;
	case 'right':
	newX += ghost.speed * 0.05;
	break;
	case 'up':
	newY -= ghost.speed * 0.05;
	break;
	case 'down':
	newY += ghost.speed * 0.05;
	break;
	}

	// Check if new position is valid
	if (canMove(Math.floor(newX), Math.floor(newY), ghost.direction)) {
	ghost.x = newX;
	ghost.y = newY;

	// Handle tunnel/wrap-around
	if (ghost.x < 0) ghost.x = COLS - 1;
	if (ghost.x >= COLS) ghost.x = 0;

	// Update position
	ghost.element.style.left = `${ghost.x * CELL_SIZE}px`;
	ghost.element.style.top = `${ghost.y * CELL_SIZE}px`;
	}
	});
	}

	// Check if movement is possible
	function canMove(x, y, direction) {
	// Check if out of bounds (except for tunnels)
	if (y < 0 \|\| y >= ROWS) return false;

	// Check for walls
	const nextX = direction === 'left' ? x - 1 : direction === 'right' ? x + 1 : x;
	const nextY = direction === 'up' ? y - 1 : direction === 'down' ? y + 1 : y;

	// Allow tunnel wrap-around
	if (nextX < 0 \|\| nextX >= COLS) {
	return y === 14 && (nextX < 0 \|\| nextX >= COLS);
	}

	if (nextY < 0 \|\| nextY >= ROWS) return false;

	return layout[nextY][nextX] !== '1';
	}

	// Function to randomly place the fruit
	function placeFruit() {
	if (fruit) {
	document.getElementById('game-board').removeChild(fruit.element);
	fruit = null;
	}

	const emptyCells = [];
	for (let y = 0; y < ROWS; y++) {
	for (let x = 0; x < COLS; x++) {
	if (layout[y][x] === '0') {
	emptyCells.push({ x, y });
	}
	}
	}

	if (emptyCells.length > 0) {
	const randomIndex = Math.floor(Math.random() * emptyCells.length);
	const fruitPosition = emptyCells[randomIndex];

	const fruitElement = document.createElement('div');
	fruitElement.className = 'fruit absolute';
	fruitElement.style.left = `${fruitPosition.x * CELL_SIZE + 2}px`;
	fruitElement.style.top = `${fruitPosition.y * CELL_SIZE + 2}px`;
	document.getElementById('game-board').appendChild(fruitElement);

	fruit = { x: fruitPosition.x, y: fruitPosition.y, element: fruitElement };

	// Set timer to remove the fruit
	fruitTimer = setTimeout(() => {
	if (fruit) {
	document.getElementById('game-board').removeChild(fruit.element);
	fruit = null;
	}
	}, FRUIT_DURATION);
	}
	}

	// Function to start the fruit appearance interval
	function startFruitAppearance() {
	// Appear randomly after some time (e.g., between 5 to 15 seconds)
	const randomDelay = Math.random() * 10000 + 5000;
	setTimeout(placeFruit, randomDelay);
	}

	// Check for collisions
	function checkCollisions() {
	const pacmanCellX = Math.round(pacman.x);
	const pacmanCellY = Math.round(pacman.y);

	// Check for dot collisions
	for (let i = dots.length - 1; i >= 0; i--) {
	const dot = dots[i];
	if (dot.x === pacmanCellX && dot.y === pacmanCellY) {
	// Remove dot
	document.getElementById('game-board').removeChild(dot.element);
	dots.splice(i, 1);
	score += 10;
	document.getElementById('score').textContent = score;
	}
	}

	// Check for power pellet collisions
	for (let i = powerPellets.length - 1; i >= 0; i--) {
	const pellet = powerPellets[i];
	if (pellet.x === pacmanCellX && pellet.y === pacmanCellY) {
	// Remove pellet
	document.getElementById('game-board').removeChild(pellet.element);
	powerPellets.splice(i, 1);
	score += 50;
	document.getElementById('score').textContent = score;

	// Make ghosts scared
	scaredGhosts = true;
	ghosts.forEach(ghost => {
	if (!ghost.isEaten) {
	ghost.isScared = true;
	ghost.element.classList.remove(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
	ghost.element.classList.add('bg-blue-500');
	}
	});

	// Set timer to end scared state
	if (scaredTimer) clearTimeout(scaredTimer);
	scaredTimer = setTimeout(() => {
	scaredGhosts = false;
	ghosts.forEach(ghost => {
	if (!ghost.isEaten) {
	ghost.isScared = false;
	ghost.element.classList.remove('bg-blue-500');
	ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
	}
	});
	}, 10000);
	}
	}

	// Check for fruit collision
	if (fruit && fruit.x === pacmanCellX && fruit.y === pacmanCellY) {
	// Pac-Man eats the fruit
	document.getElementById('game-board').removeChild(fruit.element);
	fruit = null;
	score += 100; // Award points for eating the fruit
	document.getElementById('score').textContent = score;

	// Activate Pac-Man boost
	pacmanBoost = true;
	if (pacmanBoostTimer) clearTimeout(pacmanBoostTimer);
	pacmanBoostTimer = setTimeout(() => {
	pacmanBoost = false;
	}, FRUIT_DURATION);

	// Ensure ghosts become scared if a power pellet was active
	if (!scaredGhosts) {
	scaredGhosts = true;
	ghosts.forEach(ghost => {
	if (!ghost.isEaten) {
	ghost.isScared = true;
	ghost.element.classList.remove(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
	ghost.element.classList.add('bg-blue-500');
	}
	});
	if (scaredTimer) clearTimeout(scaredTimer);
	scaredTimer = setTimeout(() => {
	scaredGhosts = false;
	ghosts.forEach(ghost => {
	if (!ghost.isEaten) {
	ghost.isScared = false;
	ghost.element.classList.remove('bg-blue-500');
	ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
	}
	});
	}, FRUIT_DURATION);
	}
	// Schedule the next fruit appearance
	startFruitAppearance();
	}

	// Check for ghost collisions
	ghosts.forEach(ghost => {
	const ghostX = Math.round(ghost.x);
	const ghostY = Math.round(ghost.y);

	if (ghostX === pacmanCellX && ghostY === pacmanCellY) {
	if (ghost.isScared && pacmanBoost) {
	// Eat ghost
	ghost.isScared = false;
	ghost.isEaten = true;
	ghost.element.classList.remove('bg-blue-500', 'bg-white');
	ghost.element.classList.add('bg-gray-400');
	score += 200;
	document.getElementById('score').textContent = score;
	} else if (!ghost.isEaten) {
	// Lose life
	lives--;
	if (lives <= 0) {
	gameOver();
	} else {
	// Reset positions
	resetPositions();
	}
	}
	}
	});
	}

	// Reset positions after losing a life
	function resetPositions() {
	pacman = { x: 14, y: 23, direction: 'right', nextDirection: 'right' };
	document.getElementById('pacman').style.left = `${pacman.x * CELL_SIZE}px`;
	document.getElementById('pacman').style.top = `${pacman.y * CELL_SIZE}px`;
	document.getElementById('pacman').style.transform = 'rotate(0deg)';

	ghosts.forEach(ghost => {
	if (ghost.id === 'blinky' \|\| ghost.id === 'pinky') {
	ghost.x = ghost.id === 'blinky' ? 13 : 14;
	ghost.y = 11;
	} else {
	ghost.x = ghost.id === 'inky' ? 13 : 14;
	ghost.y = 14;
	}

	ghost.direction = 'up';
	ghost.isScared = false;
	ghost.isEaten = false;
	ghost.element.classList.remove('bg-blue-500', 'bg-gray-400', 'bg-white');
	ghost.element.classList.add(`bg-${ghost.id === 'blinky' ? 'red' : ghost.id === 'pinky' ? 'pink' : ghost.id === 'inky' ? 'cyan' : 'orange'}-500`);
	ghost.element.style.left = `${ghost.x * CELL_SIZE}px`;
	ghost.element.style.top = `${ghost.y * CELL_SIZE}px`;
	});

	// Reset scared state
	scaredGhosts = false;
	if (scaredTimer) clearTimeout(scaredTimer);
	pacmanBoost = false;
	if (pacmanBoostTimer) clearTimeout(pacmanBoostTimer);
	}

	// Game over
	function gameOver() {
	gameRunning = false;
	document.getElementById('final-score').textContent = score;
	document.getElementById('game-over').classList.remove('hidden');
	document.getElementById('restart-btn').classList.remove('hidden');
	if (fruitTimer) clearTimeout(fruitTimer);
	}

	// Update display
	function updateDisplay() {
	// Update Pac-Man mouth direction
	const pacmanElement = document.getElementById('pacman');
	pacmanElement.style.clipPath = 'polygon(50% 50%, 100% 0%, 100% 100%)';

	// Update ghost states
	ghosts.forEach(ghost => {
	if (ghost.isScared) {
	// Blinking effect when scared time is almost up
	const remainingScaredTime = scaredTimer ? parseInt((scaredTimer._idleTimeout - scaredTimer._idleStart) / 1000) : 0;
	if (remainingScaredTime <= 3 && Date.now() % 200 < 100) {
	ghost.element.classList.remove('bg-blue-500');
	ghost.element.classList.add('bg-white');
	} else {
	ghost.element.classList.remove('bg-white');
	ghost.element.classList.add('bg-blue-500');
	}
	}
	});
	}

	// Start the game when Enter is pressed or screen is clicked
	function startGame() {
	document.getElementById('start-screen').classList.add('hidden');
	initGame();
	}

	// Event listeners
	document.addEventListener('keydown', (e) => {
	if (e.key === 'Enter' && !gameRunning && !document.getElementById('start-screen').classList.contains('hidden')) {
	startGame();
	}

	if (!gameRunning) return;

	switch (e.key) {
	case 'ArrowLeft':
	pacman.nextDirection = 'left';
	break;
	case 'ArrowRight':
	pacman.nextDirection = 'right';
	break;
	case 'ArrowUp':
	pacman.nextDirection = 'up';
	break;
	case 'ArrowDown':
	pacman.nextDirection = 'down';
	break;
	}
	});

	document.getElementById('restart-btn').addEventListener('click', initGame);
	document.getElementById('game-over-restart').addEventListener('click', () => {
	document.getElementById('game-over').classList.add('hidden');
	initGame();
	});

	// Click on the start screen to begin
	document.getElementById('start-screen').addEventListener('click', startGame);
	});
	</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=alvesrt/pac-man" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
	</html>