Learn how to create a Pac-Man clone game using HTML, CSS, and JavaScript. This tutorial covers game mechanics, colorful graphics, and professional design, perfect for web development enthusiasts. Build your own interactive game today!
index.html
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>Pac-Man Clone</h1>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div class="controls">
<button onclick="startGame()">Start Game</button>
<p id="score">Score: 0</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #111;
text-align: center;
}
.game-container {
background: linear-gradient(135deg, #ffcc00, #ff6633);
border-radius: 20px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
width: 450px;
}
h1 {
color: white;
font-size: 36px;
margin-bottom: 20px;
}
canvas {
background-color: #000;
border: 5px solid #fff;
border-radius: 10px;
}
.controls {
margin-top: 20px;
}
button {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
#score {
font-size: 20px;
margin-top: 10px;
}
script.js
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const gridSize = 20;
let pacMan, ghosts, food, score, gameInterval;
let dx = gridSize, dy = 0;
let pacManSpeed = 4;
let ghostSpeed = 2;
function startGame() {
pacMan = {
x: 100,
y: 100,
size: gridSize,
color: "yellow",
};
ghosts = [
{ x: 200, y: 200, size: gridSize, color: "red", dx: ghostSpeed, dy: 0 },
{ x: 250, y: 250, size: gridSize, color: "pink", dx: -ghostSpeed, dy: 0 },
];
food = { x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize };
score = 0;
document.getElementById("score").innerText = `Score: ${score}`;
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, 1000 / pacManSpeed);
}
function gameLoop() {
clearCanvas();
drawFood();
movePacMan();
drawPacMan();
moveGhosts();
drawGhosts();
checkCollisions();
updateScore();
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawPacMan() {
ctx.beginPath();
ctx.arc(pacMan.x + pacMan.size / 2, pacMan.y + pacMan.size / 2, pacMan.size / 2, 0.2 * Math.PI, 1.8 * Math.PI); // Pac-Man shape
ctx.lineTo(pacMan.x + pacMan.size / 2, pacMan.y + pacMan.size / 2);
ctx.fillStyle = pacMan.color;
ctx.fill();
}
function movePacMan() {
pacMan.x += dx;
pacMan.y += dy;
if (pacMan.x >= canvas.width) pacMan.x = 0;
if (pacMan.x < 0) pacMan.x = canvas.width - gridSize;
if (pacMan.y >= canvas.height) pacMan.y = 0;
if (pacMan.y < 0) pacMan.y = canvas.height - gridSize;
}
function moveGhosts() {
ghosts.forEach(ghost => {
ghost.x += ghost.dx;
ghost.y += ghost.dy;
if (ghost.x >= canvas.width || ghost.x < 0) ghost.dx *= -1;
if (ghost.y >= canvas.height || ghost.y < 0) ghost.dy *= -1;
});
}
function drawGhosts() {
ghosts.forEach(ghost => {
ctx.beginPath();
ctx.arc(ghost.x + ghost.size / 2, ghost.y + ghost.size / 2, ghost.size / 2, 0, 2 * Math.PI);
ctx.fillStyle = ghost.color;
ctx.fill();
});
}
function drawFood() {
ctx.beginPath();
ctx.arc(food.x + gridSize / 2, food.y + gridSize / 2, gridSize / 2, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
}
function checkCollisions() {
// Check Pac-Man eating food
if (pacMan.x === food.x && pacMan.y === food.y) {
score++;
food = { x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize };
document.getElementById("score").innerText = `Score: ${score}`;
}
// Check Pac-Man colliding with ghosts
ghosts.forEach(ghost => {
if (pacMan.x < ghost.x + ghost.size && pacMan.x + pacMan.size > ghost.x && pacMan.y < ghost.y + ghost.size && pacMan.y + pacMan.size > ghost.y) {
endGame();
}
});
}
function updateScore() {
// Optional: Implement score incrementing as part of the logic
}
function endGame() {
clearInterval(gameInterval);
alert(`Game Over! Your final score is: ${score}`);
}
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp" && dy === 0) {
dx = 0;
dy = -gridSize;
} else if (event.key === "ArrowDown" && dy === 0) {
dx = 0;
dy = gridSize;
} else if (event.key === "ArrowLeft" && dx === 0) {
dx = -gridSize;
dy = 0;
} else if (event.key === "ArrowRight" && dx === 0) {
dx = gridSize;
dy = 0;
}
});
startGame();
