Hugging Face's logo

Spaces:
Andosky
/
pacman
Running

App Files Community
pacman / index.html
Andosky's picture
Andosky
Add 1 files
533b773 verified
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 Clone</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@keyframes pacman-animation {
0% { transform: rotate(0deg); }
50% { transform: rotate(-45deg); }
100% { transform: rotate(0deg); }
}
@keyframes ghost-animation {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.pacman {
animation: pacman-animation 0.5s infinite;
transform-origin: center;
}
.ghost {
animation: ghost-animation 1s infinite ease-in-out;
}
.blinky { background-color: #FF0000; }
.pinky { background-color: #FFB8FF; }
.inky { background-color: #00FFFF; }
.clyde { background-color: #FFB852; }
.eye {
background-color: white;
border-radius: 50%;
position: absolute;
width: 10px;
height: 10px;
}
.pupil {
background-color: #0000AA;
border-radius: 50%;
position: absolute;
width: 5px;
height: 5px;
}
.dot {
width: 8px;
height: 8px;
background-color: #FFF;
border-radius: 50%;
position: absolute;
}
.power-pellet {
width: 16px;
height: 16px;
background-color: #FFF;
border-radius: 50%;
position: absolute;
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.7);
}
.wall {
background-color: #2121FF;
position: absolute;
}
#game-container {
position: relative;
width: 600px;
height: 600px;
background-color: #000;
margin: 0 auto;
overflow: hidden;
}
#score-display {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-family: 'Courier New', monospace;
font-size: 20px;
z-index: 100;
}
#lives-display {
position: absolute;
top: 10px;
right: 10px;
color: white;
font-family: 'Courier New', monospace;
font-size: 20px;
z-index: 100;
}
#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: 'Courier New', monospace;
font-size: 48px;
text-align: center;
display: none;
z-index: 100;
}
#start-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 200;
}
#start-screen h1 {
color: #FF0;
font-family: 'Courier New', monospace;
font-size: 48px;
margin-bottom: 30px;
text-shadow: 0 0 10px #FF0;
}
#start-button {
background-color: #FF0;
color: #000;
border: none;
padding: 15px 30px;
font-family: 'Courier New', monospace;
font-size: 24px;
cursor: pointer;
border-radius: 10px;
transition: all 0.3s;
}
#start-button:hover {
background-color: #FFF;
transform: scale(1.1);
}
.vulnerable-ghost {
background-color: #0000FF !important;
opacity: 0.7 !important;
}
</style>
</head>
<body class="bg-gray-900 flex flex-col items-center justify-center min-h-screen">
<h1 class="text-yellow-400 text-4xl font-bold mb-8">Pac-Man Clone</h1>
<div id="game-container">
<div id="score-display">Score: 0</div>
<div id="lives-display">Lives: 3</div>
<div id="game-over">GAME OVER<br><button id="restart-button" class="mt-4 bg-yellow-400 text-black px-4 py-2 rounded">Play Again</button></div>
<div id="start-screen">
<h1>PAC-MAN CLONE</h1>
<button id="start-button">START GAME</button>
<div class="mt-8 text-white text-center">
<p class="mb-2">Use arrow keys to move</p>
<p class="mb-2">Eat all dots to win</p>
<p>Avoid ghosts (except when powered up)</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gameContainer = document.getElementById('game-container');
const scoreDisplay = document.getElementById('score-display');
const livesDisplay = document.getElementById('lives-display');
const gameOverDisplay = document.getElementById('game-over');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const containerWidth = 600;
const containerHeight = 600;
const gridSize = 20;
const cellSize = containerWidth / gridSize;
let score = 0;
let lives = 3;
let gameRunning = false;
let dotsRemaining = 0;
let powerPelletActive = false;
let powerPelletTimeout;
let gameLoop;
// Game elements
let pacman = {
x: 9,
y: 15,
element: null,
direction: 'right',
nextDirection: 'right'
};
const ghosts = [
{ name: 'blinky', x: 9, y: 7, element: null, direction: 'left', color: 'red' },
{ name: 'pinky', x: 9, y: 9, element: null, direction: 'up', color: 'pink' },
{ name: 'inky', x: 8, y: 9, element: null, direction: 'right', color: 'cyan' },
{ name: 'clyde', x: 10, y: 9, element: null, direction: 'down', color: 'orange' }
];
// Maze layout (1 = wall, 0 = path, 2 = power pellet)
const maze = [
[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,1,1,0,1,1,1,1,0,1,1,1,0,1],
[1,0,1,1,0,1,1,1,1,0,1,1,1,1,0,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,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,0,1],
[1,0,0,0,0,1,0,0,0,1,1,0,0,1,0,0,0,0,0,1],
[1,1,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,1,1,1],
[0,0,0,1,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,0],
[1,1,1,1,0,1,0,1,1,2,2,1,1,1,0,1,1,1,1,1],
[0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,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,1,0,0,0,1,1,0,0,0,1,0,0,0,0,1],
[1,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,1],
[1,0,0,1,0,0,0,1,0,0,0,0,1,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,1,0,0,1,1,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]
];
// Initialize game
function initGame() {
// Clear previous game elements
gameContainer.querySelectorAll('.pacman, .ghost, .dot, .power-pellet, .wall').forEach(el => el.remove());
// Reset game state
score = 0;
lives = 3;
dotsRemaining = 0;
powerPelletActive = false;
clearTimeout(powerPelletTimeout);
clearInterval(gameLoop);
// Reset Pac-Man position
pacman.x = 9;
pacman.y = 15;
pacman.direction = 'right';
pacman.nextDirection = 'right';
// Reset ghosts positions
ghosts[0].x = 9; ghosts[0].y = 7; ghosts[0].direction = 'left';
ghosts[1].x = 9; ghosts[1].y = 9; ghosts[1].direction = 'up';
ghosts[2].x = 8; ghosts[2].y = 9; ghosts[2].direction = 'right';
ghosts[3].x = 10; ghosts[3].y = 9; ghosts[3].direction = 'down';
// Create maze walls
createMaze();
// Create dots and power pellets
createDots();
// Create Pac-Man
createPacman();
// Create ghosts
ghosts.forEach(ghost => createGhost(ghost));
// Update displays
updateScore();
updateLives();
// Hide game over screen
gameOverDisplay.style.display = 'none';
}
function createMaze() {
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
if (maze[y][x] === 1) {
const wall = document.createElement('div');
wall.className = 'wall';
wall.style.width = `${cellSize}px`;
wall.style.height = `${cellSize}px`;
wall.style.left = `${x * cellSize}px`;
wall.style.top = `${y * cellSize}px`;
gameContainer.appendChild(wall);
}
}
}
}
function createDots() {
dotsRemaining = 0;
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
if (maze[y][x] === 0) {
const dot = document.createElement('div');
dot.className = 'dot';
dot.style.left = `${x * cellSize + cellSize / 2 - 4}px`;
dot.style.top = `${y * cellSize + cellSize / 2 - 4}px`;
gameContainer.appendChild(dot);
dotsRemaining++;
} else if (maze[y][x] === 2) {
const powerPellet = document.createElement('div');
powerPellet.className = 'power-pellet';
powerPellet.style.left = `${x * cellSize + cellSize / 2 - 8}px`;
powerPellet.style.top = `${y * cellSize + cellSize / 2 - 8}px`;
gameContainer.appendChild(powerPellet);
}
}
}
}
function createPacman() {
if (pacman.element) {
gameContainer.removeChild(pacman.element);
}
pacman.element = document.createElement('div');
pacman.element.className = 'pacman absolute';
pacman.element.style.width = `${cellSize}px`;
pacman.element.style.height = `${cellSize}px`;
pacman.element.style.left = `${pacman.x * cellSize}px`;
pacman.element.style.top = `${pacman.y * cellSize}px`;
pacman.element.style.backgroundColor = '#FF0';
pacman.element.style.borderRadius = '50%';
pacman.element.style.zIndex = '10';
// Create Pac-Man's mouth
const mouth = document.createElement('div');
mouth.style.position = 'absolute';
mouth.style.width = `${cellSize}px`;
mouth.style.height = `${cellSize}px`;
mouth.style.backgroundColor = '#000';
mouth.style.clipPath = 'polygon(50% 50%, 100% 0%, 100% 100%)';
pacman.element.appendChild(mouth);
gameContainer.appendChild(pacman.element);
}
function createGhost(ghost) {
if (ghost.element) {
gameContainer.removeChild(ghost.element);
}
ghost.element = document.createElement('div');
ghost.element.className = `ghost absolute ${ghost.name}`;
ghost.element.style.width = `${cellSize}px`;
ghost.element.style.height = `${cellSize}px`;
ghost.element.style.left = `${ghost.x * cellSize}px`;
ghost.element.style.top = `${ghost.y * cellSize}px`;
ghost.element.style.borderRadius = '50% 50% 0 0';
ghost.element.style.zIndex = '5';
// Ghost body
const body = document.createElement('div');
body.style.position = 'absolute';
body.style.width = '100%';
body.style.height = '100%';
body.style.borderRadius = '50% 50% 0 0';
ghost.element.appendChild(body);
// Ghost eyes
const leftEye = document.createElement('div');
leftEye.className = 'eye';
leftEye.style.left = '25%';
leftEye.style.top = '25%';
ghost.element.appendChild(leftEye);
const rightEye = document.createElement('div');
rightEye.className = 'eye';
rightEye.style.right = '25%';
rightEye.style.top = '25%';
ghost.element.appendChild(rightEye);
// Ghost pupils
const leftPupil = document.createElement('div');
leftPupil.className = 'pupil';
leftPupil.style.left = '2px';
leftPupil.style.top = '2px';
leftEye.appendChild(leftPupil);
const rightPupil = document.createElement('div');
rightPupil.className = 'pupil';
rightPupil.style.right = '2px';
rightPupil.style.top = '2px';
rightEye.appendChild(rightPupil);
// Ghost feet
const feetContainer = document.createElement('div');
feetContainer.style.position = 'absolute';
feetContainer.style.bottom = '0';
feetContainer.style.width = '100%';
feetContainer.style.height = '10px';
feetContainer.style.display = 'flex';
feetContainer.style.justifyContent = 'space-between';
ghost.element.appendChild(feetContainer);
for (let i = 0; i < 3; i++) {
const foot = document.createElement('div');
foot.style.width = '10px';
foot.style.height = '10px';
foot.style.backgroundColor = 'inherit';
foot.style.borderRadius = '0 0 5px 5px';
feetContainer.appendChild(foot);
}
gameContainer.appendChild(ghost.element);
}
function updateScore() {
scoreDisplay.textContent = `Score: ${score}`;
}
function updateLives() {
livesDisplay.textContent = `Lives: ${lives}`;
}
function movePacman() {
let newX = pacman.x;
let newY = pacman.y;
// Try to move in the next direction first
if (pacman.nextDirection !== pacman.direction) {
switch (pacman.nextDirection) {
case 'up':
if (isValidMove(pacman.x, pacman.y - 1)) {
pacman.direction = pacman.nextDirection;
}
break;
case 'down':
if (isValidMove(pacman.x, pacman.y + 1)) {
pacman.direction = pacman.nextDirection;
}
break;
case 'left':
if (isValidMove(pacman.x - 1, pacman.y)) {
pacman.direction = pacman.nextDirection;
}
break;
case 'right':
if (isValidMove(pacman.x + 1, pacman.y)) {
pacman.direction = pacman.nextDirection;
}
break;
}
}
// Move in the current direction
switch (pacman.direction) {
case 'up':
if (isValidMove(pacman.x, pacman.y - 1)) {
newY--;
}
break;
case 'down':
if (isValidMove(pacman.x, pacman.y + 1)) {
newY++;
}
break;
case 'left':
if (isValidMove(pacman.x - 1, pacman.y)) {
newX--;
}
break;
case 'right':
if (isValidMove(pacman.x + 1, pacman.y)) {
newX++;
}
break;
}
// Handle tunnel
if (newX < 0) newX = gridSize - 1;
if (newX >= gridSize) newX = 0;
// Update position if valid
if (isValidMove(newX, newY) || (newX !== pacman.x || newY !== pacman.y)) {
pacman.x = newX;
pacman.y = newY;
}
// Update Pac-Man's position on screen
pacman.element.style.left = `${pacman.x * cellSize}px`;
pacman.element.style.top = `${pacman.y * cellSize}px`;
// Rotate Pac-Man based on direction
switch (pacman.direction) {
case 'up':
pacman.element.style.transform = 'rotate(-90deg)';
break;
case 'down':
pacman.element.style.transform = 'rotate(90deg)';
break;
case 'left':
pacman.element.style.transform = 'rotate(180deg)';
break;
case 'right':
pacman.element.style.transform = 'rotate(0deg)';
break;
}
// Check for dots or power pellets
checkCollisions();
}
function isValidMove(x, y) {
// Check if position is outside the grid (tunnel)
if (x < 0 || x >= gridSize || y < 0 || y >= gridSize) {
return true;
}
// Check if position is a wall
return maze[y][x] !== 1;
}
function checkCollisions() {
// Check for dots
const dots = document.querySelectorAll('.dot');
dots.forEach(dot => {
const dotX = parseInt(dot.style.left) / cellSize;
const dotY = parseInt(dot.style.top) / cellSize;
if (Math.abs(pacman.x - dotX) < 0.5 && Math.abs(pacman.y - dotY) < 0.5) {
dot.remove();
score += 10;
dotsRemaining--;
updateScore();
}
});
// Check for power pellets
const powerPellets = document.querySelectorAll('.power-pellet');
powerPellets.forEach(pellet => {
const pelletX = parseInt(pellet.style.left) / cellSize;
const pelletY = parseInt(pellet.style.top) / cellSize;
if (Math.abs(pacman.x - pelletX) < 0.5 && Math.abs(pacman.y - pelletY) < 0.5) {
pellet.remove();
score += 50;
updateScore();
activatePowerPellet();
}
});
// Check for ghosts
ghosts.forEach(ghost => {
if (Math.abs(pacman.x - ghost.x) < 0.8 && Math.abs(pacman.y - ghost.y) < 0.8) {
if (powerPelletActive) {
// Ghost is vulnerable - eat it
ghost.element.classList.add('vulnerable-ghost');
setTimeout(() => {
// Reset ghost position
ghost.x = 9;
ghost.y = 9;
ghost.element.style.left = `${ghost.x * cellSize}px`;
ghost.element.style.top = `${ghost.y * cellSize}px`;
ghost.element.classList.remove('vulnerable-ghost');
ghost.element.className = `ghost absolute ${ghost.name}`;
}, 1000);
score += 200;
updateScore();
} else {
// Pac-Man dies
lives--;
updateLives();
if (lives <= 0) {
gameOver();
} else {
// Reset positions
pacman.x = 9;
pacman.y = 15;
pacman.direction = 'right';
pacman.nextDirection = 'right';
pacman.element.style.left = `${pacman.x * cellSize}px`;
pacman.element.style.top = `${pacman.y * cellSize}px`;
pacman.element.style.transform = 'rotate(0deg)';
ghosts.forEach(g => {
g.x = [9, 9, 8, 10][ghosts.indexOf(g)];
g.y = [7, 9, 9, 9][ghosts.indexOf(g)];
g.direction = ['left', 'up', 'right', 'down'][ghosts.indexOf(g)];
g.element.style.left = `${g.x * cellSize}px`;
g.element.style.top = `${g.y * cellSize}px`;
});
}
}
}
});
// Check win condition
if (dotsRemaining <= 0) {
setTimeout(() => {
alert('Congratulations! You won!');
initGame();
}, 500);
}
}
function activatePowerPellet() {
powerPelletActive = true;
clearTimeout(powerPelletTimeout);
// Make ghosts vulnerable
ghosts.forEach(ghost => {
ghost.element.classList.add('vulnerable-ghost');
});
// Set timeout to deactivate power pellet
powerPelletTimeout = setTimeout(() => {
powerPelletActive = false;
ghosts.forEach(ghost => {
ghost.element.classList.remove('vulnerable-ghost');
ghost.element.className = `ghost absolute ${ghost.name}`;
});
}, 10000); // 10 seconds
}
function moveGhosts() {
ghosts.forEach(ghost => {
// Simple AI: move randomly but prefer directions that don't reverse
const directions = ['up', 'down', 'left', 'right'];
const oppositeDirections = {
'up': 'down',
'down': 'up',
'left': 'right',
'right': 'left'
};
// Filter out the opposite direction to prevent 180-degree turns
let possibleDirections = directions.filter(dir => dir !== oppositeDirections[ghost.direction]);
// Try to find a valid move
let newDirection = ghost.direction;
let newX = ghost.x;
let newY = ghost.y;
// First try to keep moving in the same direction
let moved = false;
switch (ghost.direction) {
case 'up':
if (isValidMove(ghost.x, ghost.y - 1)) {
newY--;
moved = true;
}
break;
case 'down':
if (isValidMove(ghost.x, ghost.y + 1)) {
newY++;
moved = true;
}
break;
case 'left':
if (isValidMove(ghost.x - 1, ghost.y)) {
newX--;
moved = true;
}
break;
case 'right':
if (isValidMove(ghost.x + 1, ghost.y)) {
newX++;
moved = true;
}
break;
}
// If current direction is blocked, try random other directions
if (!moved) {
// Shuffle possible directions
possibleDirections = possibleDirections.sort(() => Math.random() - 0.5);
for (const dir of possibleDirections) {
switch (dir) {
case 'up':
if (isValidMove(ghost.x, ghost.y - 1)) {
newDirection = 'up';
newY--;
moved = true;
break;
}
case 'down':
if (isValidMove(ghost.x, ghost.y + 1)) {
newDirection = 'down';
newY++;
moved = true;
break;
}
case 'left':
if (isValidMove(ghost.x - 1, ghost.y)) {
newDirection = 'left';
newX--;
moved = true;
break;
}
case 'right':
if (isValidMove(ghost.x + 1, ghost.y)) {
newDirection = 'right';
newX++;
moved = true;
break;
}
}
if (moved) break;
}
}
// Handle tunnel
if (newX < 0) newX = gridSize - 1;
if (newX >= gridSize) newX = 0;
// Update ghost position
ghost.x = newX;
ghost.y = newY;
ghost.direction = newDirection;
// Update ghost's position on screen
ghost.element.style.left = `${ghost.x * cellSize}px`;
ghost.element.style.top = `${ghost.y * cellSize}px`;
// Update ghost's eyes to look in the direction it's moving
const leftPupil = ghost.element.querySelector('.eye:first-child .pupil');
const rightPupil = ghost.element.querySelector('.eye:last-child .pupil');
leftPupil.style.left = '';
leftPupil.style.right = '';
leftPupil.style.top = '';
leftPupil.style.bottom = '';
rightPupil.style.left = '';
rightPupil.style.right = '';
rightPupil.style.top = '';
rightPupil.style.bottom = '';
switch (ghost.direction) {
case 'up':
leftPupil.style.left = '2px';
leftPupil.style.top = '0';
rightPupil.style.right = '2px';
rightPupil.style.top = '0';
break;
case 'down':
leftPupil.style.left = '2px';
leftPupil.style.bottom = '0';
rightPupil.style.right = '2px';
rightPupil.style.bottom = '0';
break;
case 'left':
leftPupil.style.left = '0';
leftPupil.style.top = '2px';
rightPupil.style.right = '4px';
rightPupil.style.top = '2px';
break;
case 'right':
leftPupil.style.left = '4px';
leftPupil.style.top = '2px';
rightPupil.style.right = '0';
rightPupil.style.top = '2px';
break;
}
});
}
function gameOver() {
gameRunning = false;
gameOverDisplay.style.display = 'block';
}
// Event listeners
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
pacman.nextDirection = 'up';
break;
case 'ArrowDown':
pacman.nextDirection = 'down';
break;
case 'ArrowLeft':
pacman.nextDirection = 'left';
break;
case 'ArrowRight':
pacman.nextDirection = 'right';
break;
}
});
startButton.addEventListener('click', () => {
startScreen.style.display = 'none';
initGame();
startGame();
});
restartButton.addEventListener('click', () => {
gameOverDisplay.style.display = 'none';
initGame();
startGame();
});
function startGame() {
gameRunning = true;
// Game loop
gameLoop = setInterval(() => {
if (!gameRunning) {
clearInterval(gameLoop);
return;
}
movePacman();
moveGhosts();
}, 150); // Adjust speed as needed
}
});
</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=Andosky/andosky-game" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>