Classic Pac-Man Arcade Game in JavaScript Canvas

13 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Classic Pac-Man Arcade Game in JavaScript Canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Canvas Pac-Man</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #111;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            overflow: hidden;
        }
        h1 {
            margin: 0 0 10px 0;
            font-size: 2rem;
            color: #ffee07;
            text-shadow: 0 0 10px rgba(255, 238, 7, 0.5);
        }
        #score-board {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }
        canvas {
            border: 4px solid #0022ff;
            box-shadow: 0 0 20px rgba(0, 34, 255, 0.5);
            background-color: black;
        }
    </style>
</head>
<body>

<h1>PAC-MAN</h1>
    <div id="score-board">SCORE: <span id="score">0</span></div>
    <canvas id="gameCanvas" width="440" height="440"></canvas>

const TILE_SIZE = 40;
        let score = 0;

// 1 = Wall, 0 = Pellet, 9 = Empty
        const map = [
            [1,1,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,0,1,0,0,0,0,1],
            [1,0,1,1,0,1,0,1,1,0,1],
            [1,0,1,0,0,0,0,0,1,0,1],
            [1,0,0,0,1,1,1,0,0,0,1],
            [1,1,1,0,1,9,1,0,1,1,1],
            [1,0,0,0,1,1,1,0,0,0,1],
            [1,0,1,0,0,0,0,0,1,0,1],
            [1,0,1,1,0,1,0,1,1,0,1],
            [1,0,0,0,0,1,0,0,0,0,1],
            [1,1,1,1,1,1,1,1,1,1,1]
        ];

class Pacman {
            constructor() {
                this.x = TILE_SIZE * 1.5;
                this.y = TILE_SIZE * 1.5;
                this.radius = 15;
                this.speed = 2;
                this.dirX = 0;
                this.dirY = 0;
                this.nextDirX = 0;
                this.nextDirY = 0;
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0.2 * Math.PI, 1.8 * Math.PI); 
                ctx.lineTo(this.x, this.y);
                ctx.fillStyle = '#ffee07';
                ctx.fill();
                ctx.closePath();
            }

// Checks tile boundary overlap prior to movement
            checkCollision(nx, ny) {
                let tileX1 = Math.floor((nx - this.radius) / TILE_SIZE);
                let tileX2 = Math.floor((nx + this.radius) / TILE_SIZE);
                let tileY1 = Math.floor((ny - this.radius) / TILE_SIZE);
                let tileY2 = Math.floor((ny + this.radius) / TILE_SIZE);

return (map[tileY1][tileX1] === 1 || map[tileY1][tileX2] === 1 ||
                        map[tileY2][tileX1] === 1 || map[tileY2][tileX2] === 1);
            }

update() {
                // Attempt to apply queued direction updates smoothly on tile alignment
                if (this.nextDirX !== 0 || this.nextDirY !== 0) {
                    if (!this.checkCollision(this.x + this.nextDirX * this.speed, this.y + this.nextDirY * this.speed)) {
                        this.dirX = this.nextDirX;
                        this.dirY = this.nextDirY;
                    }
                }

let nextX = this.x + this.dirX * this.speed;
                let nextY = this.y + this.dirY * this.speed;

if (!this.checkCollision(nextX, nextY)) {
                    this.x = nextX;
                    this.y = nextY;
                }

// Eat pellets
                let currentTileX = Math.floor(this.x / TILE_SIZE);
                let currentTileY = Math.floor(this.y / TILE_SIZE);
                if (map[currentTileY][currentTileX] === 0) {
                    map[currentTileY][currentTileX] = 9;
                    score += 10;
                    scoreEl.innerText = score;
                }
            }
        }

class Ghost {
            constructor(color, xTile, yTile) {
                this.x = xTile * TILE_SIZE + TILE_SIZE / 2;
                this.y = yTile * TILE_SIZE + TILE_SIZE / 2;
                this.radius = 15;
                this.speed = 1.5;
                this.color = color;
                this.dirX = 1;
                this.dirY = 0;
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, Math.PI, 0, false);
                ctx.lineTo(this.x + this.radius, this.y + this.radius);
                ctx.lineTo(this.x - this.radius, this.y + this.radius);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

checkCollision(nx, ny) {
                let tileX1 = Math.floor((nx - this.radius) / TILE_SIZE);
                let tileX2 = Math.floor((nx + this.radius) / TILE_SIZE);
                let tileY1 = Math.floor((ny - this.radius) / TILE_SIZE);
                let tileY2 = Math.floor((ny + this.radius) / TILE_SIZE);

return (map[tileY1][tileX1] === 1 || map[tileY1][tileX2] === 1 ||
                        map[tileY2][tileX1] === 1 || map[tileY2][tileX2] === 1);
            }

update() {
                let nextX = this.x + this.dirX * this.speed;
                let nextY = this.y + this.dirY * this.speed;

if (!this.checkCollision(nextX, nextY)) {
                    this.x = nextX;
                    this.y = nextY;
                } else {
                    // Simple Random AI fallback when encountering a wall boundary
                    const directions = [{x:1, y:0}, {x:-1, y:0}, {x:0, y:1}, {x:0, y:-1}];
                    let validDirs = directions.filter(d => 
                        !this.checkCollision(this.x + d.x * this.speed, this.y + d.y * this.speed)
                    );
                    if (validDirs.length > 0) {
                        let randomDir = validDirs[Math.floor(Math.random() * validDirs.length)];
                        this.dirX = randomDir.x;
                        this.dirY = randomDir.y;
                    }
                }
            }
        }

const player = new Pacman();
        const ghosts = [
            new Ghost('#ff0000', 5, 5), // Blinky
            new Ghost('#ffb8ff', 5, 4)  // Pinky
        ];

// Standard requestAnimationFrame loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            drawMap();
            player.update();
            player.draw();

ghosts.forEach(ghost => {
                ghost.update();
                ghost.draw();
            });

checkGameOver();
            requestAnimationFrame(gameLoop);
        }

// Keyboard Event Handling
        window.addEventListener('keydown', (e) => {
            switch(e.key) {
                case 'ArrowUp':    player.nextDirX = 0;  player.nextDirY = -1; break;
                case 'ArrowDown':  player.nextDirX = 0;  player.nextDirY = 1;  break;
                case 'ArrowLeft':  player.nextDirX = -1; player.nextDirY = 0;  break;
                case 'ArrowRight': player.nextDirX = 1;  player.nextDirY = 0;  break;
            }
        });

// Initialize core engine
        gameLoop();
    </script>
</body>
</html>

CSS

Comments 0

…

Classic Pac-Man Arcade Game in JavaScript Canvas

Recommended

Comments 0