Click here for free DL of the app version that can save data.

No:25048

←

Prev Next

→

Pac-Man
Developer Dooz studio｜Date and time 23/11/16 18:31:46
Build time 229.148 sec｜Game capacity 8.237KB｜

Script

Pac-Man Game

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Pac-Man Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

body {
            background-color: black;
        }

#game-board {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            background-color: #3d3d3d;
            border: 2px solid white;
        }

.character {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: yellow;
            border-radius: 50%;
            transition: 0.2s ease;
        }

#pacman {
            top: 180px;
            left: 180px;
            z-index: 10;
        }

.ghost {
            background-color: red;
        }

.dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: white;
            position: absolute;
        }

#score {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: white;">Pac-Man Game</h1>
    <div id="game-board">
        <div id="pacman" class="character"></div>
        <div id="ghost1" class="character ghost"></div>
        <div id="ghost2" class="character ghost"></div>
        <div id="ghost3" class="character ghost"></div>
        <div id="ghost4" class="character ghost"></div>
        <div class="dot" style="left: 40px; top: 40px;"></div>
        <div class="dot" style="left: 80px; top: 40px;"></div>
        <div class="dot" style="left: 120px; top: 40px;"></div>
        <div class="dot" style="left: 160px; top: 40px;"></div>
        <div class="dot" style="left: 200px; top: 40px;"></div>
        <div class="dot" style="left: 240px; top: 40px;"></div>
        <div class="dot" style="left: 280px; top: 40px;"></div>
        <div class="dot" style="left: 320px; top: 40px;"></div>
        <div class="dot" style="left: 360px; top: 40px;"></div>
        <div class="dot" style="left: 40px; top: 80px;"></div>
        <div class="dot" style="left: 120px; top: 80px;"></div>
        <div class="dot" style="left: 200px; top: 80px;"></div>
        <div class="dot" style="left: 280px; top: 80px;"></div>
        <div class="dot" style="left: 360px; top: 80px;"></div>
        <div class="dot" style="left: 40px; top: 120px;"></div>
        <div class="dot" style="left: 120px; top: 120px;"></div>
        <div class="dot" style="left: 200px; top: 120px;"></div>
        <div class="dot" style="left: 280px; top: 120px;"></div>
        <div class="dot" style="left: 360px; top: 120px;"></div>
        <div class="dot" style="left: 40px; top: 160px;"></div>
        <div class="dot" style="left: 120px; top: 160px;"></div>
        <div class="dot" style="left: 200px; top: 160px;"></div>
        <div class="dot" style="left: 280px; top: 160px;"></div>
        <div class="dot" style="left: 360px; top: 160px;"></div>
        <div class="dot" style="left: 40px; top: 200px;"></div>
        <div class="dot" style="left: 120px; top: 200px;"></div>
        <div class="dot" style="left: 200px; top: 200px;"></div>
        <div class="dot" style="left: 280px; top: 200px;"></div>
        <div class="dot" style="left: 360px; top: 200px;"></div>
        <div class="dot" style="left: 40px; top: 240px;"></div>
        <div class="dot" style="left: 120px; top: 240px;"></div>
        <div class="dot" style="left: 200px; top: 240px;"></div>
        <div class="dot" style="left: 280px; top: 240px;"></div>
        <div class="dot" style="left: 360px; top: 240px;"></div>
        <div class="dot" style="left: 40px; top: 280px;"></div>
        <div class="dot" style="left: 80px; top: 280px;"></div>
        <div class="dot" style="left: 120px; top: 280px;"></div>
        <div class="dot" style="left: 160px; top: 280px;"></div>
        <div class="dot" style="left: 200px; top: 280px;"></div>
        <div class="dot" style="left: 240px; top: 280px;"></div>
        <div class="dot" style="left: 280px; top: 280px;"></div>
        <div class="dot" style="left: 320px; top: 280px;"></div>
        <div class="dot" style="left: 360px; top: 280px;"></div>
        <div class="dot" style="left: 40px; top: 320px;"></div>
        <div class="dot" style="left: 80px; top: 320px;"></div>
        <div class="dot" style="left: 120px; top: 320px;"></div>
        <div class="dot" style="left: 160px; top: 320px;"></div>
        <div class="dot" style="left: 200px; top: 320px;"></div>
        <div class="dot" style="left: 240px; top: 320px;"></div>
        <div class="dot" style="left: 280px; top: 320px;"></div>
        <div class="dot" style="left: 320px; top: 320px;"></div>
        <div class="dot" style="left: 360px; top: 320px;"></div>
    </div>
    <p id="score">Score: 0</p>

// Game constants
        const gameBoard = document.getElementById("game-board");
        const pacman = document.getElementById("pacman");
        const ghosts = document.querySelectorAll(".ghost");
        const dots = document.querySelectorAll(".dot");
        const scoreDisplay = document.getElementById("score");

// Game variables
        let score = 0;

// Pac-Man current position
        let pacmanX = 180;
        let pacmanY = 180;

// Ghosts current positions
        let ghostPositions = [
            { x: 60, y: 60 },
            { x: 320, y: 60 },
            { x: 60, y: 320 },
            { x: 320, y: 320 }
        ];

// Add event listeners for arrow key controls
        document.addEventListener("keydown", movePacman);

// Move Pac-Man function
        function movePacman(event) {
            const key = event.key;
            let updatedX = pacmanX;
            let updatedY = pacmanY;

if (key === "ArrowUp") {
                updatedY -= 20;
                pacman.style.transform = "rotate(-90deg)";
            } else if (key === "ArrowDown") {
                updatedY += 20;
                pacman.style.transform = "rotate(90deg)";
            } else if (key === "ArrowLeft") {
                updatedX -= 20;
                pacman.style.transform = "rotate(180deg)";
            } else if (key === "ArrowRight") {
                updatedX += 20;
                pacman.style.transform = "rotate(0deg)";
            }

if (isValidMove(updatedX, updatedY)) {
                pacmanX = updatedX;
                pacmanY = updatedY;
                pacman.style.left = pacmanX + "px";
                pacman.style.top = pacmanY + "px";
                checkDotCollision();
                checkGhostCollision();
            }
        }

// Check if the move is valid
        function isValidMove(x, y) {
            if (x < 0 || x >= gameBoard.clientWidth || y < 0 || y >= gameBoard.clientHeight) {
                return false;
            }
            return true;
        }

// Check collision with dots
        function checkDotCollision() {
            dots.forEach((dot) => {
                if (
                    pacmanX === dot.offsetLeft &&
                    pacmanY === dot.offsetTop &&
                    !dot.classList.contains("eaten")
                ) {
                    dot.classList.add("eaten");
                    dot.style.display = "none";
                    score += 10;
                    scoreDisplay.innerText = "Score: " + score;
                }
            });
        }

// Check collision with ghosts
        function checkGhostCollision() {
            ghosts.forEach((ghost) => {
                if (
                    pacmanX === ghost.offsetLeft &&
                    pacmanY === ghost.offsetTop
                ) {
                    gameOver();
                }
            });
        }

// Game over function
        function gameOver() {
            alert("Game Over! Your Score: " + score);
            location.reload();
        }
    </script>
</body>
</html>